【的设计方法】视觉表现建立信息层级.pdf

【设计方法】视觉表现建立信息层级 作为视觉设计师 ，我们的作用除了最基本的满足用 审美需求 ，还会有品牌传达 ，信息传达 ，功能 传达等 ，其中想要信息有效的传达给用 ，需要我们建立信息层级 ，而不是一股脑的丢给用 自己 理解 ，要做到这点有哪些视觉方法 ，这些方法的背后是否有理论依据 ，是本文的主题。 首先看下面两张图 ，左图为相机拍摄的效果 ，右图为人眼不移动时看到的效果 ，可以发现人眼对信 息的获取并不是一次性完成的 ，它不能同时产生多个焦点从而把视线停留在更多的地方 ，设计师需 要考虑的是让用 通过眼球移动 ，按照一定的顺序获取信息 ，帮助获取和理解的过程高效自然。 这个设计方法希望解决的主要是两个问题 ： 1、用户获取和理解信息的效率 建立良好的信息层级 ，能让用 在有限的时间里 ，快速获取和理解有用、感兴趣的信息 ，并产生下 一步行为 ； 2、设计师的专业性 设计师有意识的分析信息优先级 ，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理 设计师有意识的分析信息优先级 ，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理 论依据 ，不仅仅凭感觉做设计。 一、前期了解分析 在开始设计前 ，除了对项目本身的背景目标有所了解外 ，视觉设计师针对具体的页面也需要了解一 些内容以帮助后面的设计有指导方向 ，包括页面定位、氛围营造、信息优先级和用 核心行为。 1.1、页面定位是帮助分析页面信息优先级、核心行为的前提 通常有 ： · 用 是谁 · 用 来自哪里 ，即从什么渠道来到该页面 · 页面内容定位 ，提供什么、不提供什么 · 页面作用 举个例子 ： 我们在设计采购直达市场新首页时 ，交互通过对页面的用 对服务的熟知度进行分析 ，确定首页的 最核心目标用 是新买家 ；页面内容定位是展示市场的价值点 ，用 产生的数据让新买家对采购直 达形成品牌的认知 ； 1.2、了解页面需要营造的氛围 ，能帮助我们判断哪些元素能帮助达到目标 ，氛围可以是内容本身 ， 也可以通过视觉元素设计来营造 ，但必须注意氛围营造不应强过用 关注的内容本身 氛围可能有 ： · 新年主题大促 · 低折扣 · 信息鲜活 · 用 活跃等等 以下是大促活动正式页面 ，左图延续了预热期嘉年华的氛围 ，但到活动开始阶段氛围已经不是重点 ，用 更关心商品及折扣本身 ，右图为调整后将氛围的营造和类目图片相结合 ，很好的解决了氛围 和内容的关系问题。 1.3、分析信息优先级 1 ）一级信息吸引用户 ：假设用 只会在这个页面停留3-5秒 ，最能够吸引用 继续浏览的是页面的 核心卖点 ，是一级信息 ，它必须少而精 ，在设计上要重点展示 2 ）二级信息帮助理解 ：有了一级信息的吸引 ，用 进一步了解内容而可能停留3-5分钟 ，这时展示 二级信息即提炼的精华内容 ，帮助用 在尽量短时间内理解信息 3 ） 级信息详细了解 ：前两类信息基本上能帮助用 获取足够的信息 ，用 如果继续停留更长的时 间去详细了解 ，这类信息量会更多 ，在设计上视觉层级会靠后 ，或通过交互方式展示、提供入口跳 转 1.4 、分析用 核心行为 不同类型用 会在不同阶段产生行为 ，我们要判断这些行为最终导向是什么 ？ 比如商品详情页面 ，有些用 在决定购买之前 ，会查看用 评价、历史交易等内容 ，但这些查看的 行为 ，最终是帮助用 判断是否购买这个商品 ，所以核心行为是最终导向的购买。 有了这些分析 ，交互产出物文档中会给予大模块的信息优先级和用 行为优先级 ，如下图 视觉在进行细节设计前 ，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交 互和业务方确认 ，这些都是帮助视觉设计过程不偏离方向的重要产出物。 二、建立信息层级的视觉方法 视觉表现手法主要有以下几种元素 ，实际设计中为了让效果拉开主次 ，可能会同时使用多种方法以 达到更好的效果 ： · 位置 · 大小 · 距离 · 内容形式 · 色彩 2.1、位置 位置是在设计开始就会考虑的元素 ，人眼观看事物时 ，总会遵循一些特定的规律 ，设计上遵循这些 规律 ，能帮助用 更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关 ： 1 ）当眼睛偏离视中心时 ，在偏离距离相等的情况下 ，人眼对左上的观察最优 ，依次为右上 ，左下 ， 而右下最差。因此 ，左上部和上中部被称为“最佳视域”。例如 ，网站logo 、商品名、主题等重要信息 ，一般放在最佳视域内。当然 ，这种划分也受文化因素的影响 ，比如阿拉伯文字是从右向左书写的 ，这时最佳视域就是