2.2 显示器和鼠标对网页设计的影响

引子

曾经为一家日用品电商公司做过外包的网站设计，那家电商公司的老板有一个绰号，叫做“十屏大师”。他最喜欢的设计就是那种超过十屏的超长网页，尤其喜欢各种产品展示疯狂的无脑堆砌。我们总感觉他为了希望少付钱（我们与他是按照页面数量结算的）而竭尽全力把所有的产品堆在一个页面上。

当然，对于这样的设计理念，他有他的理论：电商网站就和大卖场一样。人们都喜欢去逛东西很多的大卖场，东西堆得多，就感觉选择多，让人感觉这个大卖场有规模而且看起来热闹。至于货架空空的大卖场，就让人感觉空空如也，一点也不热闹，购买欲望瞬间就没了。所以网页做的越长，产品堆得越多，人们越容易产生购买欲望。

虽然不能说他的观点完全是错的，但至少他忽略了一个基本事实：网页不同于其他的媒体。他有显示器和浏览器的限制。无论设计再多屏的产品，但是用户在一屏看到的产品就这么多。不会因为你设计了超过十屏就感觉东西多，反而会觉得内容太多太杂，直观的阅读体验不好而产生流失。

网页设计的载体是电脑和互联网，而我们浏览网页时使用最多的就是显示器和鼠标，这两样电脑设备无形中影响着用户的浏览习惯，这些浏览习惯又影响着网页设计本身。了解这些由于设备技术局限而产生的用户浏览习惯，对于网页设计师而言非常重要——这也是本章我们探讨的主要话题。

正文

前面提到过平面排版设计与网页设计的传承关系，但是网页设计作为一个依托于电脑与互联网的设计行业，依然有着自己的特性。由于网页最终呈现是在电脑的显示器上，并且框取在浏览器的显示范围内，所以网页在浏览的时候就存在着“截取”的特性。这就要求网页设计师设计的作品，不仅仅是整体看起来一气呵成，具有设计的完整性，更需要在“截取”和“滚动”的状态下保持局部的完整性。

经常会有这样的情况，设计师的设计稿件看起来非常完美：细节到位，整体美观，各种看起来都很好。但是实际制作成HTML放到浏览器里看就会发现各种比例失调、各种隐藏的问题都会暴露出来。有些是无论什么分辨率看都觉得奇怪，有些是在某几个分辨率下看表现差强人意。

归根结底，这些问题的出现，都是设计师在设计过程中，没有按照实际浏览的情况进行检查，或者检查得不够仔细。

放大到100%检查设计，这是很多新人最初入行的时候，老设计都会提醒的诀窍。很多设计师也的确会在Photoshop里放到100%去检查，但依然会出问题。因为Photoshop毕竟不是浏览器，浏览器分辨率又标准繁多，很难在一个显示器上模拟所有分辨率下的显示效果，此时比较容易实现的校验办法是拉首屏辅助线。

上图是一些常用尺寸，拉首屏辅助线的一些参数。大部分设计师都会在设计之初拉上首屏辅助线，但是高度的首屏辅助线往往是会遗漏的。而且随着制作的深入，辅助线拉得较多的时候，最初的那几根分辨率的辅助线往往会淹没在辅助线的海洋里再也起不了作用。所以，更好更直观的办法是，拉好首屏辅助线之后，按照辅助线的边界，单独建立图层组，根据不同的分辨率建立安全线框图层，如下图所示。

辅助线的意义更多的是对于首屏的，因为首屏在整个网页设计中是重中之重，用户访问一个网站，对于网站的第一个直观印象就来源于首屏。这么说似乎有些残忍，对于网页设计而言，设计对于网页最大的影响，就是新用户进入网站后，在最初几秒对网页首屏的感受。这种直观感受，会在很大程度上影响网站用户的转化与留存。

因为工作的关系，我会去网吧参与公司游戏的市场调研。职业习惯使然，我总是习惯性的留意网吧用户浏览页面的习惯。通过观察，我发现用户在使用电脑浏览页面的时候会有很多不一样的习惯，但是从大方向来说，还是有规律可循的。

对于一个新用户而言，浏览大部分网页是一件很随机的事情，当用户打开一个新网站的某个页面，首先会在首屏停留一小段时间，然后就是使用鼠标滚轮向下翻动页面（有时候还会有一个回滚的动作，但通常幅度较小）——第一次滚动与第二次滚动之间间隔时间通常会略长，第二次以及之后的滚动频率就变的很随机了。

所以，对于用户而言，真正网页产生注意力的有效范围，就是首屏到一屏半的位置。当你进入一个新的网站，使用鼠标向下滑一下，你会发现大部分的阅读是停在一屏半的距离内。换言之，作为设计师，我们需要将我们觉得用户最有兴趣看的内容，或者客户最希望用户去关注的内容放在这一屏半以内——尤其是首屏的内容，那更是寸土寸金，需要设计师反复为之推敲论证。

