2.2　完形组织法则的六个概念

在20世纪初，格式塔理论首先被Max Wertheimer提出。这种心理哲学的提出包含感知、感知经验和相关刺激模式。格式塔理论的基本概念是：“整体大于部分之和”。当我们的感知遇到复杂元素时，我们在看到各个部分之前首先看到的是整体。作为设计师如果我们了解这个心理学原理，就可以在设计时更有全局意识。

格式塔心理学科是认知心理学中的一个重要理论，在视觉设计中已经有较大的影响，它与UI设计的关系尤其密切。

2.2.1　图形-背景关系法则

完形心理学所讨论的其中一个重点，在于人类会自动选择视觉主体的习惯，而且，这个主体及背景之间的相互关系，还是可以前后反转的。图2-27就是这个观念最著名的范例，如果把焦点放在黑色的部分，将会看到一个高脚杯，但如果把焦点放在白色的部分，所看到的就是两个人的侧面剪影。

对于观者而言，这种视觉上的游戏是有趣的，因此许多公司的商标设计，都会用到这个概念，图2-28是美国USA电视台的标志，S这个字母，完全由u和A之间的留白所构成，是善用主体及背景相互关系的一个范例。

如果我们将主体及背景的观念往前推进，在构图和界面设计上也有一些值得注意的地方。看图2-29的两个界面设计范例，尽管两组设计都有五个选项，但右边的设计看起来就十分散乱。左边的设计有明确的主体及背景关系，因此一个浅蓝背景加上黑色的主体字，就成为一个按钮；而右边设计中的黑色线框与黑字之间，并没有明确的主从关系，因此成为相互竞争的视觉元素。

在用户看来，页面中的元素要么是图形，要么是背景。Steven Bradley总结出了三种类型的图形——背景关系，如图2-30所示。

（1）稳定型

［图2-30（左）］可以很明显地看出，圆形是图像，而灰色空间是背景。

（2）可逆型

［图2-30（中）］空间与背景可以相互转换，整个页面显得十分有灵动之感。

（3）模糊型

［图2-30（右）］图片与背景的界限模糊不清，观看者需要自行解释空间与背景的关系。

Moddeals网站采用是一种较为经典的图形——背景关系。当页面中的广告浮现时，网页的其余部分就会变暗，自动转化为背景。在这种情况下，用户依然可以拖动页面，然而广告还是会作为独立于背景的一部分停留于原处（图2-31）。

而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。为了突出电影中的人物关系，这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。通过对色彩和排版的巧妙运用，左上角的“互动区”成为了事实上的“一级图形”，而页面中的那一对男女则成为“次级图形”。这样一来，用户既能迅速辨认出页面中的人物，同时也能够理解如何使用网站的导航（图2-32）。

2.2.2　邻近法则

邻近度的基本概念，就是人类会将距离接近的对象，自然而然地视为是同一个组群。以图2-33为例，九个圆圈依照距离排列的不同，就可以在视觉组织上形成一个组群（a）、两个组群（b）或是三个组群（c）。

以图2-34为例，尽管颜色和形状不同，但左边的三个图案，在视觉上会自然被归类成为一个组群。

即便是外观不同的东西，也可以通过一定的安排使它们更为接近。根据格式塔原理，至少有两种方法可以加强事物的相似性：

① 闭合状态将不同的事物集中置于一定的界限内，也会给观看者造成一种“一致”的印象。

② 密集状态即便是不同类型的事物，当距离很密集的时候也会具有某种相似性。

图2-35所示的这张Facebook的截图就体现了闭合状态与密集状态的作用。

整个正文部分——标题、照片、说明、评论等都是在同一个方框里，与灰色的背景形成对比，这一点既体现了闭合状态，也体现了图形——背景关系。在正文部分中，“赞”“评论”“分享”等功能选项离得很近，更不用说文字大小、颜色等细节的近似度了。

这么做还有一个理由，就是为了点击方便，因为这种方式可以把用户与供用户点击的目标之间的距离拉得更近。

由此可见，邻近度是视觉心理学中相当强而有力的一项工具，它的组织功能，能够超越色彩和形状的相似度。

2.2.3　相似法则

