运用GESTALT原理优化用户界面设计

你是否关注过天上形态各异的云，就像一个熟悉的动物或者别的物体？你是否曾想过，为什么且如何通过一个蓬松的气体建立起联系？其实都是基于大家的大脑运作！ 大脑总是试图通过与经验作比较，或者通过视觉模式将点与点之间串联起来，以此来理解世界。它用自己独特的方式去感知物体的形状和组成形式，然后组织信息、填补空白，画出全局。

如果你能够了解自己的大脑是如何运作的，这将会帮助你成为更优秀的设计师。它可以帮你判断哪种视觉元素能最有效地应对各种情况，你可以用它们来影响感知，引起用户关注，最终引起行为改变。当它涉及用户界面设计的目标导向、解决问题、直观的设计问题时，它会成为格外有用的东西。

视觉设计和心理学是相互联系并且相互影响的。而格式塔原则可以帮助我们了解并控制它们的关系。

---

格式塔(Gestalt) 原理几个关键思想：

1.出现

整体在部分之前被识别

人们首先会根据其一般形式来识别元素。所以我们的大脑识别一个简单的、已被定义的物体比一个复杂的物体要快。

小狗图片的出现体现了小狗的形象，小狗图片描绘了狗在悬崖树荫下嗅探地面。当试图识别它的部分（脚，耳朵，鼻子，尾巴等）并且从这些组成部分推断狗时，狗不被识别。相反，狗被视为一个整体，即可一次识别。

2.具体化

我们的头脑填补了空白

人们甚至可以识别那些某些部分缺失的物体。因为我们的大脑会与记忆中的熟悉模式相匹配，并填补这些空白。

熊猫是不完整的，但是尽管如此，我们的眼睛仍然感觉到整只熊猫。需要一些努力来克服和注意到我们最终能够看到的每一块白色背景上出现的随机黑色形状和斑点。

3.多重稳定

头脑寻求避免不确定性

人们时常用不止一种方法来解释模棱两可的事物。我们的大脑会在各种可替代选择的事物之间来回穿梭，以此来寻找一种确定性。结果是当另一种观点更难被看到的时候，其中一种观点会更占主导地位。

左图中是一个黑色的花瓶，在白色背景上。对称花瓶有一个大号喇叭漏斗顶部，几乎占据了背景顶部的整个宽度，并逐渐缩小到一个狭窄的中间。右图为一个空间异化的立方体。

4.不变性

能识别相识性和差异性

人们可以通过旋转、衡量和转化来识别简单的物体。尽管它们有着不相同的外貌，我们的大脑仍然可以从不同的角度感知物体。

图为一个简单形状，不同角度的形态。

---

格式塔原理

1.接近性

互相靠近的元素看起来属于一组，相对于其他元素。当元素彼此靠近时，它们被视为一个组的一部分，而不是单独的元素。

案例：

用Proximity原理来分组相似信息，组织内容和整理布局，可以带来相对舒适的用户体验。相关的元素应该彼此靠近，而不相关的元素应该保持一定的距离。白色部分在这里很重要，它会产生一定的颜色对比，同时白色空间可以增强视觉层次，有助于轻松阅读和扫描布局。有助于帮助用户更快发现目标。

2.共同命运

与接近原理类似，在同一区域内的元素视为分组。

案例：

它可以帮助信息分组、组织内容，也可以内分离或作为一个焦点，增加了层次结构，有利于信息推广。共同区域原理可以将许多不同的因素结合在一起，使它们在整体中保持统一。我们可以用线条，颜色，形状或阴影来区分实现它，以保持页面易读性。

3.相似性

共享类似特征的元素，比不具备这些特征元素的看起来跟更相关。

案例：

在相似情况出现时，有一个元素与其他元素不同，则叫异常。可以将它用在需要突出对比度或视觉焦点时，它可以吸引用户注意力，同时可以满足浏览性、可发现性和整体流程。

我们倾向于把相似元素的分组或模式。相似性可以帮我们分类组织中的对象，并将他们的与特定含义、功能元素联系起来。

4.封闭性

一组元素通常被认为是一种可识别的形式或图形，我们的视觉倾向看到整个物体，即使他们是不完整的，闭包也会发生。

案例：

和封闭性原理一样，当提供了对应的的元素，我们大脑会自动填补空白并将它建立为一个整体。这样可以减少传递信息的元素种类，降低复杂度让设计上更舒适。封闭性原理在传达信息时帮我们减少视觉干扰元素，做到了在有限空间内最大限度的减少视觉噪音，在一个小空间里强化概念。

5.对称性

无论元素放置的距离多远，或者他们出现的方式有多不同，对称元素都倾向归属一起，稳固而有序。

案例：

对称元素的视觉效果简洁、和谐、舒适。我们可以快速理解并查找对应板块的内容。对称板块的构图看起来很舒适，但是一般会比较沉闷、平庸。建议可以试试让视觉对称，将不对称的元素与对称元素相结合，不对称的元素给人耳目一行的视觉效果，同时保留部分对称元素来保持页面秩序。

6.连续性

排列在直线或者曲线上的元素比不在这个规则范围内的元素更具有相关性。

案例：

沿着规则延续的元素分组。线段越光滑，越称视为统一的形状。连续性有助于我们通过构图来解释运动的方向和动作。在对齐元素出现时，我们能在页面中直接采用平移清晰阅读。连续性对于分组信息的感知增强了，通过不同的内容分类依次引导用户。连续性中段说明某个部分的内容的结束引起对新内容的注意。

7.共同命运

在同一方向移动的元素比静止不动或不同方向移动的元素更具有相关性。

案例：

元素距离多少或它们可能出现多少差异，如果它们一起移动变化，则它们是相关的，即使是暗示移动也一样。共同命运原理执行时，当元素移动，所有相关的元素在同一方向、同一时间、速度移动。它有利于界面中的信息分组并将结果与行为联系起来。

用自己的理解修改了下～希望能帮助到你，谢谢观看。

原文：https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965