2.3 视觉的魔法：网页的视觉引导

引子

不知道大家看过《网球王子》这部动画片没有？里面有一位叫手冢国光的选手，非常擅长通过回球的旋转变化和回球路线，引导对手以他所希望的方式，将球回击到他所希望的回球位置，堪称网球界的魔术师。

同样的，在网页设计中，我们也可以通过一些视觉的方法，实现对用户注意点的潜在引导，使得用户关注到我们希望他关注到的内容，甚至有可能以我们希望出现的浏览顺序完成页面的浏览。这种方法，我们称之为网页的视觉引导。

网页的视觉引导是基于设计师对于用户体验的分析，利用人眼在视觉上的习惯潜移默化的引导用户按照设计师的设计逻辑关注页面的方法。这样的视觉引导来源于平面设计的一些视觉规律，但由于网页设计的独特性又有了一些独特的演绎。在这一小节，我们就来解密如何利用网页的视觉引导来完成这样的视觉魔法。

正文

人眼是一个精密的视觉仪器，它能帮助我们捕捉到身边视野范围内所有的视觉信息，但这些信息如果完全捕捉下来是非常巨大的，于是大脑在视觉信息收集归档的过程中设置了一个“过滤”的“阀门”，撇除了那些被大脑定义为“无效”的信息，并记录下大脑确认为“有用”的信息——网页的视觉引导就是基于此规律而产生的心理行为引导。

网页的视觉引导方法多样，设计师在实际使用中可以根据实际情况灵活的组合使用。归纳起来的话，大致有以下这些方法。

1.大小的变化

人眼的视觉习惯，总是会对大的东西较为关注，而忽略掉小的东西。你看到一个大象的时候，是很难注意在大象身边的老鼠的。

利用这个规律，在网页排版布局的时候，我们可以通过内容板块的大小来引导用户浏览较为重要的内容。大小的变化，在整个网页设计的视觉引导中是最浅显、也是最常用的方法。这也是为什么很多需求方，总是喜欢说“标题放大！LOGO放大”的原因——对于他们而言，这是他们所知的最有效地突出重点的办法。

2.形状的变化

人眼总是喜欢捕捉那些“不同”的事物，这也是所有设计最初需要遵循的规律，在一片一模一样事物中，突然出现一个形状不同的事物，总是会让你下意识地关注那个“与众不同”的东西。

在一堆方形中，圆形总是非常突出；在一堆规则的形状中，不规则的形状总是惹人注目。网页设计也是如此，在四平八稳的页面中点缀一些不一样的元素，不仅可以使得页面灵动，增加形式上的趣味，更能使得需要突出的东西得到关注。

当然，所有的元素都变化了，变化也就没有了，反而会显得杂乱无章、乱七八糟。所以变化的运用需要拿捏住度。

3.颜色的变化

人眼的视觉捕捉系统是由锥状细胞和杆状细胞组成的。锥状细胞负责感知光的强弱和色彩的变化，而杆状细胞则是分辨色彩的明暗。锥状细胞更喜欢捕捉那些色彩鲜艳有强烈刺激的颜色，而杆状细胞则喜欢捕捉那些明暗反差大的事物。

我们在实际设计中会发现，在暗色背景下使用亮色且纯度较高的文字（比如黑色背景下使用黄字）和在亮色背景下使用反差较大的纯色字体（比如白底红字），都能产生较为“醒目”的效果。并且，发光的元素往往相较不发光的元素，更容易引起人们的注意——这些应用便是遵循了上述两个规律。

在实际制作中需要注意，颜色纯度的运用、大小和比例是需要控制的，因为人的视觉习惯是在颜色刺激越强烈的事物上停留的时间越短，且面积越大，这个效应越明显。所以较为强烈的色彩运用建议放在页面上较为重要的内容上。

发光的元素可以增加页面气氛并强调某些局部重要元素，但运用过多，也会使得页面满屏花亮，毫无重点。广告摄影课的时候，我老师曾经说过，最好的补光只需要一个光源，因为天上只有一个太阳。

