情况1 : 为何要留那么多空白? 害我还要滚动滑鼠(掀桌)

情况2 : 为什么不能直接用一页展现? 把客户的需求塞满不就完工啦! (无言)

情况3: 这种设计好像不错，但是为什么要这样做? (直觉大神告诉我这样设计，但我说不出来为什么..)

虽然世界上有许多GUI已经走得又长又远又厉害，但别以为这种古代人对话不会出现，一直以来我们只是习惯这些GUI被如此呈现，但为何要这样设计我们却不一定知道。

由于完形心理学归纳出人类大脑认知之普遍性的规则，因此无论是不是UI/UX设计师都很适合阅读本篇文章。但还是想特别强调，若任职于传统科技公司，需要对上说服老板，需要平行说服(资深)工程师，那请把它收进最爱；而习惯套用设计好的UI套件，但不知道为何这样设计的IT工程师，也可以透过本文来强化自己的产品说服力。

那就开始吧~(击掌)

完形心理学，又称作格式塔(Gestalt)心理学，于二十世纪初由德国心理学家提出— 用以说明人类大脑如何解释肉眼所观察到的事物，并转化为我们所认知的物件。它可说是现代认知心理学的基础，其贯彻的概念就是「整体大于个体的总合“The whole is greater than the sum of the parts.” — Kurt Koffka」。

若深究完整的理论将会使本文变得非常的艰涩，因此笔者直接抽取个人认为与UI设计较为相关的7个原则(如下)，并搭配实际案例做说明。有兴趣了解全部理论的话可以另外Google。

1. 相似性(Similarity) — 我们的大脑会把相似的事物看成一体

如果数个元素具有类似的尺寸、体积、颜色，使用者会自动为它们建立起关联。这是因为我们的眼睛和大脑较容易将相似的事物组织在一起。如下图所示，当一连串方块和一连串的圆形并排时，我们会看成(a)一列方块和两列圆形(b)一排圆形和两排三角形。

对应用到介面设计上，FB每则文章下方的按钮图标(按赞Like / 留言Comment / 分享Share)虽然功能各不相同，但由于它们在视觉上颜色、大小、排列上的相似性，用户会将它们视认为同一级别的按钮。设计师如果能善用相似法则，也可藉由外观的一致性来达到更有效地传达信息、暗示类似功能和节约页面空间，从而为用户提供更好的使用体验。

在股市分析APP上也很常看见相似色彩的应用:以绿色标示股价上扬，以红色代表股价下跌(国外与台湾的标示方式相反)。无须多余的使用说明，仅利用色彩群化让使用者能迅速进行分类并判读股市趋势。同样，我们常见的色盲检测卡也是利用颜色的接近性来测验是否色盲。

2. 接近性(Proximity) — 我们的大脑会把把靠近的事物看成一体

让我们先来观察(a)，它是由6条直线均等分布，也因此我们的大脑很容易将六条直线视为一组。但很神奇地，若我们将(1)(2)靠近，(3)(4)靠近，(5)(6)靠近，是不是觉得直线们从一组变为三组呢?

再回过头对照之前的例子，只因为我们把(c)上下排的距离拉近, (d)左右排的距离拉近，我们会因接近性的影响，而认为(c)圆圈+方块+圆圈是一组、(d)三角形+圆圈+三角形是一组。由此可知，当画面上的物件同时出现相似性&接近性时，接近性的影响往往大过于相似性。

在介面设计上，我们不难发现接近性与相似性这个两种法则常同时出现：以Gmail来说(图e)，大脑应该会因为相似性而将圆形的头像视为一个群组，将其后的文字描述视为一个群组(图f)，但因为使用了近接概念并隔以适当空白，使得原先不同类型的元素，因为距离接近而让使用者更易于联想两者间的关系，将头像与后面的文件标题及内容视为一个信件群组(图g)。

这种作法也常见于线上表格的填写，我们会把相关的标题、功能、按钮等排列在一起，或是表单的选项放在邻近处。这不仅仅是方便使用者操作，更可以明确的告诉使用者：hey~这些功能or选项是互相有关联性的。

3.连续性(Continuity)-我们的大脑会把事物看成连续的形体

如下图示，我们不会将(a)图看成两个相碰的尖角，而是交叉的两个直线。不会将(b)图看成两个相碰的尖角，而是交叉的直线与曲线。同样地在(c)图与(d)图，并不会因为中间有横切一条直线而阻碍我们辨识它为一条连续的波浪型。

我们以当红修图APP「美图秀秀」来说明连续性在UI设计上的应用。 进入美图秀秀后可见许多不同产品被排列为跳板式（宫格式）导航聚集在中心页面，若将产品以一页四个整整齐齐地放置于正中央又无左右滑动提示，使用者很有可能不知道还有其他产品。

于是美图秀秀将其他页的产品宫格微露一角，由于连续性的影响，大脑并不会因为宫格被裁切或是只露一部分而阻碍我们辨识它，藉由这样的设计来触发使用者往左滑以察看后面产品的动作。

