几乎所有对平面设计有用的内容都可以在被统称为格式塔知觉原则的法则和原则中找到。对于设计师来说，没有比全面掌握这些原则更强大的工具。同理，那些没有很好掌握的人在面对设计项目时容易迷失方向，经常跑到设计图库网站上“钓鱼”，沦落为陈词滥调的主题和布局。如果你还没有掌握，下定决心学习格式塔的知觉原则。
为什么要学这些内容？咋听起来像深夜电视广告，格式塔知觉原则有助于消除设计中不确定的部分。例如，一旦确定了页面内容和交流目标，格式塔原则就明确了如何在页面上分配元素，何时和为什么使用线条勾勒、背景阴影、渐变，或何时和为什么在一个封闭空间中分组（或不分组）。一旦理解了格式塔原则，设计就会变得简单更加简单，而你的创意也会得到更有效的表达。
这个名字听起来很复杂，但格式塔原则并不难理解。事实上，每一条原则都可以用一句话来解释，但通常它们的定义方式会使大多数人眼花缭乱。Well，我打算通过Web实例来向大家展示它们与网页设计师工作直接相关的术语。本文是有关更好地阐释这些原则的系列文章中的第一篇。每一条原则将对应一篇文章。
首先，是对格式塔知觉原则的简单定义：
图形/背景关系 Figure Ground Relationship
元素被视为图形（不同的焦点元素）或背景（图形所依据的背景或风景）。
简洁法则/普腊涅茨法则 Law of Prägnanz
人类倾向于将模糊或复杂的图像解释为简单而完整的图像。
同一连贯性 Uniform Connectedness
通过统一的视觉特征连接的元素被认为比未连接的元素具有更强的相关性。
良好延续性 Good Continuation
排列在直线或曲线上的元素被认为比不在直线或曲线上的元素具有更强的相关性。
封闭性 Closure
当观察一个复杂的多元素排列时，我们倾向于首先寻找一个单一的、可识别的模式。
共同命运 Common Fate
人类倾向于认为同一方向上运动的元素比静止或不同方向上运动的元素具有更强的相关性。
接近性 Proximity
互相接近的事物被认为比相隔较远的事物具有更强的相关性。
相似性 Similarity
相似的事物被认为比不相似的事物具有更强的相关性。
* * *
你会注意到，这些原则中的大多数似乎是彼此的变体，并且在其他方面密切相关。这是有充分的理由的，因为它们都涉及到关系。而人类的知觉受关系支配；事物如何相似或不同，它们如何相互对比或融合，以及事物的排列方式如何暗示层次结构和受上下文影响。
对于设计师而言，最后一句话几乎总结了在工作中要处理的大部分内容，因此最好要掌握这些内容。 现在让我们深入研究如何将格式塔原理应用于你的设计吧。
图形-背景关系 Figure Ground Relationship
元素被视为图形（不同的焦点元素）或背景（图形所依据的背景或风景）。
为什么重要？
首先讨论这个原则是因为它可能最重要。确定图形与背景的关系也是人们直视时首先要做的事；新事物进入视野时，我们的大脑需要一个理解判断新事物的基准。我们必须确定哪些元素是图形（需要立即关注），哪些是基础背景（现在不那么重要，但确实提供了背景）。
这一过程对人类至关重要，而且在威胁检测中可能有其进化基础（我是只在树叶和杂草上行走还是要踩响尾蛇？）。当然，这也确保我们能够优先考虑自己的感知，从而不会意外地撞到东西，或忽略紧迫且重要的东西。我们对图形-背景关系的感知使我们能够通过观察每个对象与其他对象的关系来组织我们所看到的东西。简短而贴心的版本是：它使我们能够确定应该看到的内容以及可以放心忽略的内容。
在大多数情况下，我们会毫不费劲地立即完成这项工作，因为我们经常置身于熟悉的环境中，看着熟悉的事物。但是当我们被要求看一些不熟悉的东西时，特别是当它是一个设计好的页面时，基于图形-背景关系的线索将决定我们的体验是否成功。而这种成功的体验设计正是设计师的任务。
具体内容：
在一个网站设计的背景下，图形-背景感知帮助我们从结构上区分内容，知觉可供性，并理解二维媒介中隐含的重要性或内涵。设计师可以利用大量的视觉机制和样式处理，来提供这种上下文和传达重要的线索以建立图形-背景关系。还可以利用常见的图形-背景感知的约定，以创造性的方式“混淆”布局来增加兴趣。举几个栗子。
在上面这个非常简单的例子中，有两个同类型的图像，尽管两个图像的构图相同。左边的图像显示了一个灰色物体（图形）停在一个白色区域（背景）上。右边的图片显示了一个灰色的物体（图形）上面有一个洞（都放在白色背景上）。这些关系是由对比和人类经验的共同约定所决定的……以及其他一些因素。
上图是Nathan Ford网站的图片，它呈现了一系列复杂的图形、纹理、颜色和形状，但它是有效的。由于对各种元素进行了某些处理，因此我们能够快速定义什么是内容（图形）以及什么是结构和背景（背景）。
关于上述例子，一个是成功且易于理解的，一个则由于过于复杂而失效的。这两个导航数组的组成完全相同，但是左边的导航阵列很快就被认为是文本内容（图形），其内容位于几乎没有影响的背景底纹（背景）上。而右边的阵列由于其结构和内容由线条构成，因此被认为是两倍的图形。在这种情况下，线条也被认为是内容，结构就与内容竞争。这就导致效果很丑，而且还让人分心。
在“背景”元素中甚至可以有不同级别的层次结构。在上面的例子中，Chuck Mallott在他的网站主页上有效地传达了“背景深度”的级别，以及通过使用阴影来实现传达层次结构的级别。白色区域“在顶部”，而阴影区域则在较低深度。与阴影和降低的对比度相结合，有助于传达其在整个页面层次结构中重要性略有降低。
图形-背景创意 Figure ground creativity
在Web布局中建立清晰的图形和背景关系很重要，但清晰的轮廓并不总是最好的。可以说，模糊这些线条，也可以使设计充满有趣的特征和增强的有效性。这里是几个创造性图形-背景confusion的例子。
Veerle Pieters的Duoh！网站使用了一系列精美的图形和文字，这些图形和文字似乎在图形和背景上交织在一起。 此外，光标与内容的交互有时会触发从图形到背景的转换。 整体效果令人兴奋且有趣。 这个例子似乎违反了规则，但实际上它只是遵循规则中更深层的概念，并取得了很好的效果。
David Lam的主页在某些方面似乎是由一系列复杂的多样元素组成。但通过对比，并考虑到人们典型的图形-背景关系的确定性，David做了一个精心设计，能让我们可以快速“模糊”背景，并看到非常干净的设计和开放式布局。这里巧妙的利用不同聚焦度机制。
thoughtpile.org网站有一个巧妙利用图形-背景关系的有趣设计和交互机制。在这个网站上，这些关系似乎在不断变化，看似是背景元素又变成了交互式的图形元素。这个效果很有趣，但这类事情很容易做过头（并且经常出现在基于flash的网站）。在做这类设计时，必须非常了解你的受众和你的品牌。这个例子似乎做得很好。
Homework
本文中涉及的许多效果都是格式塔原则的其他组成部分，将在后面的文章中讨论。现在，开始有意识地区分设计和其他地方中图形和背景元素。开始注意你周围的环境，并思考格式塔原则。养成这个习惯会带来很大的好处，通过运用这些新发现的见解，你很快就能很容易地认识到为什么有些设计或布局是可行的，而有些则不然；无论是你自己的工作还是别人的。