视觉是感官之首,人脑一半的资源都源自接收和解析眼睛所见,因此理解用户是如何观察的,对你的网页(产品)设计至关重要。
1.眼见非脑见
一般认为,当我们观察周围一切时,眼睛会将看到的信息传递给大脑,大脑再对信息进行处理,从而感受到真实世界。但其实,脑见并非眼见,大脑总会解析眼睛看到的所有信息。如下图,你会看到什么?
左图,可能第一眼看见一个黑边三角形,上面叠加了白色三角,但事实上图上什么三角形都没有,有的只是零碎的线条和有豁口的原型。这一错觉被称作“卡尼萨三角”。
为了快速解析周围的世界,大脑会投机取巧的偷懒,并试图完全解析出它们的意义,所以大脑会根据以往的经验,猜测我们看见了什么。
运用“大脑偷懒”,在设计中合理运用形状和色彩可以影响人们所见,如下图,展示了色彩如何使人注意到特定的信息,通过变化色彩区域,传达出两条截然相反的信息。
Tips:
用户在你的网站上看见的内容未必符合你的设想,由于用户的多样性,如个人背景、文化水平、对眼前事物的熟悉度以及期待看到什么,都会影响他们的观察结果。
设计师可以通过元素的展示方式,引导人们注意特定的内容,如运用色彩、形状。
2.整体认知主要依靠周边视觉而非中央视觉
人们有两种视觉,中央视觉和周边视觉。中央视觉用来直视事物观察细节,周边视觉则展现视野中的其他区域。人们可以用眼角的余光观察事物,但多数人都低估了它对于我们理解事物的重要性——人对场景的认知似乎都来自周边视觉。
周边视觉进化论:根据进化论推测,早期人类必须能够一边劳作,一边用周边视觉注意是否有危险逼近,具有较强周边视觉的人类得以存活,相反周边视觉较弱的人则被淘汰。
一项研究也正式了周边视觉的重要性。研究者让被试者观看恐怖照片,有时照片放在被试者的中央视觉区域,有时被放在被试者的周边视觉区域。此时研究者测定了被试者对恐怖照片作出反应和产生恐惧的反应速度,结果表明,若照片放在中央视觉区,被试者反应时间为140-190毫秒;若放在周边视觉区域,反应时间仅为80毫秒。
周边视觉的应用:页面边栏闪动的广告
周边视觉总是让人不禁注意到周围的动静。例如,浏览网页时屏幕边缘的小动画,你一定忍不住看它。网站边栏的广告总是做成闪动效果,就是希望引起用户注意。
Tips:
用户在浏览电脑屏幕时会用到周边视觉,且经常扫视周边视觉区域判断整个页面的内容。
虽然屏幕中央是重要的中央视觉区,但别忽视周边视觉区域的作用。
若设计者想让用户集中注意力浏览页面某处,则可运用在周边视觉区域设置动画和闪烁元素,以吸引注意力。
3.人在识别物体时会寻找规律
发现规律有助于快速处理接收到的感官信息。即使本无规律,人眼和大脑也会尝试创造规律,如下图,你可能看到4组图案,每组2个元素,而不是8个孤立的点。每组间的长度也被看成一种规律。
另外一项研究表明,人在观察物体时,会识别一些基本的形状,以此识别物体,这些基本图形被称为几何离子。人能识别24种基本形状,它们构成了人们所能看见和辨认的所有物体。
Tips:
既然人们会不由自主的找寻规律,那就在设计中尽量多使用规律,利用分组和间隔创造规律。
要让元素易于识别,就用简单的几何图形来表示,这会让构成物体的几何离子更明显,使人们更快、更轻松识别物体。
在设计时,多用二维元素,少用三维元素。大脑以二维形式接收信息,三维图形可能会减慢识别和理解的速度。
4.大脑有专门识别人脸的区域
大脑有一处特殊区域,专门来识别人脸,这一区域可以让人脸识别绕过通常的视觉解析渠道,从而快速识别。
我们会不由自主的看向人眼所看的方向。如果网页上有一张图片,图上的眼睛看向一个产品,我们也会不由自主的看向那个产品。因此在设计时,设计师对人脸的使用时,需要确定是想建立情感沟通(图片上的眼睛直视着用户),还是想引导用户的注意力(图片上的人眼看向某一产品)。
Tips:
用户在浏览网页时,首先会对人脸做出识别和反应。直视用户的人脸最具感染力。
如果网页上的人眼看着旁边的位置或产品,那么用户往往也会看向同一处。
5.人根据经验和预期浏览屏幕
用户如果使用从左至右书写文字,那么看屏幕时也会从左至右看。他们并不是从顶部开始阅读,因为用户早已习惯认为网页顶部内容都是弱相关内容,如品牌LOGO、留白、导航,所以用户往往先看屏幕中心位置,而非边缘。
扫一眼屏幕后,用户的阅读顺序就和书写文字的习惯一致了。若旁边出现大幅图片(特别是有人脸的照片)或动态内容(动画、视频),这类内容就会引起用户注意,从而打破原先的阅读倾向。
Tips:
最重要的信息或希望用户关注的内容要放在屏幕三分之一的位置,或放在屏幕中央。
按照正常阅读顺序合理设计界面,避免让用户来回跳着浏览内容。
6.物体会向人提示其使用方法
生活中,物体会提示其使用方法,如球型把手的尺寸和形状会暗示人们握住并转动它。物体给用户的提示被称为“功能可见性”。如果提示信息和使用方法相契合,那么物体的设计就是好的,功能可见性就很清晰。如果某个物体给用户错误暗示,则会让用户恼火。
网页设计时,需考虑网页元素功能的可见性。如按钮的设计,一般为矩形,并标明行动召唤的文字,不同状态的按钮对应不同的风格以提示用户当前所在的状态。
Tips:
设计时需考虑功能可见性的提示,避免给出错误的功能可见性提示。
7.人们认为相邻物体必然相关
如果两个东西距离很近,如一张照片和一段紧邻的文字,那么人们会认为它们之间有联系。其中,左右相邻的元素之间的关联最为密切。下图中,图片与下方的文字是相关的,但阅读的顺序是自左向右,图片与右侧文字间距太小,因此容易让读者觉得图片对应的是右侧的文字。
Tips:
如果希望用户认为图片、标题、文字是相关的,就将这些内容相邻放置。
如果想使用线或框分隔内容,先尝试是否能调整间距来达到效果。有时,调整间距可以划分内容,亦能使页面保持简洁。
无关的内容间距要大,相关内容间距要小。
以上就是心理学中,7条关于人们惯用的观察方式,希望对你的设计有所帮助。
参考书籍:<设计师要懂心理学>
图片来源:网络或个人绘制