连续性概念的应用也常见于瀑布式网站布局。即便区块式的卡片内容因页面高度被截断，我们的大脑还是会自动连续其型体并判断为”内容未完”而往下浏览。

4.封闭性(Closure) — 我们的大脑在观察事物的时候，会将许多个独立的元素视认为一个完整封闭的图形。

如下图所示，我们的眼睛先观察到一连串的圆点(1)，此时大脑开始填补圆点与圆点间的空白(2)，最后把它辨识为一个完整的圆(3)。

我们的大脑会自动填补元素和元素间的空白部分，将复杂的元素简化，尽管中间没有接续的关系，我们仍然会倾向于看成一个完整的图形，以节省我们的记忆空间并快速辨识物件。而这种视觉特性称为封闭性。

封闭性其实就是「具体化」的体现。设计师可以利用这个概念去创作貌似残缺不全的图形，例如中华电信& IBM的LOGO设计。

介面设计上，虽然Abduzeedo首页内容之间并没有明确的界线，但藉由图片的排列方式和说明文字靠边线所带来的稳定感，让观看者在大脑中自动形成了某种「网格」 - 将页面内容看成是有规则的区块，而不是一个混乱的整体。开玩笑地说，其实大脑蛮容易自行脑补的XD

5.图地原理(Figure-Ground) — 我们的大脑会把图案视认为图(前景)与地(后景)的结合

图形对我们来说有着前景跟背景之分，因为人的知觉具有组织性，会想办法将视觉对象由背景中独立出来，这个独立出来的部分即为「图」，周围的部分则是「地」。

据研究发现，通常面积小、水平或垂直、位于下方、单纯的形、反覆的、被包围的、有动感的、对称的、密度高或有质感者易被视认为图，且往上突出比往下垂直容易被视认为图。但很多时后前后景会依照我们所关注的对象不同而有不同的效果。

(a) Martin Newcombe Property Maintenance logo房屋修缮公司，若以黑色为图，白色为地，可以清楚辨识为一个修缮的板手。若反之，也可辨识出房屋图案，这是一个成功结合房屋与修缮得Logo设计。

(b) FedEx国际知名快递公司，除了可以看见清楚的FedEx字样，在Logo中的EX可以看到有个箭头。

(c) FreemanWhite logo室内设计公司，Logo就是「F」跟「W」的组合。

而在介面设计上最常使用图地原理的就是Dialog Box，如(d)图，我们将背景暗化或是模糊化以突显前方的「图」，让使用者可以专注在对话框的内容上；(e)图因未淡化背景便可能扰乱使用者的阅读。而APP中的弹出式广告也是同样的道理。

6. 共同命运(Common Fate) — 我们的大脑会把动态相近的事物看成一体

共同命运法则与相似性有点类似，只是更强调当某些元素有同速、同方向或是同行为的模式出现时，这些元素较易于被视为一个整体。这个原则常用在动态的呈现上。

Material Design常使用的漂浮按钮(Floating Action Button)便是共同命运原则的良好示范。Floating Action Button的设计便是为了节省移动装置的可使用空间，而将多种功能或选项藏在其中，因为类似的动态与设计，且几乎在同时间点出现，我们的大脑就会判断这些功能是一个整体。

7. 对称性(Symmetry) — 我们的大脑会把对称的物体，视为一个整体。

对称，通常能带给观者一种稳定、和谐的感觉。你有发现吗? 若以接近性来说我们应该会判断(2)(3)为一组、(4)(5)为一组，但事实上因为对称性，大脑的判读却是(1) (2)为一组、(3)(4)为一组、(5)(6)为一组。

让我们再以「美图秀秀」来举例，早期的版本(左图)因为子产品并没有那么多，因此整齐地排列在画面中央给人稳定和谐的感觉；然当子产品变多(右图)，便利用画面的不对称性给人右边内容还没结束的感觉，而刺激向左滑动的行为。

很多时候我们运用画面的对称性来引导视觉开始与结束的位置。即便是现在很流行的长卷动式网页也会运用显著标示或无明显区块的header (网站LOGO 或横向Navigation)与Footer(联络我们等相关资讯)来告知使用者网页已经结束。

结尾

完形心理学概念普遍的存在与应用于各种设计中，大家也不难发现同个设计里综合了多种不同的完型概念。本文并不是要教大家如何科学化的分析设计，而是在于理解我们的大脑是如何思考，以及「为什么」要使用这样的设计样式(Design Pattern)。也因为这样的认知模式存在于每个人的脑中，因此，此理论也很适合设计师优化产品，用来解释直观设计或依稀感受却无法言喻的感性抽象，并以与他人共通并能理解的角度具体地阐述出来，来帮助人们更正确地接收你要传递的讯息。

留白不该只是设计的附属品或毫无根据，可能是利用接近性或对称性来帮助大脑分群；而填充式的满版内容无法帮助阅读，只会加重使用者的认知负荷。希望大家在掌握这些原则后可以有所依据，言之有物，设计有理，让产品更有感，成为与工程师沟通的桥梁，说服老板客户的利器。