格式塔原则

第一眼看到上面的图片你想到了什么，是一张人脸还是一棵大树？相信80％的人都会将它看成人脸，因为这是我们大脑运作的基本原则——“先看物体的整体，再看事物的各个部分”，这就是格式塔心理学——其中的一小部分原理运用。

 这就是为什么大部分人将上面的图片看作人脸，而不是图标；简单来说，一个面容再精致的女士，站在百米开外，你也只能看到她曼妙的身姿而已；

再比如比你看到下图的时候，你第一眼看到的是一个苹果。但是当你把注意力放在背景（黑色的部分）的时候，你会发现一个乔布斯的剪影。

所以在设计与美术领域常常有打草稿和画线框这些先整体后局部的操作，这不仅是流程需要，同样也有它的科学依据，因为——

视觉认知的特点是先整体后部分，格式塔原则能够让视觉感知和设计相关联，帮助我们在设计中实现整体与部分的和谐搭配。

1.格式塔的介绍(或者说什么是格式塔)

从根源上来说，格式塔（Gestalt）是心理学领域的一个学派，在1912由德国心理学家韦特海默提出，格式塔源自德语“Gestalt”意思为“整体、完形”（完形(即有别于其内部个体单位、作为单一体系的一系列思想、经验等);（指整体具有个体所没有的特性）），格式塔理论也被称为完形理论。核心理论：我们习惯于以规则，有序，对称和简单的方式把不同的元素加以简单的组织，一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。

我们的眼睛和大脑在观察事物，接收影像刺激的时候，会有一些特别的倾向。这些倾向常常可以帮助我们快速的辨别事物，有时候也会产生一些「视错觉」。完形心理学重要的概念便是「整体不等于个体的总合」，举例来说：当我们在观察另一个人的时候，并不是先看到他的手，脚，头，眼睛，耳朵，鼻子，然后把这些视觉特征组合成一个称为「人」的组合。我们是直接的观察到人这个「整体」，而不是其他器官的「个体的总合」。

四个关键特性

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

1、涌现

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

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

2、具体化

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

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

3、多重稳定性

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

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

4、不变性

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

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

二 . 格式塔原则

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

1.简单原则

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

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

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

2.接近原则

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

这里的接近性和我们所说亲密原则类似，当我们看到各种各样的物体时，通常会将彼此靠近的元素组织为一个组。也就是元素与元素之间的距离会影响我们是否将这个（这些）元素组织在一起以及怎样组织在一起，元素与元素之间距离越近的会被组织在一起，而那些距离相对较远的则自动划分在组外。看下图

图（a）中横向距离小于纵向距离的时候我们的潜意识会将15个圆分为三列每列五个，

图（b）中横向距离大于纵向距离的时候我们的潜意识会将15个圆分为五行每行三个圆的形式来划分，

图（c）中按照相似原则我们的潜意识会将圆分为一组、三角形分为一组、正方形分为一组，但是通过加大了它们之中横向的距离后，这个时候我们的感知就会发生变化，进而将图形分为五列每一列为一组如图（d）

还是一样我们来看看在实际设计中是怎么运用的吧

上图微信中将列表与列表之间距离来区分功能各个功能相关联的强度，使用户能更快的找到对应的功能同时界面清晰明了。

而上图爱彼迎中运用接近原则来区分模块与模块之间的分割，在这个界面中我们能很快知道“显示全部”按钮是属于上面最受好评房源模块而不是属于最具性比的房源这个模块。再来看看Uber也是同样的用法就不一一列举了（留下一个小思考呀）

实例2：在排版和文本中，接近性也是必定会用到的规则，标题、内容、段落之间的距离设计合理能够帮助读者快速获取关键信息，提升阅读效率

实例3：界面错误说明的位置紧跟输入框后面

我们的大脑会自觉地将视觉上靠得近的物体看做一个组，而将靠得远的两个物体自动分离开来，通过这组示例图片，相信你会有比较清晰的理解；

 

 

