设计师需要知道的格式塔原理

格式塔学派是心理学重要流派之一，兴起于20世纪初，一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理，其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输人构建结构，并且在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是 Gestalt，因此这些理论也叫做视觉感知的格式塔（Gestalt）原理。

格式塔心理学的起点：似动(Apparent Movement)实验

格式塔原理中最重要的七个原理：

1、接近性原理（Proximity）

2、相似性原理（Similarity）

3、连续性原理（Continuity）

4、封闭性原理（Closure）

5、对称性原理（Symmetry）

6、主体/背景原理（Common Region）

7、共同命运原理（Common Fate）


一、接近性原理

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

如上图所示，左边的蓝色圆相互之间在水平方向上比在垂直方向上靠得更近，而右边的绿色圆在垂直方向上更接近，因此我们将相互靠近的物体看做一组，左边为成行的圆，右边为成列的圆。

根据接近性原理，可以通过拉近某些对象之问的距离，拉开与其他对象的距离使它们在视觉上成为一组。

eg.1：在此日程管理的应用中，同一时间点的预约彼此之间排列紧密，同时拉大不同时间点预约之间的间距，使得同一时间点的预约趋于一个整体。

eg.2：Firefox浏览器设置界面中，同类设置功能靠的很近，并使用分割线将不同设置功能分割开，通常在系统控制面板和数据表单中看到此类的设计方法。

二、相似性原理

人们在感知事物过程中会形成的心理模型，相似的物体默认归属于一组，这就是格式塔的相似性原则。

如上图所示，左边的一组灰色图形，我们的大脑通常会将图形分成“三列”，也就是圆形一列，方形一列，三角形一列，而不会看成“三行”。但是在右侧的另一组图形中，我们就会将图形分成“三行”，蓝色一行，绿色一行、灰色的一行。

有多种方法可以使元素被视为相似并因此相互关联，包括颜色，大小，形状，纹理，尺寸、方向等。相似性可以帮助我们对一组对象进行组织和分类，并将它们与特定含义或功能联系起来。当发生相似性时，可以通过与其他对象不同来强调对象。

eg.3：携程旅行APP首页的金刚区，横向上根据颜色的不同色相分成五大类功能，在纵向上又通过颜色的明度细分一级（第一行）和二级（第二、第三行）菜单，其中每个图标的设计风格仍保证高度一致。

三、连续性原理

我们人眼的视觉会偏向连续的形式，使阅读上更具有连贯性，在观察事物的过程中会情不自禁的形成一种视觉延续的感受，这就是格式塔的连续性原理。

在上面图形设计中，使用了连续性原理的一个广为人知的例子就是 IBM 的标志。它是由非连续的蓝色色块组成，但一点也不含糊很容易就能看到三个粗体字母，就像是透过百叶窗看到的效果。

eg.4：美国Via拼车出行APP的引导页设计，单看每一张图的背景和表达含义都不相同，当用户按顺序翻览时，随着画面中的背景不断切换，车辆仿佛在向前行驶，将四个不同的场景连接为一个整体。连续性原理还经常被应用于网站的轮播、广告、滑动窗口中。

四、封闭性原理

与连续性相关的是格式塔封闭性原理：我们的视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

例如，我们对左图中分散的弧形感知为一个圆，将右图中的形状组合感知为一个白色三角形、一个灰边三角形和三个灰色圆形叠加在一起，即使画面实际上只有三个“V“和三个吃豆人。

eg.5：苹果iOS系统中的钱包应用，我们经常用叠起的形式表示对象的集合，仅仅显示一个完整的对象和其 “背后”对象的一角就足以让用户感知到由一叠对象构成的整体。

eg.6：此外，封闭性原理经常运用于图形、图标的设计中。

五、对称性原理

格式塔对称性原理则抓住了我们观察物体的第三种倾向性：我们倾向于分解复杂的场景来降低复杂度。我们的视觉区域中的信息有不止一个可能的解析，但我们的视觉会自动组织并解析数据，从而简化这此数据并赋予它们对称性。

我们将上方左上角复杂的形状看成是两个叠加的原型，而不是两块对接的月牙或者一个中心为花瓣形的倒8字。一对叠加的圆形比其他两个解释更简单，它的图形更简单并目比另外两个解析更对称。

eg.7：餐厅的海报设计，我们视觉上第一眼看到的是左右对称的设计，视觉的中心是一盘食物，仔细观察之后才能分辨出左边是“半碗”拉面，右边是“半碗”烧麦。

六、主体\背景原理

我们的大脑将视觉区域分为主体和背景，主体包括一个场景中占据我们主要注意力的所有元素，其余的则是背景。例如，当一个小物体或者色块与更大的物体或者色块重叠时，我们倾向于认为小的物体是主体而大的物体是背景。

eg.8：主体/ 背景原理经常用来在其他内容之上弹出信息。作为用户注意力焦点的内容临时成为了新信息的背景，新的信息短哲地作为新的主体。这种方式通常比将旧信息临时替换成新信息更好，因为这能够帮助用户理解他们在交互中所处的环境。

七、共同命运原理

前面6个格式塔原理针对的是静态（非运动）图形和对象，最后一个格式塔原理-共同命运，则涉及运动的物体。共同命运原理与接近性原理和相似性原理相关，都影响我们所感知的物体是否成组。共同命运原理指出一起运动的物体被感知为属于一组或者是彼此相关的。

eg9：在苹果macOS系统中，当用户拖曳选中的文件夹时，共同的高亮和运动使得所有被选中的文件夹看起来是一组的。

写在最后

用户界面设计准则是以人类心理学为基础的，格式塔原理就是根据人类感知和认知心里而总结提炼的视觉规则。为我们视觉设计师、交互设计师在设计产品时提供了理论依据，帮助我们理解和把控各种联系。

当然，在现实世界的视觉场景中，各种格式塔原理不是孤立的，而是共同起作用的。我们只有更好的利用视觉空间设计作品，减少设计的复杂性，尽量保持格式塔原则的完整，用户才能更好更容易的理解、使用我们的产品。

参考文献：《认知与设计——理解UI设计准则》[美] Jeff Johnson 著