与邻近度相同，相似度也是资讯架构规划的一大利器。相似度的基本概念，就是人类会将特质相似的物品，视为同一个组群，而“特质相似”在视觉上，主要有颜色、造型、大小和肌理等四个不同的元素可供运用。在这四个元素之中，颜色是最具有凝聚力量的一种元素，从图2-36的范例中就可以看出来，尽管大小和造型不同，只要颜色相同，就很容易会跳出来成为一个组群。不过在运用色彩这个元素时，要注意到色盲人口的比例。根据相关统计显示，红绿色盲人口约占全球人口总数的8%，这些色盲人口当中约6%人口为三色视觉（色弱），2%人口为二色视觉（色盲），极少数为单色视觉（全色盲）。因此在做设计时，除了色相（hue）的差异之外，一定要注意到明度（luminance）的差异，才能照顾到色盲或色弱的族群。

造型是另一个强而有力的相似度分类法，在一群不同的造型之中，人类能够很快就找到相类似的造型特征，并且将之归类成不同的组群（图2-37）。

与颜色和造型相比，肌理和大小的相似度就不太容易辨认。肌理是一种增加视觉质感的好方法，但从辨识的角度来看不太容易找到细微的差异。大小也是一种比较含糊的元素，尤其是在造型不相同时，尺寸大小的比较非常不容易辨认。如图2-38所示，一般人应该可以看出来这些圆点的大小有些差异，但要指出到底有几种不同的尺寸并不容易，因为与形状或颜色相较，大小的相似度不太容易辨认。

相似度在设计方面的运用，可以分为两个截然不同的方向。其一是利用相似度来作整合，相对的做法，则是用差异性来凸显。

利用相似度来作整合，对于极其注重信息传播时效网页设计而言是个非常有用的启示，可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。

如图2-39所示设计工作室Green Chameleon的页面，我们可以看到，导航图标看起来虽然各不相同，但由于这些导航图标在颜色、大小、排列上的近似性，用户会将它们默认为同一级别的导航功能。这一导航模式特别适用于组织竖排的导航图标，因为它可以在不牺牲导航功能的情况下，很直观地把各个导航图标的功能表达清楚。

用差异性来凸显的做法，对于内容复杂的网站特别有效，必须展示各种不同字形的Typographica网站（如图2-40所示），也用了类似的设计技巧。

图2-41为国外某旅游杂志界面设计，则是同时示范了相似度整合和差异性凸显两个原则。一方面，该杂志以相同的框线将所有一般性的文章归类，如此一来，很容易就凸显出了他们想要标示的几个重点项目，是典型的“一石二鸟”之计。

设计师如果能善用这一法则的话，就可以更有效地传达信息和节约页面空间，从而为用户提供更好的使用体验。

2.2.4　闭合法则

闭合法则其实就是格式塔原理中的“具体化”现象的体现。我们的大脑能自动通过添加界线来补全不完整的图像。设计师可以利用这条法则去创作貌似残缺不全的图形，在这条法则的指导下，设计师还可以尽情创作出典雅的极简主义作品。

如图2-42所示为Abduzeedo网站的截屏。虽然构成页面的三部分内容之间并没有明确的界线，但图片的排列方式让观看者在大脑中自动形成了某种“网格”。因此，观看者会把页面内容看成是独立的三列，而不是一个混乱的整体。

闭合法则也适用于交互设计中。在Urban Outfitters页面中（图2-43），通过利用闭合法则，帮助用户省略了一些不必要的步骤，使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤：

① 原来“添加到购物袋”按钮中的文字会变成“已添加”。

②“购物袋”旁边的物品数量会随之更新。

③ 同时，购物袋选项下会出现一个小小的方形窗口，以视觉形式再次确认用户已购买的物品。

这样，用户不用再去打开购物车确认已添加的物品。通过省略操作步骤，整个互动过程变得更为顺畅愉快。

2.2.5　延续法则

这个法则认为，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的作用凸显。

在图2-44中，观看者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。这说明在视觉中，目光的延续性已经超过了颜色造成的差异。这意味着，在用户看来，处在同一条直线或曲线上的物体是高度近似的。

以图2-45钟表面上的数字排列为例，如果设计师不把数字安排在同一个圆弧线上，看起来就会像是各自独立的一堆数字，而不是属于同一组的数字。

同理可证，整齐排列的直线也有延续性， Google的商标运用就是一个很有趣的例子，用重复的“O”去延续商标的整体性。如图2-46所示。

这一点在导航按钮的设计中体现得再明显不过，用户一般会把同一个水平线上的图标默认为是同一个级别的操作。

图2-47的截图取自CreativeBloq网站，用户可以很直观地理解最上面的一排导航与网页内容的类型有关。而第二行的导航与内容的条目有关。网站不用专门指出它们的不同，因为根据延续法则，用户可以自己辨认得出它们的差异。