格式塔原理

格式塔原理在UI设计中的运用

格式塔心理学派中的“格式塔”源自德语“Gestalt”，意即“整体”、“完形”。

他的核心理论是，人的视觉是具有整体化、简化处理图形倾向的，因此，当一个不完整的图形出现在人的视觉当中时，人的视觉思维会倾向于自动将其补全，使其变成一个已知的、完整的、常见的、整体图形，即“完形”。

打个比方说，当你看到一个圆形，但圆形的边上有一个很小的缺口，你的大脑会倾向于将它识别为一个完整的圆形；当你看到天空中的一朵云，你会下意识的把它想成一个动物或一个别的你知道的物体的形象；往远了说，在神话故事里，那些妖魔鬼怪、神仙菩萨，他们的形象也是由已知的、熟悉的形象组合而成，而不是凭空出现的

格式塔原理作为一个著名的心理学派，他的理论几乎适用于所有与视觉相关的领域，它与UI设计的关系尤其密切，它可以帮助我们，梳理界面的信息结构、层级关系，提升界面的可读性，他主要有几个特性，即相似性、接近性、封闭性、连续性、主体与背景关系、均衡原理

下面就来一一讲述下

相似性

人的潜意识里会根据形状、大小、颜色、亮点等，将视线内一些相似的元素组成整体，根据我们的潜意识分类，一般来说，在大小一样的情况下，人们更容易把颜色一样的看成一个整体，而忽略掉形状的不同

所以当我们有几个平行的功能点，但又想突出一个的时候，就可以把那一个做成特殊的形状或者是不同的颜色、大小等，这样用户能一眼看到你要突出的那部分，而再细看那部分又和其他部分是一个整体，不突兀，类似于平面设计中的“特异”

接近性

元素之间的相对距离会影响到我们视觉感知，通常我们认为互相靠近的元素属于同一组，而那些距离较远的则不属于，和相似性很像，不过相似性强调的是内容；而接近性强调位置，元素之间相对距离会直接影响到他们是不是同属于一组；

在UI中最常见的就是列表以及文字展示、图文展示了，在列表页信息多的时候，都会把功能趋于相似的放在一起，利用相近原理，使他们在视觉上趋于一个整体，这样既能让界面功能清晰易懂，不至于杂乱无章

在文字展示的时候，标题也会更趋近于自己的正文内容，其实这一点，就跟美国作者Robin Williams在《写给大家看的设计中》中所提出的“亲密性”意思一样，亲密性主要讲的是彼此有关联的元素在页面上的距离要近些，而没有关联的要离得远些，如果页面上的亲密性一样，那么我们可以把他当成一个整体

封闭性

人的眼睛在观看时，大脑并不是在一开始就区分各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体，这个统一体是我们日常生活中常见的形象，如正方形、圆形、三角形、猫、狗等

这一原则在很多地方都会用到，比如在一屏幕页面的时候，我们总会露出下一个模块的边角，或者是左右滑动的轮播图，都会外露下一模块的内容，这本质上就是利用了这一原则，人的眼睛的自动补全功能，不用看到全部，就能脑补出下一模块会出现什么

连续性

人的视觉具备一种运动的惯性，会追随一个方向的延伸，以便把元素链接在一起成一个整体，如下图，你是会把它当成两个大的圆形，还是当成无数个小圆呢？毋庸置疑，第一眼看到的时候，肯定是两个大的圆形，而不是无数个小圆

主体与背景关系

我们在看一个页面的时候，总是不自觉的将视觉区域分为主体和背景，而且会习惯把小的、突出的那个看成是背景之上的主体。主体越小的时候，主体与背景的对比关系越明显，主体越大则关系越模糊

而在UI设计中，最常见的区分背景和主体的方式就是，蒙版遮罩以及毛玻璃效果，这两种都能起到弱化背景，突出主体的作用，是他们的对比关系更明显

均衡原理

我们的视觉在观察一个物体的时候，会下意识的去寻找他们的平衡点，元素在页面上处于一种平衡状态，会让人心情舒缓愉悦。而在APP界面设计中这一点尤为重要，可能你都没意识到这一点，但却在设计的时候会不自觉的注意这一点

PS：视觉大小≠元素大小，比如相同大小的一个正方形和圆形，在视觉上我们会觉得他们不是一样大的，所以我们要让其“一样大”，就得把圆形调大一点，或者把正方形调小一点

最后，想说明一下，格式塔的各个特性一般都不会孤立存在，他们都是相互影响，比如均衡性里说到的图标元素在视觉上保持统一，里面也涉及到了相似性，人们更容易把相似的物体当成一组。所以我们不要孤立的去想它、用它