UX小课堂:格式塔原理

相信设计师对格式塔原理都无比熟悉,提起格式塔我们总会记得几个原理:相近、相似、对称……,但它的全貌应该比较模糊了。温故知新,希望这篇文章能带给你新的认识。Enjoy~

当我们看见一本书时,我们会认为是一本书,而不是一个有着红色封面、长宽高比例为多少、带有纹理装饰的长方体。我们都会通过整体去认知事物,而不是将其割裂成每一元素。“整体不等于部分之和”正是格式塔心理学的核心思想。


四个关键特性


格式塔心理学在设计中被运用最多的莫过于它所提出的格式塔原理,而且随着历史发展格式塔原理也在不断演化,据所集资料显示,格式塔原理共有13条。但在此之前,为了更好地理解格式塔,我们先介绍一下它的四个关键特性:涌现(Emergence)、 具体化(Reification)、多重稳定性(Multistability)和不变性( Invariance)。

1、涌现

当一个实体被观察到有其自身各部分都不具备的特性时,称之为涌现。这些特性或行为只有当部分在更广泛的整体中相互作用时才会出现。一个典型的例子如上图,你能看到简单的斑点,但慢慢地会发现图中描绘着“一只斑点狗在树下嗅来嗅去”。我们的大脑会自动解析斑点的布局逻辑,与我们所已知的模式一一配对,直到让我们看到比原来更相关联的一组事物。

简单理解:面对未知,我们善于寻找已知与其匹配。

2、具体化

具体化是指大脑在视觉信息缺失时填补空白的能力。这个过程也赋予了不实际存在的抽象或视觉图像的意义。如上图,钉子似乎是从一个白色球里伸出来的。然而,如果你再看一次,它只是一系列的尖峰围绕着一个空白区域。由于黑色箭头的特殊排列及形状,我们的大脑会用一个不存在的白球填充空白。具体化是一种感知建构方式,被感知的物体包含着比实际存在物体更多的空间信息。

简单理解:我们善于填补空白。

3、多重稳定性

多重稳定性是指模糊的知觉经验在两种或多种不同的解释之间,不稳定地来回切换的倾向。因此,有些物体可以通过多种方式被感知。上面是一个熟悉的例子,图像可以被看作两个白色的侧脸或一个黑色的花瓶。但我们不能同时看到两者。相反,会在两个稳定的选择之间快速地来回跳转。一旦其中一种成为主导感知,就越难看到另一种感知。

简单理解:面对模棱两可,我们善于寻找确定的东西。

4、不变性

简单物体的识别与它们的旋转、平移和缩放无关,如上图。因为我们经常从不同的角度遇到物体,所以我们已经发展出一种能力来识别它们,尽管它们的外观不同。

简单理解:我们善于识别同一物体,即使它发生了变化。


格式塔原理


格式塔的四个特性解释了大脑对事物认知的“加工”过程,而我们的大脑会通过一些“手段”去提高“加工”的效率,这些“手段”即格式塔原理。

1、简单

“人们会把模棱两可或复杂的图像理解为最简单的形式,因为我们只会用最小的力气去认知。”

这是最核心的原理,也是以下所有原理的大前提。说白了就是人们是懒惰的,不会花太多力气去认知事物。而最省力气的方式就是以整体去认知事物。那么人们是怎样划分整体的?

这就需要了解以下的格式塔原理:接近、相似、连续、闭合、对称、主题/背景、焦点、一致连贯性、公共区域、共同命运、平行和过往经验。

2、接近

“相邻或相接近的对象,往往会被视为一组。”同样,相隔较远的对象会被视为两组。距离的变化会调节我们对事物的认知。在界面设计中,这几乎是被运用得最多的原理。

3、相似

“具有相似特征的元素比不具有相似特征的元素更为相关。”这在带有“对抗”属性的场景中更加明显。比如MOBA游戏、体育赛事、热血漫画等,通过颜色、材质、纹理等元素加强同一阵营的相似度和敌对阵营的区别度,更能体现“对抗”的意味。

4、连续

“排列在直线或曲线上的元素比不在直线或曲线上的元素更为相关。”另外,还可以解释为,连续的物体更容易被感知,我们的大脑会优先理解连续的东西。如上图,我们会理解为直线排布的圆点和曲线排布的圆点相交,而不是理解为“V”型排布和“八”字排布的圆点相接。

5、闭合

“人们倾向于认为物体是完整的,而不是关注物体可能包含的间隙。”

6、对称

“人们倾向于感知对称的物体。”换句话来说,人们更容易将对称的物体理解为一个整体。

另外,对称还有其他优点。在苹果WWDC2017设计分会上也提及过对称,他们认为:“对称是一种有效的形式,我们通常会将其与“健康”、“稳定”、“平衡”、“有序”等概念关联在一起。同时,对称还极具视觉美观性。”

7、主体/背景

“人们总是试图区分物体与其周围的区域。”人们不可能理解到所有信息,只会挑他们认为的“主体”去理解。而在界面设计中,我们会经常评价“没有重点”,也是因为这个原理。

8、焦点

“具有强烈差异点的元素会抓住观众的注意力。”这是相似原理和主体/背景原理的延伸。也是在界面设计中常见的突出重点内容的方式。

9、一致连通性

“视觉上相连接的元素比没有连接的元素更为相关。”

10、公共区域

“如果元素共享一个具有明确边界的区域,则它们往往被视为一组。”与接近原则类似,这也是在界面设计上运用最多的原理之一。而流行至今的卡片式设计是这一原理的最好体现。

11、共同命运

“在同一方向上移动的元素比静止或在不同方向上移动的元素更为相关。”这一原理在动效设计上更为适用。

12、平行

“相互平行的元素比彼此不平行的元素更为相关。”在界面设计中,我们也可通过倾斜的界面划分,来强调不同的区域。

13、过往经验

“元素往往是根据观察者过去的经验来感知的。”就如上图,我们会不自觉地认为图中是一个红绿灯。


关于格式塔的新进展


利用格式塔原理可以让我们更简单地理解事物,而在近几年的研究表明,格式塔原理对视觉工作记忆(Visual Working Memory,VWM)也有一定帮助。

视觉工作记忆是指我们能够在临时性中断的任务中,临时存储和处理来自视觉世界的相关信息。例如,我们在扫视一个页面的时候,我们会临时性地记得某些关键字、图片或其他视觉信息。但是视觉工作记忆的容量非常有限,大多只能记得4个项目。但当引入具有格式塔属性的信息时会让视觉工作记忆受益。一些学者已经验证了相近、相似、公共区域和一致连贯性都可以提升视觉工作记忆的性能。其他的原理有待验证。

换句话说,格式塔不仅仅可以让我们更好地理解信息,同时也能让我们更容易地记忆信息。这使得格式塔在某些场景更应受关注,例如车载系统、医疗等对效率和安全性要求更高的场景。


最后


认知和学习一个原理是非常简单的,只有运用到实际工作中才有更多的体会。本文只是抛砖引玉,期待大家在工作中能有更深层的理解。Thanks~


参考文献


Emergence - Wikipedia

Gestalt psychology - Wikipedia

《Design Principles: Visual Perception And The Principles Of Gestalt》

《The Gestalt principle of similarity benefits visual working memory》

《Allocating Visual Working Memory Resources》

《The Glossary of Human Computer Interaction》

lawsofux.com

http://changingminds.org/explanations/perception/gestalt/emergence.htm

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