视觉元素在产品ux交互设计中所起的作用

视觉信息时代

在视觉信息时代，我们几乎将看到的所有信息都有意识或无意识地汲取到脑海中，这些信息在我们的决策和行为中起着巨大的作用。

在这个时代，每天有超过5亿人在Facebook上观看视频（其中有85％被静音）Snapchat每秒共享9,000张照片，每天有超过5亿人使用Instagram，在上面评论和发布图片故事。

第一个原因来自我们的DNA。埃里克·詹森（Eric Jensen）在他的《基于大脑的学习》一书中指出，40％的脑神经都与视网膜相连。致力于视觉的神经元比其他所有感官的总和还多，大概90％出现在我们脑海中的事物都是由视觉刺激触发的。此外，最近的研究表明，大约65％的人是视觉学习者，他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。要知道，我们的大脑可以在短短13毫秒内捕获眼睛看到的图像，这速度比眨眼快10倍。

我们使用图像来表达自己已有数千年的历史。通过绘画，人类可以传达周围世界的关键信息，例如绘制地图和警告掠食者。就像我们在有形世界中所做的一样，我们还使用视觉元素来代表主观性：我们周围的墙壁上不断描绘着神明，民族，精神和当地文化。

作为设计师，我们知道：在用户界面上使用视觉元素（例如图标，形状，颜色，字体，图像和插图）会对我们设计的产品带来相关影响。

但是这些视觉元素有效吗？他们如何使我们受益？他们有什么影响？最后，是什么使我们相信它们在用户与我们设计的产品的交互中起着重要的作用？

在本文中，我们将探讨视觉元素如何帮助我们：

1. 加快数据感知(speed up data perception)

2. 保留更长时间的数据(retain data for much longer)

3. 触发愉悦(trigger pleasure)

4. 引导注意力(guide attention)

5. 塑造通用型界面(make user interface universal)

1.加快数据感知

视觉感知是向大脑发送信息的最有效，最快的方法之一。根据S.Thorpe，D.Fize和C.Marlot的一项研究，即“人类视觉系统中的处理速度”，大脑处理图像只需要150毫秒，而理解图像的意义又需要100毫秒。

研究表明，我们的大脑识别图像，插图和图标的速度比识别单词或中等长度的内容快6万倍。显然，使用插图，图像和图标并不能替代文字和标签。然而将它们组合在一起，您可以更快，更有效地进行界面的处理，尤其是当我们需要在几秒钟内完成许多基本交互时。

但是，并非所有用户的识别率都相同。一项对60名参与者进行的了解数字界面交互中图标识别速度的研究表明，尽管性别不是一个相关因素-男性候选人的识别率仅比女性候选人高4％。与此同时，认知随年龄变化很大。

60岁以上的参与者对图标含义的识别率达到60％，而20-30岁之间的参与者对图标含义的识别率接近90％，这是一个很大的差异。

此外，与符号图标相比，显示真实物体的图标更易于识别。这就是为什么在为界面设计视觉组件之前考虑用户背景如此重要的原因。

例如，简单警报图标的识别率变化60 pp。在下图中-使用时钟表示警报-识别率是100％，而使用日历图标的识别率仅为40％。

2.保留更长时间的数据

即使图像只暴露一次，人类也具有令人印象深刻的长期记忆能力。这使得在我们的产品流程中常常使用视觉刺激加深用户体验。

罗杰·谢泼德（Roger Shepard）进行的一项名为“学习10000张图片”的研究表明，在两次替代测试中被要求记住612张图片的观众在大约6秒钟内达到了98％的命中率。而测试者将类似的记忆单词和简短句子进行测试，该比率则下降到88％。

实验还表明，图片记忆始终优于语言记忆。首先，因为图像的存储容量几乎是无限的，其次是因为图像比文本具有更好的存储率。

通过比较视觉环境和听觉环境，我们仍能看出差异。埃德加·戴尔（Edgar Dale）的一项研究表明，当人们听到信息时，三天后他们记住该信息的可能性为10％。但是，当相同的信息与视觉元素（图像，图标或颜色）配对时，即使在相同的3天之后，仍保留了所传输内容的近65％。

因此，通过使用视觉效果，我们可以更快地识别信息（如前所示，为250毫秒），并且在大脑中的保留时间更长（在3天内可持续高达65％）。

当然，其他变量也会影响信息吸收。年龄，主观性和对比曲线会影响识别和记忆，但是视觉组件的使用仍然是改善用户学习曲线的有力工具。

3.触发愉悦

当我们的大脑通过少量的认知努力就可以快速理解内容时，我们的身体就会做出积极的反应，从而激发愉悦感。研究人员Piotr Winkielman和John T. Cacioppo进行的一项名为“轻松地让脸上露出微笑”的研究表明了这一点。

实验让参与者观看了一系列图像，同时监控了他们的表情。这些图像中的一些更易于识别，而有些则难以识别。

由于表情的变化太细微且太短，以至于观察者无法察觉，因此将设备放置在脸颊，眉毛和眼睛周围，以监视图像上情绪波动的迹象。

两项研究的结果均表明，易于处理的刺激与肌肉区域更大的活动有关，这是控制我们微笑的原因。

如预期的那样，当人们更容易看到和识别图像时，人们会露出轻微的微笑和额头放松，并产生认知舒适感和良好的感觉。

4.引导注意力

视觉元素可以改善整个界面的导航。字体，空格，CTA，字体和图像都可以作为分区之间的可视分隔符，使用户可以清楚地看到它们前面发生的事情。

尼尔森·诺曼集团（Nielsen Norman Group）进行的一项研究发现，即使文本内容占用了316％的屏幕空间，用户观看演讲者照片所花的时间也比阅读他们的传记要多10％。

另一个示例是Uber如何通过更改视觉元素来优化着陆页。

用户对右侧新标题的显示时间为1秒钟，而左边旧版本中，用户花了1.5秒才能看到标题。

为什么会有这些变化？尽管进行了一些细微的调整（例如，将页面标题居中和改进内容），但对转换影响最大的还是更改了封面图像。

 与页面内容相比，左边界面中男孩“看着”用户吸引了用户过多的注意力，而右图看着文本的男人则将所有用户注意力重定向到了标语。

图像上字符位置的细微差别使用户的注意力大大不同。

5.塑造通用型界面

最后，界面中的图标，颜色，插图和其他类型的视觉组件可以使应用程序或网站更易于访问，尤其是当来自不同国家的人们使用该应用程序或网站时。

使用图标可以提高用户对内容的整体理解度。此外，图像为受文字识别障碍（例如阅读障碍），阅读困难或无法阅读的人拓展了感知的界限