header_v0.7.32

人如何观察

214天前发布

原创文章 / 平面 / 教程
ZAHOT 原创,如需商业用途或转载请与ZAHOT联系,谢谢配合。

活了这么多年,你知道自己是怎么观察世界的么?



本文配图较少,但是干货较多,足够少年吃一晚上的了。


活了这么久,听了那么多道理,

但依然过不好这一生,

这可以理解,

人生百态世态炎凉,

谁能说得准呢?


但,活了那么久,

你知道自己是如何观察事物的吗?

今天SereneDa就告诉你人眼中的那些事。



1.眼见非脑见


江湖人常说,“眼见为实,耳听为虚”


其实不然,有时候我们看到的并不是真实的世界。


相信学过三大构成的童鞋都看过以下这幅图吧。


9b1a58aa52e3a801219c77b7d388.jpg

卡尼萨三角形


第一眼看上去会看到一个黑边三角形,上面叠了个白色三角形,实则没有一个三角形,有的只是零碎色线条和3个有缺口的圆。


其实,不止设计师会偷懒,大脑也会偷懒,它会根据以往的经验,猜测我们看见了什么,所以有时也会出差错。


总结:


1.在网页设计中,合理地运用色彩和形状可以影响人们所见,如下图。






通过变化颜色区域,传达出的两条信息意义则不相同。


所以,你可以设计物体的展示方式,引导别人注意特定的内容。


2.别人在你网站上看见的内容未必符合你的设想,他们的个人背景,文化水平,对眼前事物的熟悉态度以及期待看到什么,都会影响到他们的观察结果。




2.整体认知主要靠周边视觉而非中央视觉


中央视觉用来直视事物,观察细节。


周边视觉则展现人眼能够看到的周边的区域(也就是膀胱,哦不,余光)。


总结:


1.人们看电脑屏幕时会用到周边视觉,而且经常只扫一眼周边视觉区域,便以此判断整个页面的内容。


2.虽然屏幕中央是重要的中央视觉区,但别忽视周边视觉区域。一定要确保周边内容清晰地表现了网页的用途。


3.如果你想让用户集中注意力观察屏幕某处,就别在周边视觉区域内放置动画和闪烁元素


我们经常看到很多网站中,屏幕边缘有个丑得亲爹都不认的联系我们之类的小动画一直动个不停,那么浏览者肯定会忍不住去看它,当你试图集中精力阅读文章时,这样的干扰实在令人厌烦,这正是周边视觉所致。


网站侧边的广告总是做成闪烁的效果就是因为这个道理,这样很不招人待见,但是却会吸引浏览者的注意力。




3.人在识别物体时会寻找规律


1.发现规律有助于快速处理时刻接收的感官信息。即使本无规律,人眼和大脑也会尝试创造规律。


如下图,你看到的可能是3组图案,每组两个圆圈,而不是6个孤立的圆圈。

103058aa50d5a801219c77242cc0.jpg

你把点间距的长短看成了一种规律。




                                        

总结:


1.既然人会不由自主地寻找规律,那就尽量多使用规律,利用分组和间隔创造规律。(重复和亲密性)


2.多用二维元素,少用三维元素。大脑以二维形式接收人眼观察到的信息,因此屏幕上的是三维图形可能会减慢识别和理解的速度。




4.大脑有专门识别人脸的区域


大脑视觉皮质之外有一处特殊的区域,专门用来识别人脸,称为梭形脸部区。


它能够控制我们的大脑在人潮之中快速认出熟悉的人的面孔。


不要赖这个社会是个看脸的时代,因为喜欢看脸是人们的天性。


总结:


1.人在观看网页时,首先会对人脸做出识别和反应(除非你是自闭症患者)


2.在网页上直视用户的脸最有感染力,也许因为眼睛是面部最重要的部分。


3.如果网页上人的眼睛看着旁边的位置或者产品,那么人们往往也会看向同一处,但未必关注,只是看而已。

(经常有这种情况,一个人看向天空,周围的人也会抬头看一眼)


如果你想和用户确立情感沟通,那么就让图片上的眼睛直视用户。


如果想要引导用户的注意力,那就让图片上的眼睛看向某一产品或位置。





5.人根据经验和预期浏览屏幕


看屏幕时,人们第一眼会落在哪里?第二眼呢?答案取决于他们在做什么,希望看到什么。


