如何在界面中用好格式塔原理

现在是网购的时代，相信大家已经很少去超市了吧。不过没关系哈，我们只是举个例子，如果你去超市留意一下，会发现超市的货架摆放其实是有规律的——同一类的商品会放在一起，同一类的商品中相似形状的饮料会摆放在一起。那么大家有没有想过为什么要这样摆呢？原因当然是为了让我们更快做出对比，做出选择，提高我们的购买效率了。

上面的超市例子，其实就运用到了我们要讲的格式塔原理。

格式塔源自德语“Gestalt”，是一种心理学术语。格式塔原理在我们的设计工作中，也时时刻刻都会用到。格式塔是知觉（感知）的最终结果，是我们在心不在焉与没有引入反思的现象学状态时（潜意识的不自觉行为）的知觉。

格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。

 

下面，就来跟着我们一起看，到底有哪儿方面的表现～

格式塔研究结论:5项基本法则：

原理:人们会把那些明显具有共同特性（如形状、大小、共同运动、方向、颜色等）的事物当成一个整体。

 

比如下方第一幅图，大家会把同行的正方形当成一个整体，其他圆形当成一个整体。第二幅图，人们就会把大正方形当成整体，小正方形当成另一个整体。

而这里需要注意的一点是人们对形状、大小、共同运动、方向、颜色的「感受权重」是不一样的，在这里颜色属性会覆盖其他属性的影响：

UI中相似性的应用：

原理总结：人们对具有相同特征的元素，会进行归类，我们在界面中做元素的时候，需要对相同功能的内容进行样式/元素统一，不同功能的内容尽量避免样式同质化产生混淆。

原理：当两个或者多个物体在一个空间（或者界面里）距离很近的话，人的下意识会认定他们是存在关联的。

例如下图：

 

在图中左右两组圆中，距离较近的圆我们下意识会认为他们是一组的，是具有关联性的。 

案例一：

注册界面正确的流程是 输入账号—密码—登陆  合理的排版应该如右图，账号密码最为接近，其次是登录按钮。但是左图明显是错误的情况下，有格式塔相近原则在，我们仍会下意识认为他们是一组的，他们是具有关联性的，这就是我们受到格式塔相近法则影响的后果。

所以我们在设计的时候必须将有关联，相似的信息摆放在一起，才能让整个界面功能清晰易懂，用户操作起来才会没有生涩感！

案例二：

案例中相近原则的使用可以很直白的划分出使用模块，功能属性，效果体现为视觉层级明显，交互也更加顺畅。

原理总结：接近原则在设计中的目的就是将有属性联系的元素或者功能离近一点，没有联系的离远一点，这样的效果就是视觉有了主次，交互也没有生涩感。

原理：我们的思维倾向于将对象视为在中心点对称，并且去均匀分割这些元素找到平衡。

我们大脑有把信息化繁为简的能力，我们会把复杂的事物简单概括，概括成我们的基本认知，提取信息，进而找到感兴趣的信息了再了解具体内容。

大家觉得这是两个圆形呢,还是两个残缺的圆加上两个圆的交集,或者是一个整体的形状被中间的交集分割了?

根据格式塔原理,我相信大家的第一感受是这是两个完的个圆。

原理详解：我们一贯倾向于把复杂的场景简单化，从而来降低理解程度，我们的视觉区域中的信息可能不只有一种解读方式，我们视觉会不自觉的自动组织并分析数据，从而简化这些数据赋予它们的对称性。

 

这个原理也呈现在视觉重量或者视觉流方面，我们常说的各种构图方法，其实也是这个原理，都是为了把复杂的信息元素通过简单的方式让观者易于理解，降低信息的复杂程度，让用户快速了解页面内容，从而更快的获取重点。根据视觉元素重量的不同，来营造视觉平衡；也可以根据'不平衡‘依靠视觉重量，引导用户视觉流。

 

我们经常在工作中会听到到：“你这个地方太突兀了，画面失衡，应该适当弱化一下。”这就是我们说的对称性，我称它为画面平衡感。当然，我们也可以“刻意为之”，利用一些不平衡的感觉，制造视觉引导，让用户跟着你的引导去走，达到一定的设计目的。

原理：我们的视觉倾向于将视野中的对象组织起来，根据自身的经验，将缺漏的事物补充完善，达到可辨识的程度之后，作为一个稳定、独立的图形整体，再对完整形态的事物进行认知。

换句话说就是——我们大脑会有意识地去填补画面空白。

例如：

在这个图片中，实际上是三个扇形与三个锐角的组合，我们的视觉却会倾向于把他“复原为”两个三角形。我们的视觉会根据以往的经验和视觉的驱动，将敞开的图形封闭起来，从而将具有内在联系的分散碎片，作为一个整体来看。

UI设计中的应用 ：

在界面中经常遇到横向的卡片流，能够有限的高度内展示更多的信息。我们只需要展示一个变焦的banner图，用户就能自己脑补出完整的对象。

当然格式塔原理并不是互相独立的原则，这里和连续性、相似性也有很大的联系。

 

在icon设计中的应用：

根据封闭性原则，当提供适量的信息时，我们的大脑将通过填补空白并创建一个统一的整体来得到视觉认知。这在icon设计中可以帮助我们精简不必要的繁杂装饰，同时也丰富了图标的表现方式。提升图标的易用性与美观性。

总结：通过这种方式，我们可以减少传递信息所需的元素数量，降低复杂性并使设计更具吸引力。

 

 

原理：我们倾向于完整地连接一个图形，而不是观察残缺的线条或形状。

即使我们设计的界面被一些元素分割，用户依旧能够依照连续的视觉思维经验进行整体阅读。

下面是微信运动的截图和原型还原展示，微信运动将点赞统一排列在右侧，形成连续规律的一条直线，不仅视觉上保持连续性，在点击热区上也保持了连续。

原理总结：这些印证了我们的视觉倾向于沿着完整的路径连接一个图形,而不是观察残缺的线条或者形状。连续性的主要作用就是帮助我们对当前页面进行连贯性浏览，提高阅读效率，延展下一步操作。

 

 

我们在做设计的时候，不要过于被色彩和炫酷的技法所干扰，要追求解决问题的本质。在视觉传达方面，人们在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。所以我们页面中，要根据内容结构进行分析，帮助用户提高浏览效率，降低认知成本，从而让用户更好更便捷的使用我们的产品。

好啦就写到这里啦，以后还会给大家分享自己的设计文章，希望大家长期关注哦～