4.空间的变化

关注时尚人像摄影的朋友会发现，化妆师们总是想尽一切办法将模特的脸蛋打造得光鲜立体——立体的东西总是容易让人留下深刻印象，因为自然环境是立体的，有了立体感，视觉上才会有空间的感觉。

在Photoshop中有两个常用的效果：浮雕与阴影。这两个工具可以帮助我们在二维的页面展示中制造“伪空间”的效果，一方面能使得页面更有代入感和层次感，另一方面也是网页视觉引导的方法之一。人眼总是会优先关注立体的并且看起来“近”的事物，所以在网页设计中，我们也可以通过这种“伪空间”的错觉让用户优先关注那些看起来更“近”更立体的“东西”。

当然，并非所有情况下，都是越近越能引起我们注意的，平行透视就是一个特例。平行透视最大的特点就是，能让我们跟随着透视的引导“聚焦”于中心点上。所以做设计时经常使用放射性的布局，使得中心的元素能为人们关注。

另外，浮雕效果里的“凸起”与“下凹”是具有强烈暗示意味的。当物件“凸起”的时候，我们会觉得这个地方是“可点击”的，所以你会发现，很多软件界面以及网页设计的时候，都会使用“凸起”的按钮，而“下凹”给人的印象是“不可点击”的，所以 “下凹”往往用在类似文字框和“按钮被点下去”这样的情况下。需要注意的是，文字和按钮都是灰色且灰值反差较小的按钮，无论是“凸起”还是“下凹”都会给人“此按钮不可点击”的感觉。

5.疏密的变化

为什么对于12像素的汉字，最适合的行高是18～24像素之间？

很多人会说，这是一个便于阅读的行间距。的确，从阅读的角度，低于18个像素的行间距，看起来密密麻麻非常吃力——甚至患有密集恐惧症的用户会拒绝阅读；而高于24个像素的行间距，又会让人看起来空的难受，视觉焦点在换行时甚至会有短暂的停顿。

但为什么我们会对阅读有这样的感受？究其原因，还是由于大脑对于不同密度信息采取不同的记忆方式所导致的。

大脑对于大量类似的信息，会采用“批处理”的方式进行记忆（也就是提炼出共性，记个大概），信息密度越大这种方式越明显，除非你主动关注某个细节。而离开较远的两个事物，大脑又会判断这两个事物“没有关联”，并产生注意力的断点以便节约大脑资源。所以，这就要求网页设计师在页面排版布局的时候，注意板块与板块之间，元素与元素之间的密度要合适，这样才能保证良好的阅读和有效的视觉引导。

6.包装过的标题更容易让人注意到

前文说到过，相对于图片而言，“标题性”的文字更容易被人记住。在人的潜意识中，总是会对“包装精美”的东西记忆犹新——这一点在标题的包装上也是如此。

使用合适的字体包装，能够让人对标题产生关注度和记忆点。在人脑中，对于这样的标题，总是会贴上“重要信息”的标签。所以字体设计对于网页设计而言是很重要的一环。好的标题设计，甚至会提升设计的档次。

当然，标题是总领全文的东西，所以字数一定要短，便于记忆。同时，字体的包装也应该秉承“少而精”的原则，一定要将设计包装的精力集中在需要重点突出的信息上。

7.恰当的图片能帮助“标题”积攒眼球

虽然“标题”相对于图片更容易产生记忆，但是恰当的图片是能“提示”大脑去关注“标题”的。如果将图片作为“标题”的美化包装，那这个理论就好理解了。

人们在浏览图片的时候，那些抽象的、风景的（尤其是像宇宙、星空这种的）、较为规律的图形化图片都很难引起视觉的注意力，所以这类图片通常都会用来做桌面或者页面的背景。而具体的事物，比如产品照片、人物（尤其是身材匀称的美女）照片之类的，往往更容易产生带入感，使人有兴趣对于图片包装下的标题产生阅读兴趣。

8.文字、图表相对于数字更容易获得关注