比如,淘宝网站的常客如果打算使用搜索功能,那么打开网页时就可能直接看向搜索栏的位置。


其次,人们并不是从顶部开始阅读,因为人们早已习惯认为网页的顶部内容都是无关内容,如logo,留白和导航栏,所以往往先看屏幕的中心位置,而非边缘。


总结:


1.最重要的信息(或希望用户关注的内容)要放在屏幕的上面三分之一的部分,或放在中间


2.既然人们不看屏幕边缘,就不要把重要信息放在那里


3.按照正常阅读顺序合理设计界面,避免让人来回跳着阅读内容。通常人们的阅读顺序和语言文字习惯是一致的。





6.物体会提示人应该如何使用


球形门把手的尺寸和形状暗示用户要握住并转动它,


咖啡杯把手告诉用户要弯曲手指穿过把手来举起杯子,


剪刀暗示用户用手指穿过环形手柄,通过手指的张合来控制剪刀,


以上物体给用户的提示称为“功能可见性


无论是生活中还是电脑屏幕上,如果想让用户使用一个物体,就要保证能够让他们轻易地察觉并理解它是什么,明白该怎么用


在前几年的网页设计中,按钮往往做成有阴影的突起状态,给人们一种可点击的视觉暗示,还有蓝色带下划线的文字是超链接,点击就跳转到新页面。


不过现在的网页设计中,按钮基本是单一色块,较少使用视觉暗示,超链接也不再设计得那么明显,只有鼠标悬停时才会看到提示。


总结:


1.设计时要考虑功能可见性的提示。给用户操作提示后,他们就更容易正确使用物体。


2.用阴影来表现对象已选定或对象可用


3.避免给出错误的功能可见性提示


4.设计触摸设备界面时,慎用悬停可见的提示





7.人可能会对变化视而不见


先看一下“大猩猩视频”



这项研究显示,所有看视频的人都曾注视大猩猩处,也就是说都看到了大猩猩,但有一半人意识到他们看到了大猩猩。


得出结论为,如果人们把注意力集中在一件事物上,没有预期可能发生其他改变,就很容易忽略实际发生的变化。


总结:


1.不要认为物体出现在屏幕上就一定会被用户看见,特别是刷新页面出现改变时,用户可能完全意识不到页面前后的区别。


2.如果你要保证用户注意到界面上的某处改变,应该增加视觉提示(如使之闪烁)或者听觉提示(如“哔”的一声)





8.人们认为相邻物体必然相关


如果两个东西距离很近(比如一张照片紧邻一段文字),那么人们就会认为它们之间有关联。


其中,左右相邻的东西之间的关联最为密切,以为我们的阅读顺序是自左向右的。


总结:


1.你如果希望读者认为某些图片,照片,标题或者文字是相互关联的,就将这些内容相邻放置


2.如果想使用线或框分隔内容,先尝试是否只调整间距就能达到效果。有时,间距足以达到效果,还能使页面具有简洁的视觉效果


3.无关内容间距要大,相关内容间距要小。也就是四大基本原则中的亲密性。





9.红蓝搭配难以阅读


在呈现或印刷线条和文字时,不同的颜色会产生不同的立体效果。


有的颜色似乎向内凸起,有的则向内凹陷。


这种效果称为“色彩实体视觉”。


红蓝搭配的效果最为强烈,但其他颜色也有这种现象,比如红绿搭配。

fe7258aa5106a801219c771c3299.jpg

阅读这些颜色组合非常吃力。



         

总结:


1.在同一页面中,避免使用红蓝或者红绿搭配


2.红色背景上不要使用蓝色或者绿色文字,蓝色背景上不要使用红色或绿色文字





10.色彩含义因文化而异


当为世界各地的人做设计时,必须考虑色彩在其他文化中的含义,


因为大多数颜色在不同文化中有不同的含义,只有少数颜色是世界通用的,比如金色代表成功和优质。


在美国,红色代表赤字,绿色代表金钱或通行。


总结:


1.谨慎选用颜色,多考虑颜色可能具有的含义


2.为多国设计时,找出你可能涉及的几大文化或国家,了解相关色彩的文化含义,以避免出现不当的理解。


以上内容整理自《设计师要懂心理学》





ec3e58aa51c9a801219c773bc065.jpg

1
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功