如何去分配首屏的阅读资源？哪些资源放在哪些位置会更合适？说到这里，就不得不说一下新用户看到网站之后，视线在显示器上的移动规律了。

如下图所示，当用户面对显示器的时候，他的视线注意力会是怎样移动的？按照正常的阅读习惯，人们的阅读习惯应该是从左到右从上到下的顺序，也就是1-2-3-4-5-6的顺序。但是现实情况有一些出入，假设用户进入的是一个门户网站，阅读的时候首先会被5所吸引，然后关注6和4，之后可能会关注2（并不是所有人都会抬起眼睛，将视线放到这个位置），至于1和3，往往是用户的视觉盲点。也就是说用户的阅读顺序是5-6-4-2-1-3。

为什么会有这样的变化？答案在于最初的浏览习惯。不知道大家还记得在前一小节里出现的门字形布局吗？如果记得就会发现，5和6的位置往往是网站信息相对集中的位置（其中5更是通常用来放重点新闻和重点活动的位置，有点类似于传统报业的头版头条的意味）。当一个新用户浏览网页的时候，他是一个随机行为，在这种情况下，很多用户会下意识的关注页面的内容里是否有他想要了解的内容。

而4所在的位置，往往是功能性导航，相对而言也是用户会较为关注的位置，所以会成为第二视觉焦点。

至于2-1-3的顺序，如果做电商或者企业站的朋友就会发现，2这个位置通常是标题大图和导航的位置，而由于需要适应不同分辨率显示器的浏览需要，标题大图和导航这样的“有用信息”往往集中在中间，所以两边经常会被人忽略。

当然，这个规律并不是死的，以上这些总结的视觉习惯，只能说对于大部分的门户网站有效。对于不同的网站，人们的视觉习惯会有很多不一样的变化，比如你浏览功能性非常强的网站，视线也许会被功能导航所在的4所吸应。而对于类似百度、谷歌这类的网站，在搜索首页，人们的视觉中心是在整个屏幕中心的——因为界面非常简洁，除了中心的操作区域别无其他能够吸引你的东西。而到内页之后，往往是遵循着1-2-4-5这样的顺序去阅读。在用户潜意识中，搜索引擎左侧的信息往往更为有用。

人眼关注中心的变化，往往是多年来被各种同类型网站“洗礼”后产生的。视觉习惯是一个“先入为主”的心理活动，形成需要很长的时间，但是打破这种习惯，却要付出比引导用户形成习惯更高的成本。所以对于设计师而言，在做任何“创新”之前，都要考虑到是否改变了这些视觉习惯？这种改变是否真的具有“高性价比”？

也许有人会质疑：顶通的位置，不是比下面的位置更靠上，更容易吸引人们的视线吗？说到个问题，就不得不提一个让设计师略微沮丧的现象。传统意义上，大家都觉得图片比文字具更容易获得人的关注。而事实上，至少在用户潜意识里，人们的视觉往往更容易被“大标题”所吸应——尤其是文字信息中对用户有吸引力的内容。

如果大家看过带字幕的原版电影电视剧，就会发现翻译的文字基本上是放在画面下方的。而如果文字出现在画面的上方，往往会让人感觉很难受，因为根据视觉习惯，人们的浏览习惯自然是自上而下的。如果先看到画面，后看到文字，我们可以把注意力集中在文字上，而用“余光”去看画面。反之，我们的注意力只能集中在文字上，而画面往往会产生“来不及看”的现象。对于大脑而言，文字的信息较为“重要”，自然会重点照顾，当文字信息来不及接收的时候，自然会撇除较为次要的信息——比如画面。

从人的视觉活动来说，对于图形的记忆是模糊的，而对于文字的记忆相对清晰。因为图片的信息过于庞大且无效信息较多，所以大脑自然会相对“模糊”的进行过滤。而文字是经过人们提炼过的“有价值”的信息，自然会更加容易获得大脑的青睐。当然，人们对于文字的记忆，也不是大而全的，往往会注意的焦点是那些“大标题”以及那些感兴趣的“词组”，所以对于我们需要传达的并且用户非常感兴趣的文字元素，是需要着重突出的。

说到这里，网页设计师们是否会觉得沮丧：难道我们做的这些努力都是徒劳的？实际上也没这么糟糕。网页设计最主要达成的目的是使得网页美观且符合网站的气氛。在所有浏览注意点形成之前，还有一个被称为“第一次接触”的视觉触感。当一个网站制作粗糙、并且阅读体验非常糟糕的情况下，除非网站的内容对用户足够有用，否则用户是不会在这个网站上多做停留的。

用户的视觉习惯，也并非是铁板一块。设计师可以通过各种设计手段去引导用户产生不一样的浏览习惯。这种引导是潜意识的，不会让用户产生反感，这也是网页设计师在设计门户网站时候最需要花费精力关注的问题。在下一小节里面，我们就来说一下，如何引导用户的视觉关注点。