设计的成功与否完全取决于用户如何与之交互。人们在使用产品的时候越容易理解和处理他们的工作,就越愿意使用该产品。因此,对于设计师而言必须有足够的知识来了解人类如何与界面产生互动,尤其是眼睛如何获取视觉信息的模式,以便可以设计有效的视觉层次结构,即用户对页面数据理解的顺序。

我们依据人类的视觉处理能力设计的内容越多,就越可以创造更好的用户体验。这一切都在于使用人类的能力来帮助其自身更好地理解界面。

例如,有四个主要因素可以帮助设计仪表板的人员设计更好的用户体验:

首先是表单,具有方向、形状、大小、线宽、线高以及封闭体等属性。作为设计人员,可以使用所有这些属性来区分不同类型的信息。

其次是颜色。此功能可以帮助我们根据用户需求设计具有颜色的界面,例如在需要注意的地方使用色调较重的颜色,而使用较少的互补色组合以降低认知成本或区分信息类型等。

空间位置是人们感知界面中位置重要性的另一种方式。例如,左上角是最重要的信息。此外,相同的位置可以帮助用户回想起以前接触该界面的情形,这有助于他们更好地理解该界面。

运动是最后一个因素,在需要时可用于吸引用户的注意力。这是因为眼睛和周边视力的形成对检测运动非常有帮助。

格式塔原理

格式塔原理(Gestalt Principles )是一组用来解释人类思维方式的规则,这些规则主要包括:

  • 人类更喜欢完整的形状,并且会首先注意到这样的形状,因此,当元素之间提供空白区域时,我们倾向于自动填充空隙。
  • 人类遵循路线和相同的流程。
  • 人类在注意到凹形之前会先注意到凸形。
  • 人类渴望稳定并避免不确定性,因此我们寻找稳定的物体。除非我们不清楚所看到的图像是什么,否则我们的注意力总是会被前景图所吸引。
  • 人类将分散的元素联系在一起形成一个有意义的图像。
  • 人类对彼此接近的元素进行分组。
  • 人类会在彼此连接的对象形成图案时对其进行分类。
  • 人类喜欢寻求平衡,并尽力使设计看上去井井有条。

基于层次结构的UI设计模式

在查看Web或桌面应用程序时,人眼往往会遵循一些特定的模式来扫描内容。这些眼动追踪模式可以帮助我们设计一个界面或有效的UI设计模式。最常见的模式如下:

F模式

来自三个网站的用户眼动追踪研究结果热图。用户看得最多的区域被标记为红色;黄色区域表示观看次数较少的,观看次数最少的是蓝色区域。灰色区域则代表没有吸引任何注意。图片来源:NN/g

在文本内容较多的应用程序中,F模式通常用于理解用户的眼睛运动轨迹。如上图所示,可以看出,在查看了最上面的水平线或标题之后,读者首先会垂直扫描屏幕,寻找引起他们兴趣的重要单词。找到这些单词后,他们便开始以常规读取方式水平读取线条。依此重复进行便会形成类似于字母F的图案。

通过这种模式可以了解到读者几乎不会阅读全文。因此,文本内容的最重要部分应在整个内容的前两三段中,重要关键字应该用标题字体、粗体字和项目符号来突出显示。

Z模式

图片来源:instapage.com

Z模式用于包含相同数量的混合内容类型(如图像和文本)的应用程序。在这种情况下,读者首先查看第一条水平线(通常是主标题和/或菜单栏),然后将眼睛移到左下角以扫描放置在中心的任何图像或其他介质,然后重复该过程。这种眼动追踪就形成了Z形图案。

对于这种模式,应注意保持背景和前景清晰可辨。此外,可以看出最上面的水平行是放置应用程序重要标识符最合适的位置;左侧最适合徽标和标题,右侧适合放置进行重要操作的菜单栏。中间位置应由描述服务的图像或视觉媒体组成,并能够分隔顶部和底部的文本区域。

眼睛和颜色

拮抗理论(Opponent Process Theory)认为,色彩感知是由眼睛视网膜中的各种受体系统(receptor systems)控制的。这些系统位于视锥细胞(cones cell)内部,每个系统都有两种相反的颜色,例如黑色和白色、红色和绿色或黄色和蓝色。每个系统都会刺激两种类型的化学物质,但是两种相反的颜色不能同时生成相同的化学物质。例如,具有红色和绿色的系统无法同时传输两种化学物质。

这些解释有助于我们理解在前述示例仪表板中使用颜色的重要性。我们不能使用随机的颜色组合来尝试让仪表板美观。色调重的颜色应该只在重要的信息部分中使用。互补色也不应过多使用,因为它们会增加用户的认知成本。

需要谨记的要点

为了设计有效的视觉层次结构,设计师应牢记以下几点:

  • 元素的大小应足够大,以便用户能够轻松查看它们。较大的元素比较小的元素更吸引注意力,因为人们往往会忽略他们无法清楚看到的对象。
  • 应该使用明亮但平静的颜色,因为这样会迫使用户朝向他们。此外,请使用对比色做配色方案,特别是在背景元素和前景元素之间,以帮助用户轻松区分它们。
  • 额外装饰的字体会使用户难以理解单词。应首选简单的字体,例如Arial,Roboto,New Times Roman等。此外,字体大小至少应为16px,以便在各种设备上都可以轻松看到。
  • 相似的内容应具有相同的对齐方式,以便用户可以将它们关联在一起。而脱离对齐模式的元素往往会更容易引起用户的注意。
  • 在设计领域,边距是最重要的元素之一。尽管紧挨着放置的元素会让人觉得它们彼此是关联的,但所有元素之间在保持清晰易懂的基础上还是需要保有一定的距离。
  • 尽管可以添加样式变化,但每种元素都应使用标准形状。如果用户无法识别元素的用途,那么即使把元素设计得优美而复杂也别无用处。
  • 需要强调的是,不要将空白边视为多余的空间,而应将其视为重要的设计元素。正确放置的空白区域可以让用户不费吹灰之力即可感知每个元素。
  • 重要的元素和内容应放置在人眼第一眼就可以看到的地方或相比其他元素经常会看到的地方。并且这些元素还应使用较大的字体、粗体样式以及对比鲜明的颜色和对齐方式来强调突出显示。
  • 统一的样式主题(如形状、图标包、颜色和字体)可以让用户识别到相关内容。