1. 主页 > 设计资讯 > 行业动态

使用视觉流程来吸引对重要事件的注意力

编辑指南:给你一张图,你首先会看到什么?有数据显示,人们会优先考虑以下内容:动态效果、亮色、大小、脸型、突出信息、食物等。作为产品设计师,我们可以利用视觉流来吸引对重要事件的关注。本文作者对此进行了分析,并与您分享。

在某个时间点,这就是我们眼睛真正看到的世界↓

使用视觉流程来吸引对重要事件的注意力(图1)

“这是什么鬼?”

——面对上面的说法和图片,我猜你可能也有这样类似的想法。

但是对视觉系统的研究证明,我们的视觉系统呈现的整个画面只有一小部分是清晰的,而其他部分是非常模糊的。

这与视网膜中的中央凹有关,它带来了中枢视觉。正如我在上一篇文章中提到的,中心视觉是投射在我们视网膜中央凹区上的画面,而投射在中央凹区外的画面会迅速减少,这基本上等于我们透过雾蒙蒙的浴室玻璃往外看。

就像上图。

所以我们可以无障碍地看世界,这是由视觉系统在时间上的连续性构成的:中央凹外的周边视觉信息会不断引导眼球运动,让中央视野快速浏览完成整个视野。

抛开界面,其实我们不需要设计“视觉流”,因为眼球运动是潜意识的,不需要我们有意识的输入或控制。比如大多数人习惯从左到右,从上到下阅读。

而界面的本质是人机接触(人机交流的AUI),传递信息,有期待。所以这里的“视觉流”是指界面设计对用户视觉的引导。

如果回到中心视觉的概念,界面的设计是为了引导用户潜意识的眼球运动,从而达到更好的信息传递。

人们会优先考虑的书籍或文章有很多:动态效果、鲜艳的颜色、大小、面孔、突出的信息、食物、性等等。

事实上,我们可以从两个方面来理解:

1)人们更注重对比

和其他部分相比,哪个部分最特别,我们会下意识的去关注。例如,一行文本中较大的单词:

使用视觉流程来吸引对重要事件的注意力(图2)

和文字本身的大小无关。我们更在意的是对比度,颜色、形状甚至动态效果都是一样的。如果不考虑认知影响,视野中所有具有显著特征的差异都会被自动注意到,这是自动发生的。

我们的注意力会下意识的去关注不同的内容,越是不同越是得到关注。对比是我们下意识会注意到的内容的表达,其来源是下面第二点。

2)进化带来的自然

我们吃什么?我们和谁交往?我们在躲什么?

现代文明只维持了几千年,进化还没有给人类大脑带来很多变化。我们的祖先通过这种潜意识的关注获得食物,繁衍后代,避免危险。

这些特征得以保留,使我们会不自觉地关注食物(或食物图片),因为它提供了我们身体的基本能量;不自觉地注意移动的东西,因为它可能代表危险来临;不自觉的关注脸部(或者脸部图片),因为这意味着你可以找到同类的繁衍或者合作,年轻的时候可以尽快获得依恋(出生不到半小时的宝宝明显会喜欢看五官),甚至可能代表竞争的危险...

潜意识注意的内容一般都有这两个特点,比如颜色鲜艳,可能是和周围强烈对比造成的,也可能是因为代表了我们祖先生活的环境中的毒性。

那么,它们之间有什么区别吗?

为了生存,大脑的进化本质会吸引我们潜意识的注意力到一些更迫切的元素上。所以当有动态效果的东西和色彩鲜艳的东西同时存在时,我们会更倾向于动态效果。

基于一些心理学研究,不考虑个体认知差异,在同等程度上,从前面提到的内容中吸引注意力的优先级为:动态信息>面部>颜色>大小>食物>形状。

我们依靠这些来引导用户不自觉的眼球运动,形成视觉流,区分信息层次,让用户更加关注重要信息,从而达到信息传递的高效率。

在实际项目的设计中,设计师往往会综合运用以上吸引人的内容,无论是尺寸对比还是色彩对比。每一个设计界面都是设计师处理这些元素能力的体现,在界面上显示出合适的视觉流程,体现了设计师自身的艺术基础和产品理解能力。

比如这是ToB项目中的一个网页界面图,我截取了它的内容区。我们可以看到,整个画面的视觉处理非常简单,结构也比较清晰。那么,这张图中最先引起你注意的是哪一个呢?第二个吸引点是什么?

使用视觉流程来吸引对重要事件的注意力(图3)

因为大小和颜色的双重对比,画面显然是最先吸引眼球的地方。一般来说,引起注意的第二个地方是颜色和大小对比相同的右重发按钮。

整个界面传达了什么信息?

这是报警信息的详细界面,是边缘识别后工厂摄像头上报的报警信息。后台人员需要手动确认并确保该报警信息已经传输给现场负责人。说了这么多,我们大概就可以知道,这样一个界面要传递的第一个信息就是这个图片,这样后台人员就可以根据这个信息来确认机器的判断是否真的有效(右边的判断结果已经可以在本项目上一级的列表界面中读取)。第二个要传递的应该是这个信息如果有效的话是否已经实际传递给现场负责人。

因此,第二个值得注意的元素不应该是蓝色按钮,而是按钮上方的消息。

那么,如果要优化这个界面,我们可以在第二个需要关注的元素上添加图形和颜色来吸引用户的注意力。

使用视觉流程来吸引对重要事件的注意力(图4)

AR设计也是如此。AUI作为真实环境的信息传递者,对于整个界面信息的视觉流程设计更为重要。

下图是测距应用程序的屏幕截图:

使用视觉流程来吸引对重要事件的注意力(图5)

首先引起你注意的是什么?

如果排除位置和用户对目标的主动关注的影响,这个AR应用界面主要是通过单一的尺寸对比来制作,静态界面下的引导视觉流比较弱,基本上依赖于用户自己的搜索。在使用过程中,中心圆圈叠加呼吸效果,以引起注意。

AUI设计的一个难点是多变的环境,所以上图中使用白色是更安全的策略,但是如果要优化这个界面,我们也可以考虑在白色的基础上给最重要的信息添加其他亮色。

如果你想通过视觉流来引导你的注意力,你需要用不同的方式来表达界面中的元素。当然,这个很好说。

为了实现适当的视觉流,设计师不仅需要平衡界面中多个信息内容之间的关系,还需要平衡冲突与体验的一致性。如果误用的话,可能不合适,用的不好的话,甚至可能显得粗鲁。就像艾兰·库伯在《关于脸》中提到的,在网页设计的早期,那些五颜六色的标签闪过。

使用视觉流程来吸引对重要事件的注意力(图6)

智能化与增强现实设计系列

AUI,增强用户界面或增强用户交互,是指具有视觉或真实深度信息的虚拟和真实界面。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/574.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息