如何能让人眼前一“亮“:提升视觉效率

简介:

8090后的记忆里都有一个游戏,叫做Where’s Waldo? 如果你没有玩过也不要紧,Where’s Waldo?是一个图画游戏,穿着红白条的Waldo隐藏在画面的某个角落,读者要用最快的速度找到他。正是因为Waldo的身影总是难以寻觅,大小朋友们才乐此不疲地寻找着他。但是,你有没有想过,为什么Waldo这么难找呢?

0?wx_fmt=png



让我们先做一个实验。首先把你的手臂伸出,竖起大拇指,看着你的指甲盖,你所看到的部位大约占到整个视野的5%:这就是任意时刻你的目光焦点所能关注到的大小。虽然它只占整个视野的5%,但它却消耗了我们视觉处理系统50%的精力。

0?wx_fmt=png


在寻找Waldo的时候,我们首先把目光聚焦在一个位置,然后识别它的特征,判断它是否与Waldo的特征相符,最后做出判断。这个过程就是视觉查询(visual query)


视觉效率的设计目的就是减少视觉查询的次数,提升视觉查询的速度和正确性,帮助观看者更好地认知画面所传达的信息。


因此,我们发现影响大脑神经调整的四个关键特征是:颜色、形状、距离和运动。


首先大脑接受这四个特征,然后搜寻符合的模式,将它们组合成更大的对象,从而持续在特征层面上扫描。


0?wx_fmt=png


大脑不停识别物体特征的过程就像从千百块乐高积木中寻找到你所需要的那一块,你所关注的是积木的颜色、大小、形状是否符合你的要求,你的大脑在告诉你:那是块红色的,这是块方形的……

0?wx_fmt=png


当我们看到下面这张模糊的图片时,大脑先是辨别出图上有两个点,两点下有一条直线,外面有一个圆,圆形上半部分有一团毛绒绒的东西,然后大脑意识到:啊,这是一张脸!

0?wx_fmt=png


大脑不停地记忆和学习这些模式,直到形成一条能够快速反应的捷径。有时候这条捷径实在太便捷了,导致我们常常在一些意想不到的地方看到一张“脸”。

0?wx_fmt=png


形成各种各样的思维捷径非常重要。当我们看到各种标志时,大脑几乎不需要思考,立刻就能辨别出这些它们的意思。长期学习而形成的思维捷径让你在陌生的道路上开车时,看到STOP时不假思索就知道:前方无法通行。


因此,设计中的一致性非常重要,通过对观看者大脑的训练,观看者能够迅速知道设计所传达的意思。


设计中的重要信息还要能够脱颖而出。


你可以利用颜色、形状、距离和运动四大特征的对比。红与绿、蓝与黄、黑与白都是对比色,其中黑与白的对比度最强。合理使用对比色能够突出所要传达的信息,同时要确保需要强调的内容在整个设计中的对比度最强。

0?wx_fmt=png


使用以上四个特征时,尽量一次只使用其中之一。在下面的图中,也许你能很快分辨出蓝色和黄色的图形,或是方形和圆形,但是你很难同时把颜色和形状信息结合在一起去找到蓝色的方块。

0?wx_fmt=png



但是换一种方法来运用它们效果就不同了。就像下面这张图一样:形状与颜色各代表一个维度的信息,从而四种类型的图形表达了四种相互关联的在信息。

0?wx_fmt=png


在设计中要降低视觉干扰,不要把你的信息堆积在一起,尽量保证背景干净整洁。下面这张图清楚呈现了简洁的重要性。

0?wx_fmt=png


现在在回想一下,为什么Waldo那么难找呢?



因为Waldo违反了我刚才说的每一个设计原则:

· 使用易辨认的特征

· 让重要的信息脱颖而出

· 每次只使用一种特征对比

· 保持一致性,训练你的观看者



当然,最重要的是要记住:视觉效率就是降低视觉查询的次数,而好的设计就是为了提升视觉效率,让人眼前一“亮”。

0?wx_fmt=png


原文发布时间为:2015-09-07

本文来自云栖社区合作伙伴“大数据文摘”,了解相关信息可以关注“BigDataDigest”微信公众号

相关文章
|
自然语言处理 并行计算 Linux
零成本带你体验手搓AIGC模型
零成本带你体验手搓AIGC模型
837 0
零成本带你体验手搓AIGC模型
|
4天前
|
传感器 算法
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(4)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(4)
|
4天前
|
传感器 算法 物联网
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(2)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(2)
|
4天前
|
传感器 数据采集 算法
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)
|
4天前
|
传感器 算法
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(3)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(3)
|
4天前
|
传感器 存储 数据采集
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(5)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(5)
|
4天前
|
传感器 算法 芯片
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(6)
振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(6)
|
3月前
都市天际线(游戏无法打开画面解决方案总结)
都市天际线(游戏无法打开画面解决方案总结)
89 0
惊天“巨浪”闪现首尔!LED屏幕高清复现文艺复兴技术,网友:真·裸眼3D
惊天“巨浪”闪现首尔!LED屏幕高清复现文艺复兴技术,网友:真·裸眼3D
142 0
|
传感器 人工智能 算法
一根“棉花棒”搞定无接触测温,精度达到±0.5度,无人机是如何做到的?
一根“棉花棒”搞定无接触测温,精度达到±0.5度,无人机是如何做到的?
114 0