对于大脑而言，我们更容易记住文字的内容——除了数字之外。

“一看到一大堆的数字我就头疼”——很多人都有这种困扰。阿拉伯数字对于大脑而言并非直接记忆的对象，所以相对于文字，阿拉伯数字往往不够直观。当然如果你希望达到让人感觉“虽然数不清是几位数，但总之数字很大很大”的效果，阿拉伯数字的效果还是很好的。

对于单一的数字，超过5位数以后就很难让人记住。比如，你会记得自己的电话号码，但你很难记住你朋友的手机号码，除非你们熟到一定程度。如果这样的数字出现一堆……哦！天啊！饶了我吧！

一个好的解决方案是使用文字——毕竟文字是最适合大脑记忆的方式，简洁明了（一百万总是比看1000000来得直接吧）。而面对大量的数据报表，牵扯到对比、趋势、比例这样的数字信息的时候，图表化是更好的选择。简单的图形，对应直观的效果，这种情况比数字更能说清楚问题。这时候并不需要深度记忆，人们往往只需要记一个趋势。所以与其选择复杂的数字表单，不如使用图表来的印象深刻。

需要注意的是，图表的制作也是有讲究的。对于有连贯性的数据，尽量用折线图这样的方式较为合理。而有对比性却不连贯的数据，使用柱状图较为合适，而比例类型的图表则可以使用饼状图，图表需要是简单易懂且能直接说明问题的，尽量减少文字性的描述，尽量避免在一张图里牵扯到较为复杂的数据——如果你做过PPT那就会发现，其中的道理是相通的。

9.暗示性的图形元素更容易获得瞩目

有人总结过：活动性的网页只要做得华丽，大红大紫，光线绚丽，再加上放满金光闪闪的各种活动奖励，基本上就算成功了。

不得不说，虽然有些投机取巧的感觉，但这仍然是一句有用的大实话。这句话前半句说得是气氛的营造对于网页设计的重要性，后半句则说的是暗示性的图型元素更容易吸引人的注意。

说到这里，也许你又在疑问：之前不是说文字“标题”比图片更容易获得关注吗？事实上，前一小节说的是“一般情况”下，有一般情况，自然有特殊情况了。当图片本身的信息单一，且含有非常明确的信息的时候，往往这样的图片更容易被人们所关注。

什么样的图片具有暗示性？宝箱、礼盒、金条、豪车、美女（又是美女……你懂的！）等人们比较关注的信息明确单一的事物，还有类似箭头、点击状的鼠标手、视频的播放暂停按钮图形等具有心理暗示意义的图形，这些都是暗示性的图片元素。

当然，需要注意的是，此类图片的应用必须要切题，否则依然会产生负效果。很多页游在做广告的时候，都会用到各种暗示性的图片，甚至有些图片还会非常“过火”（这种行为必须强烈谴责，简直是带坏社会风气）。用户被这些图片所吸应，点开游戏一看，完全两码事，于是在连游戏名字都没记住的情况下就流失了——快速的带入流量后快速的流失，任何网站都不希望这样的情况发生的。

10.一静不如一动

网页之所以区别于传统平面排版很大程度上在于网页设计的多媒体特性。对于用户而言，动画、视频等元素总是比静态的图片更容易吸引眼球。

对于动态元素，我的态度是谨慎的。动态效果是点睛之笔，但用多了反而会分散用户的注意力，降低关注黏度。而视频以及其他交互的动态元素，我更喜欢被动响应的——主动帮助用户决定某些事情的强制行为，在我看来是非常不友好的。任何的视觉引导，都应该秉承非强迫性的原则，任何强制体验的行为，在理论上都是有风险的视觉体验。

如果你耐着性子读到这里，是不是有一种：“网页设计是一门科学”的感觉？——这是我一直挂在嘴边的一句话。随着所谓的WEB2.0时代的来临，大家越来越多的开始关注用户感受，用户体验这个词也以越来越高的频率被人们挂在嘴边。在下一小节里，我们就来说说，用户体验究竟是个怎样的事物。