运用视觉表现建立网页的信息层级（二）-重庆润雪科技有限公司

二、建立信息层级的视觉方法

视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：

l 位置

l 大小

l 距离

l 内容形式

l 色彩

2.1、位置

位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：

1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。例如，网站logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。——重庆网站设计

下图是摘自摘自张帆罗琦宫晓东的《网页界面设计艺术教程》对一个屏幕划分后，用户对不同位置不同的关注度差别：

2）第二条规律是眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳，一般先看到水平方向的物体，后看到垂直方向的物体。如下图所示，左右的关注度差别要小于上下关注度差别，如想要体现并列的关系，左右排列会更合适；而如果要拉开差距，仅通过位置来实现，上下排列更容易达到目标。——重庆网页设计

举个例子：如下图时代周刊网站首页，左侧大图是当天的焦点新闻，在信息层级上为一级信息，视觉表现上不仅面积大、内容形式用大图，位置也放在优势区域，可能98%的用户会先关注到这个区域；

假如对设计稿的位置做调整如下，如果焦点新闻图片是第一优先级的信息，虽然它是大图的形式，占的面积也够大，但由于位置不在最佳视域，会被“Latest Headlines”分散一部分视线，可能只有60%的用户先看到右侧了；如果信息有主次，就要让视觉表现上拉开差距，而不是一个接近均等的局面。——网站设计

3）用户优先关注上部，在网页设计中有首屏的概念，首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高。

由于用户使用的屏幕分辨率不同造成首屏的高度会有差别，根据我们网站的数据，目前分辨率高度为768占多数，所以设计时会以768高度为基准，去掉浏览器本身的菜单等占用的高度，实际展示给用户的第一屏平均为600px，这个数据会根据以后目标用户的分辨率变化做相应的调整，我们在设计时可用这个数值作为首屏的参考线。——网页设计

2.2、大小

在确定了模块的位置后，我们会考虑给这模块多大的地盘，大小会很直观反映信息的重要等级。——定制网站

有个体育海报设计的案例，涉及到四种球类运动包括足球、高尔夫球、棒球、篮球，如果按照实际大小设计会让篮球和足球显得更重要，为了体现体育的平等性，设计上将球的大小做了调整。

Giles Colborne的《简约至上》书中的结论可以指导我们通过大小拉开差距：

1）重要的元素要大一些，即使比例失调也可以考虑
2）要想办法表现出差距；如果一个元素的重要性是2，那就把它的大小做成4——重庆定制网站

还是以时代周刊首页为例，目前的设计左侧的焦点新闻图占的面积和中间新闻图对比拉开了差距，使得用户容易先关注到一级信息而且不容易被周边干扰；

我们对两个新闻图片的面积进行对比可以看到差距有4倍左右；——重庆小程序

假如对界面调整如下：焦点新闻图缩小两倍后，可以看出视觉层级的区分就不明显了。——小程序

除了元素本身所占的面积会影响视觉层级，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用；

下图是一个模特公司的网站，首页上随机出现模特的照片包括面部和半身照片，放大脸部特征后的照片保证了用户能理解这是一个模特的形象，使得用户会优先关注细节放大的照片。

2.3、距离

前面讲到的将元素的细节放大，眼睛会感受离它更近而被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了大小，还有其他视觉手法如下：

1）拉远三维距离

想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：

模糊元素：

图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰

降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离——重庆网站设计

增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。

2）拉近三维距离

增加投影是最常用到的让元素看起来和其他内容不在同一平面的视觉手法，通常像弹出框、鼠标移上后出现的浮层等由于要压在其他信息之上，增加投影能帮助用户聚焦在带投影的模块而不受下面信息的干扰——重庆网页设计

3）除了三维，二维距离对视觉层级也有影响，根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体；人眼对距离临近的信息更容易先去关注，在视觉手法应用上，元素距离上一个焦点近的，视觉层级高。如下图，第一层级的新闻焦点图和右侧的小图片比较临近，视线容易往右上角运动；——重庆网站设计

对距离做了调整后，虽然中间的小图片本身比文字更吸引人，但由于焦点图下方的标题距离更近而形成整体，视线容易先往下运动。

2.4、内容形式

确定了模块的位置、大小和距离关系后，我们会继续考虑内容的形式包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字；相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。但仅仅这点还不够，通过图片抓取用户眼球后引导视线到下一个关注点，是设计上更多会考虑的点，概括有以下表现手法：——网页设计

1）方向性引导

图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。

下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。

下图WHAT WE DO位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏览起来会不太顺畅

经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。——定制网站

2）符号引导

除了图片，一些符号本身带有顺序和方向性，也能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序、箭头等。

下图的排行榜前三名，虽然用户更习惯从左到右阅读，但由于数字的引导，视线也会被影响而按照1>2>3的顺序阅读，如果希望这样的顺序更加明显，可以再通过放大1的图片大小，拉开差距，结合多种视觉方法达到效果。——重庆网站

时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去浏览信息，甚至会打破常规的如从左到右的浏览习惯，如下图虽然2的位置更容易引导用户优先浏览，但时间轴对信息的影响更明显，一般用户会优先查看模块1，再根据时间先后从右向左关注模块2。

2.5、色彩

色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：

1）先暖色后冷色

色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;——重庆网站设计

从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。

美国数字营销公司Hubspot曾经做过一场A/B Test，用于测试不同颜色对于用户点击转化造成的差异。在图中，左右两个测试页面在内容上完全一致，唯一不同的是按钮的颜色，在超过2000人次的样本测试中，最终红色方案的点击率超过绿色方案的点击率足足21%。而在测试之前，大部分的研究员都猜测绿色方案会获得更高的点击，因为就直觉而言，绿色代表着通行、准许通过的意思，而红色则更倾向于警告、阻止意味。——重庆网页设计
这个测试从一定程度上反映了暖色对用户关注度和行动力的影响，当然并不是说为了提高点击率就要用暖色，具体的色彩风格还是要根据产品定位来设计。