原作者： yangmei/阿里巴巴国际站UED

作为视觉设计师，我们的作用除了最基本的满足用户审美需求，还会有品牌传达，信息传达，功能传达等，其中想要信息有效的传达给用户，需要我们建立信息层级，而不是一股脑的丢给用户自己理解，要做到这点有哪些视觉方法，这些方法的背后是否有理论依据，是本文的主题。

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



这个设计方法希望解决的主要是两个问题：
1、用户获取和理解信息的效率
建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为；
2、设计师的专业性
设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计。

一、前期了解&分析

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

1.1、页面定位是帮助分析页面信息优先级、核心行为的前提
通常有：
· 用户是谁
· 用户来自哪里，即从什么渠道来到该页面
· 页面内容定位，提供什么、不提供什么
· 页面作用

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



1.2、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造，但必须注意氛围营造不应强过用户关注的内容本身
氛围可能有：
· 新年主题大促
· 低折扣
· 信息鲜活
· 用户活跃等等

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



1.3、分析信息优先级

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

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

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






1.4、分析用户核心行为

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

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



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



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









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

视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：
· 位置
· 大小
· 距离
· 内容形式
· 色彩

2.1、位置

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

1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。例如，网站logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。下图是摘自摘自张帆 罗琦 宫晓东的《网页界面设计艺术教程》对一个屏幕划分后，用户对不同位置不同的关注度差别：



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



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