在这里我们用两种方式排列盒子，同样数量的方块，我们会觉得左边扎堆的一组，而另一边则是分散的三组；

 

 

即便我改变了左边方块组颜色，因为挨得近的关系，我们还是会认为这是同一组，最多是组内发生了变化，可见距离分布在排版中对于元素展示和信息罗列的重要性；

 

设计运用：购物网站里的商品展示就充分用到接近原则。每个产品的图片、名称、价格、折扣都呈现在同一个组里，但是由于间隔，你仍旧能够清晰地区分开两个产品；

 

 

而在版式设计中，我们会将图文信息以不同形状，颜色，大小分组展示，这样在视觉层次上会有明显区分，也更易于阅读；比如在下面这组海报（2018年草莓音乐节），元素以组的形式分布在海报中的各个位置，形成不同大小的视觉层次，让我们能够依次看到主要信息、次要信息、辅助信息等内容，这也是设计者希望我们看到的信息顺序；

 

3.相似原则

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

人们习惯将所看到的东西，按照形状、大小、颜色、方向等外观明显且有某些相似之处的元素自动的整合或集合为一组

 

 如上图,看了这个后也来看看在具体实际设计中是怎么运用的相似原则的吧

支付宝中每个图标都用统一大小的图标盒子来规范图标的视觉大小平衡，其中类型相同的功能点采用了不同的颜色来与不同类型的功能进行区分，以此来告知用户它们的功能类型差异

美团中金刚区通过大小的方式来区分主金刚区和副金刚区。且副金刚区同样通过统一大小的图标盒子来统一图标的视觉大小平衡，通过颜色来区分业务的不同属性。

微博底部操作栏“加号”图标添加了一个圆角矩形来告知用户这个功能与其他四个功能的差异以及突显这个功能

举例1：利用图标上的h突出显示热门城市

举例2：图标区分不同类型的地点，比如P是停车场、购物车是超市

本·施耐德曼在UI设计经典作——《Designing The User Interface》里说过：“在界面设计中，要采取一致的行动顺序;在提示、菜单和主屏幕中应该使用相同的设计语言，并且始终保持一致的颜色、布局、大小写、字体等”。

 

因为我们的大脑会将视觉属性相似的物体分成一个组，视觉属性主要指的是：大小、颜色、形状、方向等，再具体一些甚至可以是图标的圆角，元素的纹理共用，字体设计中的衬线装饰等等；

 

设计运用：相似原则的正向运用就是整体设计，比如游戏网页的整体形式感塑造，品牌官网的整体品牌调性等等；相同的元素，颜色等等等等；

 通过提取游戏内的元素移植到页面设计中，是游戏网页设计常用的思路，能够快速建立熟悉感与游戏代入感；而相似原则的反向运用就是设计焦点的创造，那是稳重求变，点睛一笔，我们会在后文提到；

4.封闭原则-用简单代替复杂

这是人脑最常见的运作方式，当我们看到造型结构复杂的视觉元素时，大脑就会从已有的图库中自动搜索类似的图案，然后相匹配，所以我们会将复杂的造型识别得更简单，即“用简单代替复杂”！

 

不仅如此，这个原理还适用于填充空缺的图形，我们的大脑能够自动填补空缺的部分，然后生成一个你熟悉的图案，这就是为什么我们能从这些空缺的图案里识别到出老虎和足球；

 

 

设计应用：这个原则应用得最多的就是品牌的Logo设计和UI界面的图标设计；

 

来自dribble设计师AfshinT2y《天气图标系列》

 

①在设计手法上，通过用简洁流畅的线条，表现出造型丰富的图形，辅助以黄金比例进行切分，经典耐看；

 

②在设计内涵上，反向运用格式塔，让小图形拥有大意义，比如看到天气图标，就能读懂天气状况这些细节；

 

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

 

