视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。

格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。

设计中的格式塔原理

据说在1910年的某天，心理学家Max Wertheimer看到一个铁路交叉道口的信号灯交替闪烁，产生了这么一个错觉：他觉得这些信号灯是在一个圆周之内运动，事实上，这些信号灯只是按预定的时间间隔闪烁而已。这个视觉与现实的差异触发了Wertheimer的灵感。

Wertheimer与他的同事们一道发展出一套理论，这套理论在数十年后成为网页设计的基石之一。这个理论实际上是对亚里士多德那句经典名言的扩展，即在视觉现象中，“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域，但它与UI设计的关系尤其密切。

下面我们就来重点了解一下它的四个特性。

1.整体性

当我们（人类）辨认一样物体时，我们倾向于首先辨别它的轮廓，然后将这个轮廓归类为已知的事物。在此之后，我们才会去注意到这件物体的细节及各个组成部分。

在网页设计中，轮廓及线条往往比细节更重要（尽管细节有时也很有创意）。如果用户根本就辨认不出哪个图形才是可以点击的按钮，那么这个按钮设计得再华丽也是失败的。正如我们在最佳交互设计之道这篇文章中说过的，这种清晰的“定义”能让用户更了解按钮的功能。

2.具体化

由于在现实中我们所接受的视觉刺激很多都是支离破碎的，我们的大脑在处理这些信息时会自动把缺失的部分补足。在网页设计中“闭合性”对网页设计而言非常重要。这意味着你只需提供某样东西的基本要素，观看者会自动补全确实的部分。因此你应该在设计中积极灵活地运用负空间（white space），而不应只是把它简单视作画面中的留白部分。

3.组织性

如果在视觉上一件物体有不止一种解释方法，大脑会在不同的解释之间切换，因为它无法同时接受两种解释。一个观看者越是集中注意力于某种解释之上，这种解释就越有支配性。这也是许多“视错觉”图形的理论基础。在网页设计中，尽量避免在网页设计中使用具有多重意义的图形。你想要观看者看到什么，就呈现给他们什么。

4.恒常性

这是大脑在辨认和理解图形时采用的另一种策略。这个特性让我们总是能根据物体的轮廓与基本结构去辨认不同视角，大小和灯光下的物体。在网页设计中的体现或许不如其他特性那么明显，但它被广泛应用于验证码中，因为目前在视觉恒常性上，人类依然比机器人更有优势。

5条最实用的格式塔原则

设计师Carolann Bonner曾指出格式塔理论的5条最常用的原则:1.相似法则；2.图形-背景关系法则；3.组织法则；4.闭合法则；5.连续法则

下面我们就来一个一个探讨这些法则。

1.相似法则

我们倾向于把外观相似的物体归为一类。这对于极其注重信息传播时效网页设计而言是个非常有用的启示，你可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。例如：导航图标在颜色，大小，排列上的近似性，用户会将它们默认为同一级别的导航功能。这一导航模式特别适用于组织竖排的导航图标，因为它可以在不牺牲导航功能的情况下，很直观地把各个导航图标的功能表达清楚。设计师如果能善用这一法则的话，就可以更有效地传达信息和节约页面空间，从而为用户提供更好的使用体验。

2.图形-背景关系法则

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

稳定型 — (左)可以很明显地看出，圆形是图像，而灰色空间是背景。

可逆型— (中间)空间与背景可以相互转换，整个页面显得十分有灵动之感。

模糊型— (模糊型) 图片与背景的界限模糊不清，观看者需要自行解释空间与背景的关系。

Moddeals网站采用是一种较为经典的图形-背景关系。当页面中的广告浮现时，网页的其余部分就变变暗，自动转化为背景。在这种情况下，用户依然可以拖动页面，然而广告还是会作为独立于背景的一部分停留于原处。而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。为了突出电影中的人物关系，这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。通过对色彩和排版的巧妙运用，左上角的“互动区”成为了事实上的“一级图形”，而页面中的那一对男女则成为“次级图形”。这样一来，用户既能迅速辨认出页面中的人物，同时也能够理解如何使用网站的导航。

3.组织法则

即便是外观不同的东西，也可以通过一定的安排使它们更为接近。根据格式塔原理，至少有两种方法可以加强事物的相似性：闭合状态将不同的事物集中置于一定的界限内，也会给观看者造成一种“一致”的印象；密集状态即便是不同类型的事物，当距离很密集的时候也会具有某种似性。

4.闭合法则

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

闭合法则也适用于交互设计中。

设计师Carolann Bonner解释说，在Urban Outfitters页面中，通过利用闭合法则，他帮助用户省略了一些不必要的步骤，使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤：

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

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

3.）同时，购物袋选项下会出现一个小小的方形窗口，以视觉形式再次确认用户已购买的物品。这样，用户不用再去打开购物车确认已添加的物品。通过省略操作步骤，整个互动过程变得更为顺畅愉快。

5.连续法则

这个法则认为，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的地位显得格外重要。在视觉中，目光的延续性已经超过了颜色造成的差异。这意味着，在用户看来，处在同一条直线或曲线上的物体是高度近似的。这一点在导航按钮的设计中体现得再明显不过，用户一般会把同一个水平线上的图标默认为是同一个级别的操作。

结语

理解和掌握格式塔法则能让你更有效地控制网页的设觉效果，从而创造出 风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。我建议你在自己的设计实践中综合运用上面提到的各种法则，你会发现，不久之后，你的网页设计水准会跃上一个新层次。

晴美互动认为设计本来就是一个考技巧的事，有时候错觉会给人很奇妙的感觉，互联网本来就是很有趣的！