如何运用视觉表现建立网页的信息层级？

　　yangmei：作为视觉设计师，我们的作用除了最基本的满足用户审美需求，还会有品牌传达，信息传达，功能传达等，其中想要信息有效的传达给用户，需要我们建立信息层级，而不是一股脑的丢给用户自己理解，要做到这点有哪些视觉方法，这些方法的背后是否有理论依据，是本文的主题。“互联网的一些事”特推荐此文，大家跟随笔者的步伐，了解如何运用视觉表建立信息层级吧！

首先看下面两张图，左图为相机拍摄的效果，右图为人眼不移动时看到的效果，可以发现人眼对信息的获取并不是一次性完成的，它不能同时产生多个焦点从而把视线停留在更多的地方，设计师需要考虑的是让用户通过眼球移动，按照一定的顺序获取信息，帮助获取和理解的过程高效自然。

　　这个设计方法希望解决的主要是两个问题：

1、用户获取和理解信息的效率

建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为;

2、设计师的专业性

设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计。

一、前期了解&分析

在开始设计前，除了对项目本身的背景目标有所了解外，视觉设计师针对具体的页面也需要了解一些内容以帮助后面的设计有指导方向，包括页面定位、氛围营造、信息优先级和用户核心行为。

1.1、页面定位是帮助分析页面信息优先级、核心行为的前提

通常有：

用户是谁

用户来自哪里，即从什么渠道来到该页面

页面内容定位，提供什么、不提供什么

页面作用

举个例子：

我们在设计采购直达市场新首页时，交互通过对页面的用户对服务的熟知度进行分析，确定首页的最核心目标用户是新买家;页面内容定位是展示市场的价值点，用户产生的数据让新买家对采购直达形成品牌的认知;

1.2、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造，但必须注意氛围营造不应强过用户关注的内容本身

氛围可能有：

新年主题大促

低折扣

信息鲜活

用户活跃等等

以下是大促活动正式页面，左图延续了预热期嘉年华的氛围，但到活动开始阶段氛围已经不是重点，用户更关心商品及折扣本身，右图为调整后将氛围的营造和类目图片相结合，很好的解决了氛围和内容的关系问题。

1.3、分析信息优先级

1)一级信息吸引用户：假设用户只会在这个页面停留3-5秒，最能够吸引用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示

2)二级信息帮助理解：有了一级信息的吸引，用户进一步了解内容而可能停留3-5分钟，这时展示二级信息即提炼的精华内容，帮助用户在尽量短时间内理解信息

3)三级信息详细了解：前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息量会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转

1.4、分析用户核心行为

不同类型用户会在不同阶段产生行为，我们要判断这些行为最终导向是什么?

比如商品详情页面，有些用户在决定购买之前，会查看用户评价、历史交易等内容，但这些查看的行为，最终是帮助用户判断是否购买这个商品，所以核心行为是最终导向的购买。

　　有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，如下图：

　　视觉在进行细节设计前，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交互和业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。

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

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

位置

大小

距离

内容形式

色彩

2.1、位置

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

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

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

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

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

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

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

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

2.2、大小

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

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

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

1)重要的元素要大一些，即使比例失调也可以考虑

2)要想办法表现出差距;如果一个元素的重要性是2，那就把它的大小做成4

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

　　我们对两个新闻图片的面积进行对比可以看到差距有4倍左右;

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

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

总结一下：

1.项目前期我们需要了解页面营造的氛围，内容定位;和交互一起分析信息的优先级，用户的核心行为;前期的准备能帮助视觉设计过程不偏离方向

2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级

3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。

我们有意识的分析用户关注的信息优先级，并通过视觉表现出来，是视觉设计师这个岗位很重要的职责，希望梳理的这些方法能帮助我们将这份职责做的更好，我也乐在其中，与大家共勉!

文章标题：如何运用视觉表现建立网页的信息层级？
文章地址：/news18/169568.html

成都网站建设公司_创新互联，为您提供动态网站、品牌网站设计、小程序开发、自适应网站、建站公司、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联