格式塔原理在UI中的运用

一切设计的背后都是有原理的，今天跟大家分享一下格式塔原理及其在UI中的运用

什么是格式塔原理？

格式塔原理诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。

格式塔原理：接近性

接近性原理是指，物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近的物体看起来属于一组，而那些距离较远的就不是。在下图中，左边的圆相互之间水平方向比垂直方向靠的更近，因为我们看到圆排成了三行；右边的圆垂直方向上比水平方向上靠的更近，因为我们看到圆排成了三列。

接近性：相互靠近的物体看起来属于一组。左图为成行的圆，右图为成列的圆

接近性原理在UI中的运用：

下图中通过摆放距离可以知道样式为一组，操作按钮为组，通过控件的合理摆放，能减少用户界面上的视觉凌乱感和代码数量。相反的，如果控件摆放不适，相关控件相隔太远，人们很难感知到他们是一组，软件就会变得难以学习和使用。

格式塔原理：相似性

格式塔相似性原理是影响我们感知分组的另一个因素：如果其他因素相同，那么相似的物体看起来归属于一组。下图中相同形状的看起来感觉属于一组，相同颜色的看起来感觉属于同一组。

相似性：如果物体看起来相似，就感觉属于一组

相似性原理在UI中的运用：

下图中通过相似性我们知道顶部文字组是一组，即菜单栏，左侧全部是图标，为工具栏

格式塔原理：连续性

我们的视觉倾向于感知连续的形式而不是了散的碎片。下图是一个使用了连续性原理的IBM标志设计，它由非连续的蓝色块组成，但一目了然，很容易看出它们是三个粗体字母。

连续性原理在UI中的运用：

 下图中滑动条是连续性原理的应用，虽然滑动条有两种对比非常明显的颜色，但不会打破我们对滑动条是一个连续整体的感知。

格式塔原理：封闭性

我们的视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

封闭性：人类视觉倾向于看到整个物体，即使是不完整的

封闭性原理在UI中的运用：

下图中的icon采用了断线处理，但我们的大脑会将形状完整的闭合起来解读

 

格式塔原理：对称性

人类的视觉系统试图将复杂的场景解析为简单和对称形状的组合

对称性原理在UI中的运用：

下图中通过使用对称性原理，让版面划分清晰明确

格式塔原理：主体/背景

主体/背景原理也说明场景的特点会影响视觉系统对场景中的主体和背景的解析。特列，当一个小物体或者色块与更大的物体或者色块重叠时，我们倾向于认为小的物体是主体而大的物体是背景

主体/背景：当物体重叠时，我们把小的那个看成是背景之上的主体

主体/背景原理在UI中的运用：

在用户界面设计和网页设计中，主体/背景原理经常用来在主要显示内容的“下方”放置印象诱导的背景。背景可以传递信息，或者暗示一个主题、品牌或者内容所表达的情绪

格式塔原理：共同命运

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

共同命运：一起运动的物体看起来是一组的或者相关的

共同命运原理在UI中的运用：

下图为模拟迁徙3D图，通过共同的运动暗示共同的历程，在一些动态模拟中可用于展示不同实体的关系。