UX小课堂:格式塔原理

作者: genrry | 来源:发表于2020-01-04 17:31 被阅读0次

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

公众号:设计师阿余。关注用户体验,分享设计思考。 

相关文章

  • UX小课堂:格式塔原理

    相信设计师对格式塔原理都无比熟悉,提起格式塔我们总会记得几个原理:相近、相似、对称……,但它的全貌应该比较模糊了。...

  • 交互七大定律之格式塔原理

    先欣赏一张雅虎ued绘制的关于“格式塔"的Q版小漫画,初步了解下格式塔原理: 一、什么是格式塔原理 (Gestal...

  • 格式塔

    格式塔原理

  • 说说都有哪些版式设计知识点

    格式塔原理 http://www.uisdc.com/tag/格式塔原理 黄金比例 http://blog.sin...

  • 格式塔原理在UI中的运用

    一切设计的背后都是有原理的,今天跟大家分享一下格式塔原理及其在UI中的运用 什么是格式塔原理? 格式塔原理诞生于1...

  • 交互设计的原则

    1.格式塔原则 格式塔原则的原理主要有七种:接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景...

  • 设计法则: 格式塔原理

    【2015/4/1 NEXTDAY】设计法则: 格式塔原理 前序:因为格式塔原理在设计中应用的比较广泛,有众多前辈...

  • 决定版面优劣的三大要素!

    一、 格式塔原理及其版面中的应用 相信各位都听说过格式塔心理学。“格式塔”源自德语“Gestalt”,意即“整体”...

  • 格式塔原理

    大脑会将复杂的视觉内容简化为容易理解的整体,如图所示; 格式塔研究结论——创始人提出的5项基本法则: 1. 简单:...

  • 格式塔原理

    格式塔原理是什么 格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察...

网友评论

    本文标题:UX小课堂:格式塔原理

    本文链接:https://www.haomeiwen.com/subject/cbaxactx.html