UI设计师的工作，每天面对各种屏幕在那“方寸之间”的地方寻求不同凡响的效果。UI设计师最擅长的是将交互原型图视觉化，而UX设计师则擅长于将需求转化为可视化的原型图。如果说UI设计比较感性，那么UX相对就比较理性。但是UI和UX有着共同的目的就是将产品体验变的更好。

之前我也从《UI设计师如何改版提升产品》和《改版提升产品——如何搭建产品结构层？》讲述过着手提升产品体验的一些方法。两篇文章分别从产品的体验要素和如何搭建产品的结构，进行了阐述。而这篇文章我主要从产品的「框架层」来讲述产品交互设计的交互原型图（线框图）和视觉设计的界面背后的“秘密”。

作为设计师的你有没有想过这个问题：这个界面我为什么要这样布局界面信息。为什么要这样去设计？是什么支撑了它必须要这样去设计？我经常会想这个问题。也许是性格缘故，做事习惯刨根问底，遇到问题，就想要找出那个支撑事物的根源的依据。而我也发现界面设计是有迹可循的，也就是设计是有原则的。而界面设计背后的这个原理则来源———格式塔原理支撑

其实产品设计所有的这些界面设计准则是很相似的。这是为什么呢？答案在于，所有设计准则都基于人类心理学：人们如何感知、学习、推理、记忆，以及把意图转换为行为。许多设计准则至少有一些心理学背景，应用在软件系统设计上。

说到底，用户界面设计准则是以人类心理学为基础的。感知和认知心理学的知识能使交互系统设计更具有可用性和是实用性。

格式塔原理就是根据人类感知和认知心里而总结提炼的视觉规则。那么必然为我们视觉设计师、交互设计师在设计产品时提供了理论依据。

下面是我总结的部分格式塔原理，我会分开一一阐述，我想等你把内容读完，应该明白“为什么要这样进行设计的问题？”像这种问题应该有些许答案。

格式塔原理：

Snail-1.png

1.接近性

接近性原理是指，物体之间的距离会影响我们感知它们是否以及如何组织在一起的。互相靠近（相对于其他物体）的物体看起来属于一组，而那些距离较远的就不是。

Snail-2.png

上图我们一眼就可以识别，图（1）是以行一行为一组，一共3行；图（2）是以列为组，一共3列。我们的视觉认知习惯就是这样，很容易把互相靠近的物体归类为一组。

那这对我们平时设计有什么影响呢？我们既然了解到这个视觉认知的原理，那在平时设计中有所运用？

Snail-3.png

上图的界面，抛开界面配色外，只从界面布局上看，很容易看出界面左侧一竖排icons我们很自然会把它们归类为一组，这就是格式塔原理的接近性原理。

2.相似性

相似性原理指出了影响我们感知分组的另一个因素：如果其他因素相同，那么相似的物体看起来归属一组。

Snail-4.png

（如上图1）我们很容易把上面第二排带黑色边框的菱形菱形视为一组，尽管12个菱形属于一个整体。我们还是一眼注意到三个带黑色边框的菱形。

下图是我随便截取的一个Mac OS的“语言地区”的设置界面，对话框使用了相似性原理。界面右侧这五个非常相似的选择条，我们很容易把它归类为一组，五个选择条并不紧挨着摆放，但因看起来足够相似而显得相关。

Snail-5.png

3.连续性

连续性原理是：我们视觉倾向于感知连续的形式而不是离散的碎片。如下图，我们看到的不是两端橙色线或两段蓝色线，也不是一个左蓝右橙的“V”形，位于一个左橙右蓝的“V”形之上。在图”B“中我们看到的是一个水中的海怪，而不是一个三段身体的海怪。

Snail-6.png

在图形设计中，使用连续性一个广为人知的例子就是IBM的标志。它由非连续性的蓝色组块制成，但一目了然，很容易看到三个粗体字，就像透过百叶窗看到的效果。（见下图）

Snail-7.png

4.封闭性

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

如下图：图（1）可见它并不是一个闭合的原型，但是我们的视觉习惯会自觉把它的分段补充，把它看作一个圆形；图（2）也是，其实就是一个白色地上的几块黑色墨块，但是我们并不会这么认为，而是把它看成一个熊猫图案。

Snail-8.png

5.对称性

对称性原理抓住了我们观察物体的三种倾向性：我们倾向分解复杂的场景来降低复杂度。我们的视觉区域中的信息有不止一个可能的分析，但我们的视觉会自动组织并解析数据，从而简化这些数据并赋予它们对称。

例如：我们会将下图（1）中左边复杂的形状看成是两个叠加的菱形，而不是两块顶部对接的偶砖或者一个中心为小四方形的细腰八边形。一对叠加的菱形比其他两个解释更简单，它的边更少且比另外两个解释更对称。

Snail-9.png

6.主题／背景

我们大脑将视觉区域分为主题和背景。主题包括一个场景中占据我们主要注意力的所有元素，其它的则是背景。如下图，我们很容易会把蓝色视为黄色三角形的背景色。

Snail-10.png

那么在设计中有哪些运用呢？其实也很常见，我们经常做的弹出层，其实就运用了这一原理。

Snail-11.png

7.共同命运

共同命运原理指出一起运动的物体被感知为属于一组或者是彼此相关。

如下图，我们很容易就会把Chapter1，Chapter7，Chapter10，Chapter12归类为一组，因为他们几个有着相同的运动趋势，这就是共同命运原理。当然这几个文件夹运用了相似性原理，灰度相同，可见在一个场景中可以多个格式塔原理叠加使用。

Snail-12.png

上述的七个格式塔原理，无时不刻的会出现在我们的产片设计、界面设计布局中。希望设计师们在设计师界面的时候，不只是为了单纯的为了设计而设计，更知道背后的视觉原理，采用哪种方式去布局。这样我们才会做到“有理有据”，并在今后的设计工作中合理运用这些原理。