网页首屏设计分辨率分析

　　每个从事互联网行业网站设计的人，对于网页分辨率大小和首屏尺寸的确定都不陌生，因为几乎每天我们都在跟网页打交道。下面是小编为大家整理的网页首屏设计分辨率分析，欢迎参考~

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

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

　　首屏衍生到互联网

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

　　比较典型的首屏体验问题

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

　　问题1：出现横向滚动条

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

　　问题2：首屏的完整性

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

　　问题3：切换标签无变化

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

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

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

　　尼尔森首屏原则

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

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

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

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

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

　　宽度：1024-15*2=994

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

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

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

　　总的来说，994*418的有效设计范围可以用来检测目前的网页设计是否合理。本篇文章只是提供了这样的一种思路，如果对于百度统计数据有疑问的，可以从所负责的产品本身分析出更准确的数据然后进行替换分析，得出最后的结果。

　　举个栗子，京东商城就是在宽度大于1024以上的终端显示器上采用一种分辨率，然后在小于1024分辨率上做了微调进行设配。在保证整体结构统一的前提下，优化不同终端页面的体验。

　　总的来说，以网页首屏分辨率设计分析的例子提供一种思路，来使设计师的设计都有理可依。同样的可以延伸到手机端WAP，应用、游戏的分辨率适配。与此同时，提供的一些思维方式就是在平时的设计中，设计师要多问为什么！不断的思考质疑自己的方案，帮忙寻找到更好的支撑。为什么设计成这个大小？图标样式为什么要设计成这样？在不断发问的同时，设计师慢慢的可以找到些依据作为支撑。

　　在这个过程中，有几个明显的好处就是设计师会强迫自己学习更多的知识，让自己的设计有理可依后，在向产品经理卖稿的时候，可以更有说服力，成功率自然也会更高。在寻找依据的时候可以从以下几个方面考虑：首先最有说服力的肯定就是后台用户实际的使用数据结果分析，抽取对自己方案设计有用的部分；其次，可以从一些设计定律原则方面入手，因为这些定律法则都是经过很长时间的实践得出的确实可行的方法，也可以有很高的说服力；如果条件允许的话，也可进行用户调研或是测试等得出一些结果做支撑，等等。如果能从这几个方面考虑，都能大大提高自己的分析能力和方案的可信度。

【网页首屏设计分辨率分析】相关文章：

网页设计技巧10-02