https://pvcrml.com/
手机站 网站地图 微信:a654321AD QQ:2040768308
女神SEO

网站设计布局和移动适应在企业网站推广中的重要性

在考虑网站页面设计风格布局时,或以后UI、当前端设计师沟通时,他们经常被问到“这个页面是定宽页还是全屏?”“适应不同的移动终端”“该页面是使用浏览器滚动条还是在页面内滚动?”作者分享了自己的解决方案。

网站设计布局和移动适应在企业网站推广中的重要性(图1)

1.页宽:定宽页or全屏页面?

采用定宽或全屏。大多数网站需要根据页面内容来决定是使用固定宽度还是全屏。

1.定宽页面

目前,笔记本电脑的常见屏幕分辨率为1366*768台式机常见分辨率为1440*900、1920*1080。市场上可能遇到的最低分辨率是1280*768,如投影仪或其它设备(其它较小的屏幕暂时不考虑)。

为了保证内容在小屏幕下完整,常用的定宽页面尺寸为1200px,可以根据显示的内容、页面导航、页面其他元素、页面需要适应的终端等进行调整。例如,简书主页的宽度是960px;京东订单详情1210px。

常用于定宽页面:详细信息、图片、字段不多的列表、内容流等。

虽然定宽页面可以避免屏幕适应的麻烦,但对于一些内容,可能会觉得大屏幕下太吝啬,体验不好,比如图片。站在这一点上,处理得更好,可以借鉴。当屏幕宽度大于时 1600 时,采用 1400 定宽;当屏幕小于1600时,使用 1150 同时,图片大小也会发生变化。(注:淘宝和JD.COM的商品列表页面也采用了类似的处理方法)

2.全屏页面

全屏页面是指除了页面左右边界外,页面中的内容会随着屏幕的大小而填充。但是,为了保证页面内容的正常显示,一般会设置最小的适应宽度,页面低于此宽度不再设置,页面出现横向滚动条。

全屏页面常用于:网站宣传页面、左导航管理网站、多字段列表页面、需要全屏查看的看板页面、瀑布流页面,或页面用户需要更大的视觉区域才能方便操作元素,如地图轨迹等。

如果屏幕变大或变小,则需要考虑全屏页面。常用的适配方法有:

按屏幕大小等比例放大(或根据不同屏幕设置不同的放大/缩小比例);

元素高度不变(大屏幕下可能导致元素比例变形,视觉效果差);

根据屏幕的大小,增加/减少每行显示的内容多少(多数适合于页面内容为网格布局的情况);

使用bootstrap采用响应式布局等框架(根据屏幕大小,同时改变元素排版)。

根据页面内容、屏幕下内容的显示以及整个网站使用的框架,选择具体的适应方法。

根据页面内容、屏幕下内容的显示以及整个网站使用的框架,选择具体的适应方法。

二 页面高度

当页面内容超过页面高度时,是使用页面滚动条还是模块滚动?

页面滚动条适用于内容流页面。页面底部固定或底部没有其他元素。此外,还需要这种滚动模式‘返回顶部’按钮按钮。当数据需要分页时,多采用滚动分页。

滚动模块通常用于操作需要固定在顶部/底部的页面。当页面中有多个模块需要内部滚动或模块分割时,应考虑每个模块的视觉区域是否太小,无法操作。当数据需要分页时,通常使用翻页分页。

以下示例:因为在 1366 在屏幕下,除了浏览器和网站导航的高度外,内容的显示高度可能只是 650 左右,视觉区域太小,影响用户体验。因此,整个页面的布局可能需要重新调整。

三 总结


在设计页面时,应特别注意屏幕大小对页面的影响。否则,会导致整个页面的交互布局需重新设计。另外,要权衡各自的利弊,最大限度地保证用户体验不受屏幕大小的影响。

网站设计布局和移动适应在企业网站推广中的重要性(图2)

我要优化(加QQ客服第一时间和你对接)

已有 1826 企业通过我们找到了合作项目

联系方式

  1. QQ:2040768308
  1. 微信:a6543218AD

友情链接

首页 |网站地图