格式塔心理学（gestalt psychology）是西方现代心理学的主要学派之一，是现代认知主义学习理论的先驱。于本世纪初由德国心理学家韦特墨 (M.Wetheimer， 1880~1943)、苛勒 (W.kohler，1887~1967) 和考夫卡 (K.Koffka，1886~1941) 在研究似动现象的基础上创立的。

该学派反对把心理还原为基本元素，反对行为主义心理学的刺激—反应公式。他们认为思维是整体的、有意义的知觉，认为整体不等于并且大于部分之和，主张以整体的动力结构观来研究心理现象；主张学习是在于构成一种完形，是改变一个完形为另一完形。所谓格式塔，是德语 Gestalt 的译音， 意即“完形”;所以格式塔心理学又叫完形心理学。

他们认为学习的过程不是试尝错误的过程，而是顿悟的过程，即结合当前整个情境对问题的突然解决。

其著名的实验便是苛勒做的猩猩吃香蕉的实验:把香蕉悬在黑猩猩取不到的木笼顶上，笼中黑猩猩在试图跳着攫取香蕉几次失败后，干脆不跳了，它若有所思地静待了一会儿，突然把事先放在木笼内的箱子拖到放香蕉的地方，一个够不着，将两个箱子叠在一起，爬上箱子取下香蕉。格式塔学派重视知觉组织和解决问题的过程以及创造性思维，这些都为现代认知心理学奠定了基础。

格式塔心理学理论的完形法则: 

• 相近(Proximity)：距离相近的各部分趋于组成整体。
• 相似(Similarity)： 在某一方面相似的各部分趋于组成整体。
• 封闭(Closure)：彼此相属、构成封闭实体的各部分趋于组成整体。
• 简单(Simplicity)： 具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

在 2011 年 9 月人民邮电出版社出版的《认知与设计:理解 UI 设计准则》中，将格式塔与设计原则进行结合，衍生出了当前流行的版本: 

• 临近性
• 相似性
• 连续性
  
• 封闭性 
• 对称性
• 主体-背景
• 共同命运

本篇文章将结合互联网产品实例讨论格式塔原理在交互设计中的应用。

1.临近性

人们通常把位置相对靠近的事物当成一个整体。在界面设计中，相同元素距离要贴近，这样看起来属于一组。

我们在交互设计中，会经常运用这个原理，来降低用户的认知成本。
比如常见的微信以及iPhone的设置页，他其实是非常多项的，但是通过功能分区的划分，把相同的元素放在一起，使得界面显得更加简洁清晰。这样用户在理解这个页面的时候也会更加容易。

当同个页面拥有大量不同内容的时候，临近性原则对于整个布局设计有极大帮助。合理运用接近性原则能够让用户更轻松地获取信息，感知内容。很多时候，用户并没有准备好花费时间来学习复杂的界面，可以快速被感知和识别的信息，能更好的留住用户。

2.相似性

人们会把那些明显具有共同特性（如形状、大小、共同运动、方向、颜色等）的事物当成一个整体。相同元素风格、色彩、大小等要相似，这样看起来属于同一组。

比如豆瓣书影音页面，功能入口会用同一种形式，影视用同一种形式，榜单类型用同一种形式；再比如网易云音乐主页也是入口，功能入口会用同一种形式，歌单用同一种形式，歌曲类型用同一种形式；

这样的方式能让用户非常清晰功能模块的划分，用户能快速理解相似的是一个整体，且与其他模块有明显的差异。

3.连续性

人眼的视觉会偏向连续的形式，使阅读上更具有连贯性。

连续性帮助我们通过构图来解释方向和运动。它是在对齐元素时进行的，它可以帮助我们的眼睛平滑地在页面上移动，帮助我们阅读信息。连续性原则加强了对分组信息的感知，创造了秩序，并通过不同的内容片段引导用户。中断连续性可以标志着一段内容的结束，让人注意到新的内容。

行和列的线性排列是连续性的最好的例子，比如微信订阅号消息，头部是常订阅的公众号，查看方式是左右滑动，所有整个视觉引导单行横向的；而文章的阅读方式是纵向的，所有通过列的形式向下引导视觉。

4.封闭性

人眼的视觉系统自动尝试将敞开的图形关闭起来，把空白填满形成封闭的空间

这个原则在视觉表现层面会用得比较多，在交互上的运用可以理解为我们常通过这种方式来让用户感知还有更多的信息。

比如我们在做需要左右滑动查看更多的交互时，总是会在视觉上透出下一内容的部分以此来让用户感知，这里可以左右滑动查看，以及后面还有更多的内容。

5.对称性

人的第一印象更倾向于简单而且对称的图形，因为会分解复杂的场景来降低复杂度。

在界面设计中，我们最常用的就是矩形、圆形、三角形，这些都是本身就具有对称属性的图形；

我们在列表中也常用到对称性，比如iPhone相册，淘宝首页等，对称能让页面更稳定，同时能降低页面的复杂度。

6.主体-背景

大脑将视觉区域分为主体和背景，主体是场景中占据我们注意力的所有元素，其余则是背景。

这条原则可以理解为“什么重要，什么不重要”，当用户处在一个场景中时，本能的第一反应是判断视野中哪些内容是重要的、需要马上感知的，哪些内容是不重要的。

当我们希望用户强烈的注意到某一个东西时，就会通过背景和主体的对比来强调主体。比如我们常使用的模态弹窗，模态弹窗需要强制用户与弹窗交互，所以弹出模态弹窗时需要非常突出弹窗，所以弹窗模态弹窗时，通常都会显示遮罩，弱化背景信息，强调弹窗内容；

有时候也同一个页面的不同场景，主体也是有差异性，但页面显示区域是固定的，这个时候则需要变化背景显示面积来强调信息主次。比如网易云音乐歌手主页，进入页面时，我们需要用户先了解歌手信息，所以大面积页面介绍歌手，当下滑至歌曲列表时，用户则聚焦于歌曲列表，这时候会通过弱化背景、减少背景区域来给列表更多的展示区域。

7.共同命运

一起做相同运动的物体，会被感知为一组或是彼此相关的。

比如QQ消息列表，拖动消息tab小红点，即可清除所有页面的红点显示且清除动效一致，单独拖动消息列表中小红点时，清除动效也是一致的。即便清楚的方式有差异，但是因为动效一致，所以用户在感知时，能清楚的知道，系统是在进行同一个行为。

总结

在交互设计中，合理的应用格式塔原理，能有效的降低页面的复杂度，降低用户的认知成本，使得页面更加的清晰。我们也会通过格式塔原理，来提升用户的感知能力，让产品能够更易懂。

Powered by Froala Editor