打造UI设计中的视觉层次

为什么要打造视觉层次？

文字对于成年人来说是日常的大部分活动，对于受过教育的成年人来说，把文字转换成有意义内容的阅读过程是自动的，所以 很多读者认为阅读与说话一样是“自然”的人类生活。

其实阅读并不是自然的人类活动。根据Sousa 2005年的实验结果，它是一种人造的、通过系统的直到和训练获得的能力，就像小提琴、玩杂耍或者读乐谱一样。而我们学习阅读就是在训练我们的大脑（包括视觉系统）去识别模式。但是，在我们的视觉系统中只有一部分被训练出了识别阅读过程中文字模式的能力：中央凹和一个非常小的区域（近中央凹）能迅速地聚焦于文字，下游的神经网络会经过视觉神经，到视觉皮层，再进入我们的大脑中的某一部分。这就意味着，阅读需要大量的眼球移动。人类的眼球是来回跳动的，这种跳动大约持续0.1秒。这些原因导致阅读过程中视线会在重要的词汇间跳动，如下图所示。

基于人类阅读能力是有限的以及人类生理因素，我们在设计中要尽可能的支持阅读，而不是干扰阅读。注重在设计中打造视觉层次，帮助用户快速浏览和阅读。

什么是视觉层次？

评价一个可视化信息显示的重要指标就是视觉层次。

视觉层次，即视觉的布置安排能够：
a.将信息分段，把大块争端的信息分割为小段
b.显著标注每一个信息段和字段，以便清晰地确认各自的内容
c.以一个层级结构来展示各地段及其子段，使得上层的段能够比下层得到更重点的展示

在UI设计中的重要性？

Luke Wroblewski，专栏作家兼雅虎产品设计高级主管，在他的的文章通过视觉层次沟通中阐释了网站界面的视觉表现在以下方面的重要性：

通知用户——像一只无形的手，界面应该引导用户一步步采取行动，却不会让用户感到压迫。比如当你向下滚动，支付服务商Square引导你了解它的价值所在，每一步都有相关的引导号召你采取行动。

传达内容之间的关联——界面展现内容的方式，应该符合用户对信息的优先级理解。例如，人气设计网站Abduzeedo在顶部包含了清晰的分类，推荐内容在中间，底部则是详细的分类。

影响情绪——人们去餐馆可不只是为了食物果腹。他们要的是口味、质感、外观，还有令人难忘的环境。界面设计也一样，而且假如你建立了积极的情绪响应，人们可能更容易谅解网站的缺点。比如Wufoo就是个完美案例，界面非常实用且令人愉悦。

如何组织视觉层次？

你的UI设计，最终目标是要解答以下三个问题：

这是什么？（有用）
如何使用？（易用）
关我什么事？（渴望）

选择正确阅读模式

之前的两篇文章给大家介绍了F型和Z型两种模式。再次总结下：

01. F模式

通常体现在文字密集的网站中，比如博客，读者首先沿着左侧的文字垂直向下浏览，从每段的前几句寻找他感兴趣的关键词或要点，F模式由此得来。

当读者找到了喜欢的东西，他们就开始正常阅读，构成了水平线。结果就导致了看似字母F或E的路径。CNN和NYTtimes两者都使用了F模式。

Nielson Norman Group的Jakob Nielson进行了一次易读性研究，基于232名用户浏览上千个网站，还有F模式涉及实践的详尽说明

a.用户很少逐字逐句阅读。
b.前两段最重要，应该包含你的营销妙语。
c.起始段、副标题、重点列表中要带有诱人的关键词。

它会如何影响网站的界面设计？请看下图。

来源：理解F型布局；www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de…

图中可以看到，数秒钟内就能看到最重要的内容，下方立马接上更详细的内容（还有行动号召），方便快速浏览。

对于想要嵌入广告和行动号召，又不希望内容被淹没的网站，F模式非常有帮助。切记，永远是内容为王，侧边栏的存在是加深用户的参与。和其他所有模式一样，F模式是一套指导方针——而非模版——因为读过F中的头几行之后，F模式可能会让人感觉枯燥。

02. Z模式

Z模式浏览发生在不以文字为核心的网站中。读者首先浏览页面顶部的一条横线，不论是因为菜单栏，还是出于在顶部从左至右浏览一遍的习惯。当视线到达尽头，它会飞速向左下移动（这也是出于阅读习惯），在页面下方部分重复水平方向上的搜寻。

来源：理解Z型布局；http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web…

Z模式几乎可以运用于任何网站界面，因为它满足了网站的核心需要，比如层级、品牌、行动号召。Z模式对于简洁至上、核心是行动号召的界面效果最佳。

在一个内容复杂的网站中强行使用Z模式，或许不如F模式来得奏效，但Z模式有助于带来一些秩序，导致布局的简化（还有转化率的上升）。牢记以下几则要点：

背景——分离背景，让用户的视线停留在网站结构内。
1号点——这是你logo的最佳位置。
2号点——增加一个彩色的次要行动号召，有助于顺着Z模式引导用户。
页面中央——页面中央的焦点轮播图能把顶部与底部区域分离开，引导视线顺着Z模式流动。
3号点——增加图标，从此处开始，顺着横轴移动，能将用户引导至4号点的最终行动号召。
4号点——这里就是终点了，是你主要行动号召的最理想位置。

预测用户的视线如何移动能带来巨大的优势。在页面上排布元素之前，通过优先级找出最重要和最无关紧要的元素。一旦你知道要给用户看什么，将它们置于各种模式的“热点区”，创造正确的交互，简直易如反掌。

你甚至还能在整个页面中贯穿和延伸Z模式，如果你觉得在行动号召之前还有更多有价值的主张，可以重复运用1-4号点。

原文链接

需要注意避免的几件事：

a.避免难以辨认的字型和字号
b.不要添加嘈杂的背景
c.尽量少使用居中对齐的文字
d.尽量减少阅读需要

本文部分内容来源于《认知与设计》感悟，Jeff Johnson 将设计决策与理论已非常实用的方式结合，是一本值得反复阅读的书籍，强烈建议UI/UE设计师精读。