认知心理学与交互设计(3)--格式塔原理

“格式塔”一词是德语“Gestalt”的音译,意思是“形状”和“图形”。格式塔原理是德国心理学家在研究人类视觉工作原理时观察到的一些现象,即:人类视觉是整体的,我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。举个例子,我们看到一个三角形,不会说这是三条线段,而是将其看作一个整体。

从上面的解释也可以看出,格式塔是一种描述性的框架,是心理学家对观察到的现象的描述,没有涉及背后的理论,没有对这个现象做出解释。但这并不妨碍其为图形和用户界面设计准则提供有用的基础。格式塔原理包括:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理和共同命运原理。下面一一进行介绍。

接近性原理

物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近(相对于其他物体)的物体看起来属于一组,而那些距离较远的就不是。

比如下面这张图,我们会认为左边是三行,右边是三列。


接近性原理的应用是,不必使用分隔线或者分组框对内容进行归来整理,可以直接通过不同对象之间的距离来达到同样的效果,而且界面更整洁,开发难度也相对较低。

同样的,在设计界面控件的位置时,要考虑好它们之间的相对位置,不要引起错误的感知。比如下面这张图,本来应该是一行一行的,但是现在看起来是不同的列,操作与内容之间的关联被打破。用户需要仔细分辨才能弄明白。


相似性原理

也是一种影响分组的因素。相似的物体看起来应该属于同一组。

我们会把下图中空心的五角星看作一组,其他实心的看作一组。对比接近性,相似性的特征更强,如果两个物体距离不是很接近,但是其有相似的属性,我们也会将其看作是相关的。


连续性原理

我们的视觉倾向于感知连续的形式而不是离散的碎片。

与前面不同,这个原理与对象分组无关,而是用于感知整个物体的情况。如下图,我们会认为左边是一根红线和蓝线交叉在一起,然后被一个圆形挡住,而不会认为是一个圆和四条线段组成。右边的图也是这样,三段分开的物体,但是在我们看来就是一条完整的蛇。

一个连续性方面很经典的例子是IBM的标志。人们能够一样就看出三个字母,不会受到非连续线段的影响,就像你透过百叶窗看到的一样。


用户界面上也有很多利用连续性的例子,比如下面所示的滑动条。我们不会认为这是由两个部分以及中间的一个控制器组成的东西。即使上下两部分的颜色反差很大。我们还是会倾向于将其看作一整条滑动条。


封闭性原理

我们的视觉系统会自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

这个原理和连续性很相似,但主要是指封闭的图形方面。比如下面这两个。
特别是右边的图形。中间的空白区域什么都没有,但我们还是将其视作一个三角形,一个没有边框没有内容的三角形。



封闭原理在界面中的应用很广泛,比如几张图片叠加在一起表示“相册”的意思,我们看不见被挡住的其他图片,只有一角可以感知,但我们就是知道这些都是图片。

对称性原理

相比于连续性和封闭性,对称性倾向于将整体的东西进行分解,以便更好地理解。分解有多种方式,对称是比较常用的。

下面这张图,对于第一个图形的分解有多张方法,我们更倾向于选择第一种,也就是将其看作是两个矩形叠加在一起。一是因为这样更简单,二是因为这样更对称。


主体/背景原理

我们的大脑会将视觉区域分为主体和背景,然后主体会占据我们主要的注意力。

这个原理也说明了场景的特点会影响视觉系统对场景中主体和背景的解析。例如下面这个图形,我们会认为三角形是主体,而圆形是背景,尽管圆形的面积更大,颜色更鲜艳。


但有时候,主体与背景并不由场景所决定,而是依赖于观看者的注意力的焦点,下面这种是很经典的例子。主体和背景的二义性。


主体/背景原理在用户界面中主要用来传达信息,可以是用户当前的位置,内容的主题等。比如在网页中增加背景图案,我们会将其视作背景而不会花费太多的精力去注意,从而能专注于当前任务。但同时背景图案传递出来的情感,信息等都会对我们有所影响。

共同命运原理

共同命运是涉及运动的物体,一起运动的物体会被感知为一组或者有较大的相关性。

在一堆图形中,如果有几个做同样的运动,不管位置和形状是否相同,我们都会倾向于将其视为同一组。

在实际使用中,格式塔原理的各个部分不是孤立的,而是一起产生作用。同一个设计会涉及到多个原理的使用。
格式塔原理的另外一个应用,就是用来检测设计结果是否合理。有时候会无意使用了某些原理,从而带来一些错误的信息表达,最好就是能用每个格式塔原理对其进行考量,看是否符合设计的初衷。

以上。

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

推荐阅读更多精彩内容