当我们在观看时，并不是一开始就区分某个单一的组成部分，而是将这些单一的组成元素组合起来使其成为一个易于理解的统一体。当看到某个部分是不完整的时候，我们的大脑会将不完整的信息按照已有的信息填补，并将其视为一个整体。

上图运用封闭性原则即使部分没有了依然不会影响我们对整体的图形的识别。来看看在界面设计中是如何运用封闭原则的吧

上图爱彼迎中（图中）红框框出来的部分图片和文字组合居左对齐且右边间距比较小，我们的大脑很容易这个小的整体补齐为一个矩形。

 

图中猫眼红框框出来的部分，右侧留出一个整体（影片图片、片名、日期）的一部分出来让我们知道右边还有内容可以继续浏览，内容显示出一部分，我们的眼睛会自然填补失去的信息，意识到右边还有没看完的内容，所以才会有产生右滑的动机可能性。这也正是利用了封闭性的原理

 

图中知识星球的底部操作栏icon采用了断性的风格，即使每个图标都有缺口我们的大脑会将形状区于完整的闭合形来解读，即使图标具有独特的风格又对识别性没有多大的影响。（当然断线风格的图标也是有一定的规律的，这里就不列出来啦下回分解呀（奸笑））

5.连续性-通通连起来

 

 

我们的大脑会倾向于将事物看成连续的形体，连续性帮助我们通过构图来解释方向和运动。它在对齐元素时发生，它可以帮助我们的眼睛顺利地穿过页面，有助于提高易读性。连续性原则加强了对分组信息的感知，创建了秩序并引导用户通过不同的内容细分。——Interaction Design Foundation

 

如上图左我们更倾向于将其看成两条相交的曲线，而不是两个相交的半圆。然而中间的我们会我们更倾向于将其看成两条相交的直线，而不是两个相交的菱形的两条边。右边图三我们往往倾向于使实现流跟随相同颜色的轨迹和方向。我们能够感知到这是两条弧线而不是多个圆点。还是一样来看看在界面中运用吧。

 

上图中红色框选中的滑动器灰色部分表示滑动条蓝色表示进度，我们可感知到圆球可沿着灰色条可以继续滑动，尽管整个滑动器被圆球覆盖了小部分。右图中（绿框中）一排小圆点形成按照一定的规律排列，形成一条视觉流，我们感知到一共有五个banner 且按照左右滑动的方式浏览。这就是连续性的运用我们会将这些灰点和白点视为一个整体，而非单个的灰点和白点。

连续性原则的意思是有规律的元素排列，会比杂乱无章的摆放看上去联系更紧密

 

下图中能看出，排成直线的小红点看起来比随机摆放的小红点更具有相关性；我们的大脑倾向于将连续的形体看成某种形状，从而帮助我们通过解读信息与构图。

 

 

设计运用：连续性原则运用得最多的就是轮播页面的设计，它可以帮助我们的眼睛顺利地穿过页面，大大地提高易读性。

 

以下图为例，Lflix（线上观影网站）就在它们的电影宣传轮播界面应用了连续性原则。界面连续的效果是通过裁剪掉半张靠近窗口的海报来实现的，引导用户左右滑动，搜索更多影片资源，这个原则还经常被应用于网站的轮播、广告、滑动窗口中。

 

 

6.对称原则

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

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

对称的原则指出，当我们感知物体时，我们倾向于将他们视为围绕这个物体形成的对称形状。大多数物体可以被分为两个或者两个以上对称的部分。当我们看到两个对称的未连接元素时，我们无意识地将它们整合成一个连贯的对象（或感知）。对象越相似，它们就越倾向于分组。

如上图（左）CSC芬兰的标志，尽管图形的方向和颜色都不同，但是我们还是会将它视为一个整体。

