网页首屏设计分辨率分析

1/1网页首屏设计分辨率分析

每个从事互联网行业网站设计的人，对于网页分辨率大小和首屏尺寸的确定都不陌生，因为几乎每天我们都在跟网页打交道。由于不同终端分辨率的差异，网站的体验会有所差异。为了保证绝大多数的用户在不同终端都能有好的用户体验，设计师应该充分考虑网页首屏在各终端的适配问题。本篇文章主要讨论的就是网页首屏设计推理的过程和思维方式。以下仅供参考！

首屏定义来源——出版领域的“头版”

首屏的英文是abovethefold，fold有折叠之意，abovethefold是指在折叠之后能看到的内容。为什么首屏的英文翻译会跟折叠有关系呢？原因很简单，这个概念最早用于出版领域，可以简单的理解为“头版”。因为报纸的运输和分发过程是折叠起来的，所以报纸的折叠后暴露在读者面前的那一部分内容就显得尤其重要，读者会根据头版的内容决定是否购买。因此处于头版的内容意味着xx认为它们是最重要的，头版的内容也决定了出版物的立场和定位。所以“abovethefold”也用来表示所有优先显示或或优先级最高的内容。

首屏衍生到互联网

“abovethefold(头版)”的概念延伸到互联网领域。用来指代web网页中不用滚动屏幕看到的信息。与出版业的“头版”不同的是互联网的首屏区域是动态的，由于互联网用户复杂的屏幕分辨率环境，导致他们看到的首屏内容有很大差距。很多店铺设计就是因为对首屏的忽视导致很严重的体验问题。

比较典型的首屏体验问题

设计师应该认真思考下自己做过的一些网页首屏设计分辨率是多大的？为什么要定成这么大？有什么理由或是数据可以支撑自己的设计吗？带着这样的疑问，我们来看一下一些典型的首屏体验问题（在1024*768的分辨率下查看的页面效果）。

问题1：出现横向滚动条

由于网页在设计时没有充分考虑到宽度的适配问题，导致了在分辨率比较低的时候，适配没有做好，所以宽度方向的内容放不下出现了横向滚动条，影响了用户体验。

问题2：首屏的完整性

banner的内容呈现不完整，传达出来无效的信息。如下如的banner产品信息不完整，也没有呈现出主题的信息，相当于是浪费了首屏这么重要的位置。

问题3：切换标签无变化

由于首屏呈现的内容很少，然后标签切换的时候，变化区域在首屏一下，用户是看不见的。导致了用户会以为切换后没有反应，影响用户的体验最终导致流失。（PS：一种可能的解决方法，用户切换后，网页可以稍微向下滑动20%的距离，让用户感觉到操作有变化和反馈）

问题4：链接跳转页面无变化

首页的大banner在点击后进入对应的推广页面，但是点击过后只是将菜单收起来，其他的内容大小颜色状态什么的都没有发生变化。引发用户的疑问，疑问没反应。实际上在首屏以下的内容是不一样的。只是同样的首屏Banner误导了用户。

尼尔森首屏原则

看了上面这些首屏设计不当可能会引起的问题，有些设计师可能会认为，首屏并没有那么重要，用户是会滚动屏幕最终看到我们期望他们看到的内容。如果你有这样乐观的想法，建议你看一下这份尼尔森的研究报告：(雅各布尼尔森(JakobNielsen)，著名网页易用性专家。被誉为可用性测试鼻祖。JakobNielson是尼尔森—诺曼集团的主要负责人之一，他被《美国新闻与世界报道》杂志誉为“Web可用性方面的世界顶尖专家”。他在2012年的时候输出的研究报告很好的论证了首屏的重要性。下面是原文网址

根据这份报告得出的结论，即使是在用户滚动屏幕的前提下，用户的注意力分部占比任然是相当悬殊的：用户会花80%的注意力在首屏以上的内容，即使用户会滑动屏幕，但也只会花20的注意力在首屏以下的内容。

通过上面分析出来可能出现的问题和列举的一些经过实践研究的原则，我们了解到首屏设计的重要性。那么要从哪些方面来考虑首屏的'设计才能避免了这些问题，让我们的网页在统一各端风格的同时保证用户体验？是不是可以从以下方面考虑（因为我们使用网页必须通过终端，再通过浏览器来查看，所以可以从这两方面来考虑问题）

根据百度统计的数据，收集了所负责产品的真实用户终端访问数据（占据超过90%的分辨率），然后进行分析。首先说明一个问题，可能有些人会怀疑百度统计数据的真实性，所以这些数据我们仅仅作为参考，这些数据可能会有点差异，但是靠前的也能说明问题。每个公司都应该具备这样的大数据部门来分析这些数据，这样就更有说服力。纵观靠前这些分辨率的最小宽度是1024*768，并且这个分辨率也占据了第四的位置，属于比较重要的我们必须兼顾考虑的范围。同时在高度分辨率上选择768也能满足90%以上的终端分辨率。所以最终选择1024*768的分辨率来进行设计适配是比较合理的。当然有些产品根据数据结果显示1024*768的分辨率占比很小，那他们设计师可能就可以忽略不计，并选择其他兼顾90%以上的分辨率来进行考虑。

考虑了终端的问题后，再来看看浏览器的问题。同样也是根据百度统一的数据列举了占比比较多的浏览器。分析这些可以获得的信息就是，充分了解到各浏览器的参数，方便后续确定首屏的宽度和高度。有了以上的终端分辨率和浏览器数据后，可以选取有代表性的数据作为依据推理首屏合理设计尺寸范围。

宽度：1024-15*2=994

高度：768-160-40-120-30=418

根据实际的情况来进行计算，减掉对应的参数得到合理的范围。这样的思维方式可以应用到一切网页的设计，因为只要是网页设计就必须考虑这样的问题。

可能会有设计师认为994*418的分辨率在高分辨率的情况下有点浪费空间，那么我们可以从另一种方式来考虑。那就是根据实际的数据分成两种以上的分辨率来进行设计适配，保证高分辨率和低分辨率用户的体验达到很好的统一。下图知识