对比，吸引用户注意力并能帮助用户理解页面导航元素之间的关系

今天为大家更新《用户体验要素》的第七章——表现层，感知设计

本小结关键词：对比和一致性

主要观点：对比，吸引用户注意力并能帮助用户理解页面导航元素之间的关系

---

忠于眼睛

评估一个产品视觉设计的简单方法之一，是提出这样的问题：你的视线首先落在什么地方？哪个设计要素在第一时间吸引了用户的注意力？它们是对于战略目标来讲很重要的东西吗？或者用户第一时间注意到的东西与他们的（或你的）目标是背道而驰的吗？

研究人员有时使用精密的眼球追踪（eye tracking）仪器来确定被测人倒底正在看什么，以及他们的视线是如何在这个屏幕上移动的。无论如何，如果只是想略微调整一下某个页面的视觉设计，那么一般你只需要简单地询问一下人们就可以了——甚至你自己也可以。有时这种方法不能提供最准确的结果，并且它也永远无法捕捉眼球追踪仪器能提供的细微差别。但是大多数时候，简单地询问是非常适合的。另一种找出主要设计元素的方法是眯着眼睛或斜着去看这个页面，直到你不能认出任何细节——或者走到房间的另一头从那个地方来看这个页面。

然后试着确定视线所停留的地方。如果你本人是被测者，那么一定要注意你的眼睛在页面周围的、无意识的移动。对于你正在看的东西， 不要想得太多，只要让你的视线自然地落在页面上。如果另外还有一些被测者，让他们按被吸引的顺序来指出页面中的那些元素。

一般情况下，你会发现，人们视线的移动方式遵循着相当一致的模式，毕竟，这些大多数是无意识的、本能的移动。如果测试的报告显示，某些人的视线移动和别人的模式不一样，那么他们有可能是没有真正察觉到自己眼睛的自然移动，或者他们只是把他们认为你想听到的事情告诉你了（或者两者都有）。

如果你的设计是成功的，用户眼睛的移动轨迹的模式应该有以下两个重要的特点：

▼首先，它们遵循的是一条流畅的路径。如果人们评论一个设计是“忙碌”或“拥挤”时，这表示这个设计确实没能顺利地引导他们在页面上移动。他们的眼睛在各种各样的元素之间跳来跳去，所有的元素都在试图引起他们注意。

▼其次，在不需要用太多细节来吓倒用户的前提下，它为用户提供有效选择的、某种可能的“引导”。就像我们一直在说的那样，这些引导应该支持用户试图在此刻通过与产品交互去完成的某个目标和任务。也许更重要的是，这些引导不应该分散用户对那些“能完成目标的信息或 功能”的注意力。

用户在页面上的视线移动并不是随机的。它是一种所有人类共有的、对于视觉刺激而产生的、一系列复杂的原始本能反应。对于我们设计师而言，非常幸运的是，这些反应并不是完全无法控制的。数百年以 来，我们已经发展出了各种各样的有效的视觉手段，来吸引或分散注意力。

对比和一致性

在视觉设计中，我们用于吸引用户注意的一个主要工具就是对比 （contrast）。一个没有对比的设计，会被看成一个灰色的、平凡的东西，导致用户的视线四处游离，而无法解决任何特别的事情。把用户的注意力吸引到界面中的关键部分，对比是一个重要手段，能帮助用户理解页面导航元素之间的关系。同时，对比还是传达信息设计中的概念群组的主要手段。

当一个元素在设计中的显得与众不同时，用户就会注意到。这是他们不能控制的。你可以利用这个本能的行为，来使用户注意到那些“真正需要从这个页面的其他元素中突出的东西”。在网页界面上的错误提示通常会被融进页面的其他元素中；通过给文本一些不同的颜色（比如 说，红色）或用一个醒目的图形将它们凸显出来，就能让整个界面完全不同了。

一个视觉上的中性布局（左上），没有任何一个元素突出。对比可以用来引导用户在页面上的视线（右上）或将他们的注意力吸引到几个关键要素上（左下）。过度的对比导致了混乱的视觉（右下）。

不管怎样，这些工作的总体策略是，让“差异”必须足够清晰，用户要足够分辨出某个设计选择是特意要传达一些信息的。当两个设计元素的处理相似又不太一样的时候，用户会就会困惑。“为什么这些会不一 样？它们本来是一样的吗？也许只是弄错了。还是我应该在这里注意到什么东西吗？”而事实是，我们希望这两者都能抓住用户的目光，并且让他们认为这是有意而为之的。

在你的设计中保持一致性（uniformity）是另一个重要的组成部 分，它能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。

将视觉元素的大小保持一致的尺寸，这可以使你在需要的时候把它们更容易地重新组合成一个新的设计。举个例子来说，如果你在导航中使用的所有图形按钮都是同一个高度，那么它们就可以在需要的时候被混合并匹配，而不会形成一个布局杂乱或要求重新设计的图形。

基于栅格线（grid-based layout）的布局是来自平面设计的一种技术，是一种对网页也同样有效的技术。这个方法通过使用“母版”来确保设计的一致性，各种布局都是根据这个模板来创建的。不是每一个布局都要使用栅格的每一个部分（事实上，大多数的布局可能只会用到很少的一部分）但是每一个元素在网格上的位置应该统一和一致。

不管怎样，由于设备、屏幕尺寸和屏幕分辨率千差万别，把栅格应用到屏幕交互式产品上不会像平面设计一样简单。你很容易就掉到“坚持使用栅格系统”的漩涡之中（或者任何一种可以保证一致的标准）甚至在它们根本就行不通的时候。在没有设计标准的情况下进行工作是不 的，但是教条地遵守设计标准，而不顾你适当的需求就可能会更糟。

也许产品采取了一个在栅格被开发出来的时候没有人能想像出来的新功能；也许这个栅格从一开始就不怎么行得通。不管原因是什么，重要的是，你要能认识到什么时候应该重新考虑设计系统的基础是什么。

接下来将从内外部一致性和配色方案和排版两方面继续更新。