右图中出现的图形我们会感知他为三组括号符号或者是一组花括号加上一个中括号的一部分来感知，而不是把它们看为六个独立的图形来感知。尽管有些地方按照了亲密原则进行了排列但是我们任然会这么感知。

7.主体与背景的关系

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

也称为图/地法则，该法则指出我们在感知事物的时候，总是自动的将视觉区域分为主体和背景。一旦图像中的某个部分符合作为背景特征的话，我们的视觉感知就不会把它们作为主体焦点。根据这样的原理在用户界面设计当中，我们就可以通过一些处理将图像中的某些部分变成背景，这样可以显示更多的信息或者将用户的焦点转移。——Interaction Design Foundation

也就是在整体的视觉条件下，某一个元素相比于其他元素更为凸显（大小、颜色、形态、纹理….）我们大脑会将其判断为主题而其他以外的元素则视为背景，并且习惯于把小的那个看作为背景之上的主体。这里来看看在设计中是怎么运用的吧

上图（左）在原有的界面上天界了一个黑色透明遮罩层（蒙版），使用户的视觉焦点转移到新的主体（白色高亮区域）被蒙版遮罩的页面视觉层级被减弱了，我们的注意力集中在了主体区域

上图中（微博）才用了全局毛玻璃效果来帮助用户了解当前所在页面的环境，同时达到了传递信息的目的，用户也横容易区分主体与背景之间的关系。

8.焦点-人群中最靓的那个仔

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

它指的是我们的眼睛会快速捕捉到和周围不一样的元素。

 

 

换个栗子，下图中，你第一个注意到一定是那个红色的方块，因为红色方块跟其他的元素明显不同。

 

 

在一定程度上，焦点原则就是相似性原则的逆向运用，在相似的元素组中异军突起，想不引起你的注意都难；

 

设计应用：在设计中你应该见得特别多了，将关键设计点安排在最希望被你看到的地方，比如“下载按钮”“立即购买”“免费报名”这些设计点，通过引起受众的注意，达到设计目的；

 

9.一致连通性

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

10.公共区域--给我一个封闭的空间

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

共同区域指的是，当元素处于一个封闭区域内，会被判定为同一组的，这么听起来，似乎和临近原则有点类似，那共同区域原则和临近原则共同作用于设计中会发生什么呢？

 

 

不用担心它们会相互制约，相反地，共同区域和临近原则常常同时存在并且相互辅助的，上面的图形边框和阴影组成了共同区域，尽管所有的卡片都遵循了临近原则（卡片之间的距离是一样的），但我们可以在每一张卡片的内部制作不一样的内容。

 

设计应用：这一点上，用得最多的是卡片UI模式，明确定义一个空间区域，通过不同的信息组合为成为一个完整的卡片，既增强了设计的层次结构，有助于促进信息识别；

 

11.共同命运

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

这一原则运用在动效上居多，共同命运原则指出在整体的视觉条件下，某些物体，或是同时、同速、同方向往一个地方移动，这些个别物体会被视为一组，如下图中带有灰色箭头的

在苹果 mac 的文件夹中我们经常会使用到这种原则。比如当我们选择一些文件夹想要丢入垃圾桶，那么这几个被选中的文件夹拥有一致的运动方向。共同命运是将会被扔进垃圾桶。

 

在产品设计中，当我们想要对一些元素操作同样的动作会常常使用到这个原则。比如苹果手机的长按删除 app 的交互动作，所有的 app 都有一致的运动倾向，告知用户界面处于可编辑状态，非常直观。

12.平行

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

13.过往经验

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

关于格式塔的新进展

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

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

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

最后

这些其实都是长期以来存在于我们脑中的认知，优秀的设计作品正是调动了大脑潜在的积极性，从而与我们产生共鸣，格式塔原理正是这些认知的总结

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

这些原则在我们设计过程中不是单一存在的，他们可以互相影响并且存在一个界面中。这些原则也不仅仅局限在界面设计、包括平面设计…