心理学给网页设计的启示录(一):人们如何观察

视觉是感官之首,人脑一半的资源都源自接收和解析眼睛所见,因此理解用户是如何观察的,对你的网页(产品)设计至关重要。

1.眼见非脑见

一般认为,当我们观察周围一切时,眼睛会将看到的信息传递给大脑,大脑再对信息进行处理,从而感受到真实世界。但其实,脑见并非眼见,大脑总会解析眼睛看到的所有信息。如下图,你会看到什么?

卡尼萨三角和卡尼萨矩形

左图,可能第一眼看见一个黑边三角形,上面叠加了白色三角,但事实上图上什么三角形都没有,有的只是零碎的线条和有豁口的原型。这一错觉被称作“卡尼萨三角”。

为了快速解析周围的世界,大脑会投机取巧的偷懒,并试图完全解析出它们的意义,所以大脑会根据以往的经验,猜测我们看见了什么。

运用“大脑偷懒”,在设计中合理运用形状和色彩可以影响人们所见,如下图,展示了色彩如何使人注意到特定的信息,通过变化色彩区域,传达出两条截然相反的信息。

色彩和形状影响人们所见

Tips:

用户在你的网站上看见的内容未必符合你的设想,由于用户的多样性,如个人背景、文化水平、对眼前事物的熟悉度以及期待看到什么,都会影响他们的观察结果。

设计师可以通过元素的展示方式,引导人们注意特定的内容,如运用色彩、形状。

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

人们有两种视觉,中央视觉和周边视觉。中央视觉用来直视事物观察细节,周边视觉则展现视野中的其他区域。人们可以用眼角的余光观察事物,但多数人都低估了它对于我们理解事物的重要性——人对场景的认知似乎都来自周边视觉。

周边视觉进化论:根据进化论推测,早期人类必须能够一边劳作,一边用周边视觉注意是否有危险逼近,具有较强周边视觉的人类得以存活,相反周边视觉较弱的人则被淘汰。

一项研究也正式了周边视觉的重要性。研究者让被试者观看恐怖照片,有时照片放在被试者的中央视觉区域,有时被放在被试者的周边视觉区域。此时研究者测定了被试者对恐怖照片作出反应和产生恐惧的反应速度,结果表明,若照片放在中央视觉区,被试者反应时间为140-190毫秒;若放在周边视觉区域,反应时间仅为80毫秒。

周边视觉的应用:页面边栏闪动的广告

周边视觉总是让人不禁注意到周围的动静。例如,浏览网页时屏幕边缘的小动画,你一定忍不住看它。网站边栏的广告总是做成闪动效果,就是希望引起用户注意。

Tips:

用户在浏览电脑屏幕时会用到周边视觉,且经常扫视周边视觉区域判断整个页面的内容。

虽然屏幕中央是重要的中央视觉区,但别忽视周边视觉区域的作用。

若设计者想让用户集中注意力浏览页面某处,则可运用在周边视觉区域设置动画和闪烁元素,以吸引注意力。

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

发现规律有助于快速处理接收到的感官信息。即使本无规律,人眼和大脑也会尝试创造规律,如下图,你可能看到4组图案,每组2个元素,而不是8个孤立的点。每组间的长度也被看成一种规律。

大脑倾向发现规律

另外一项研究表明,人在观察物体时,会识别一些基本的形状,以此识别物体,这些基本图形被称为几何离子。人能识别24种基本形状,它们构成了人们所能看见和辨认的所有物体。

Tips:

既然人们会不由自主的找寻规律,那就在设计中尽量多使用规律,利用分组和间隔创造规律。

要让元素易于识别,就用简单的几何图形来表示,这会让构成物体的几何离子更明显,使人们更快、更轻松识别物体。

在设计时,多用二维元素,少用三维元素。大脑以二维形式接收信息,三维图形可能会减慢识别和理解的速度。

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

大脑有一处特殊区域,专门来识别人脸,这一区域可以让人脸识别绕过通常的视觉解析渠道,从而快速识别。

我们会不由自主的看向人眼所看的方向。如果网页上有一张图片,图上的眼睛看向一个产品,我们也会不由自主的看向那个产品。因此在设计时,设计师对人脸的使用时,需要确定是想建立情感沟通(图片上的眼睛直视着用户),还是想引导用户的注意力(图片上的人眼看向某一产品)。

浏览者对人脸的关注高于其他元素

Tips:

用户在浏览网页时,首先会对人脸做出识别和反应。直视用户的人脸最具感染力。

如果网页上的人眼看着旁边的位置或产品,那么用户往往也会看向同一处。

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

用户如果使用从左至右书写文字,那么看屏幕时也会从左至右看。他们并不是从顶部开始阅读,因为用户早已习惯认为网页顶部内容都是弱相关内容,如品牌LOGO、留白、导航,所以用户往往先看屏幕中心位置,而非边缘。

扫一眼屏幕后,用户的阅读顺序就和书写文字的习惯一致了。若旁边出现大幅图片(特别是有人脸的照片)或动态内容(动画、视频),这类内容就会引起用户注意,从而打破原先的阅读倾向。

Tips:

最重要的信息或希望用户关注的内容要放在屏幕三分之一的位置,或放在屏幕中央。

按照正常阅读顺序合理设计界面,避免让用户来回跳着浏览内容。

6.物体会向人提示其使用方法

生活中,物体会提示其使用方法,如球型把手的尺寸和形状会暗示人们握住并转动它。物体给用户的提示被称为“功能可见性”。如果提示信息和使用方法相契合,那么物体的设计就是好的,功能可见性就很清晰。如果某个物体给用户错误暗示,则会让用户恼火。

网页设计时,需考虑网页元素功能的可见性。如按钮的设计,一般为矩形,并标明行动召唤的文字,不同状态的按钮对应不同的风格以提示用户当前所在的状态。

按钮设计

Tips:

设计时需考虑功能可见性的提示,避免给出错误的功能可见性提示。

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

如果两个东西距离很近,如一张照片和一段紧邻的文字,那么人们会认为它们之间有联系。其中,左右相邻的元素之间的关联最为密切。下图中,图片与下方的文字是相关的,但阅读的顺序是自左向右,图片与右侧文字间距太小,因此容易让读者觉得图片对应的是右侧的文字。


容易产生困惑的排版

Tips:

如果希望用户认为图片、标题、文字是相关的,就将这些内容相邻放置。

如果想使用线或框分隔内容,先尝试是否能调整间距来达到效果。有时,调整间距可以划分内容,亦能使页面保持简洁。

无关的内容间距要大,相关内容间距要小。

以上就是心理学中,7条关于人们惯用的观察方式,希望对你的设计有所帮助。

参考书籍:<设计师要懂心理学>

图片来源:网络或个人绘制

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容