探索完形设计原则

收听本文的音频版本

负空间长期以来一直是优秀设计的主要内容。 通常首先想到的是在设计元素周围留出空白。 但是有些设计使用该空白来推断实际上不存在的元素（例如，隐藏在 FedEx 徽标中 E 和 X 之间的箭头立即浮现在脑海中）。

人脑非常擅长填补图像中的空白，并创造出一个大于部分之和的整体。 这就是为什么我们会在树叶或人行道裂缝中看到面孔。

这一原则是视觉感知格式塔原则背后最重要的基本思想之一。 关于该理论的最有影响力的早期提案是由 Max Wertheimer 在其 1923 年的知觉组织格式塔定律中发表的，尽管沃尔夫冈·科勒 1920 年对物理格式塔滕的讨论也包含了许多关于该主题的有影响力的想法。

不管是谁首先提出了这些想法（早在 1890 年就有文章），格式塔原则是任何设计师学习的重要理念，它们的实施不仅可以极大地提高设计的美感，而且可以它的功能性和用户友好性。

用最简单的术语来说，格式塔理论是基于这样一种思想，即人类大脑将尝试简化和组织由许多元素组成的复杂图像或设计，下意识地将各个部分排列成一个有组织的系统，从而创造一个整体，而不仅仅是一个整体。一系列不同的元素。 我们的大脑是用来观察结构和模式的，以便我们更好地了解我们生活的环境。

格式塔理论通常有六个单独的原则：相似性、连续性、闭合性、接近性、图形/背景以及对称和顺序（也称为pragnanz ）。 还有一些额外的、更新的原则有时与格式塔相关，例如共同命运。

相似

将相似的事物组合在一起是人类的天性。 在格式塔中，相似的元素在视觉上被分组，无论它们彼此接近。 它们可以按颜色、形状或大小进行分组。 相似性可用于将设计中可能不相邻的元素联系在一起。

当然，如果你想让它们在人群中脱颖而出，你可以让它们与众不同。 这就是为什么号召性用语的按钮通常设计成与页面其余部分不同的颜色——因此它们脱颖而出，并将访问者的注意力吸引到所需的操作上。

在 UX 设计中，使用相似性可以让访问者清楚哪些项目是相似的。 例如，在使用重复设计元素（例如带有 3-4 行文本的图标）的功能列表中，相似性原则可以很容易地浏览它们。 相比之下，更改要突出显示的功能的设计元素会使它们脱颖而出，并在访问者的感知中赋予它们更多的重要性。

即使像确保整个设计中的链接以相同方式格式化这样简单的事情，也依赖于访问者感知网站组织和结构方式的相似性原则。

继续

连续性定律假定人眼在查看线条时将遵循最平滑的路径，而不管线条实际上是如何绘制的。

当目标是引导访问者的眼睛朝某个方向时，这种延续可能是一个有价值的工具。 他们将遵循页面上最简单的路径，因此请确保他们应该看到的最重要的部分属于该路径。

由于眼睛自然会沿着一条线排列，因此将一系列项目排成一行会自然地将视线从一个项目吸引到下一个项目。 水平滑块就是这样一个例子，亚马逊等网站上的相关产品列表也是如此。

关闭

闭包是最酷的格式塔原则之一，我在本文开头已经提到了这一点。 这是您的大脑将填补设计或图像的缺失部分以创建一个整体的想法。

在最简单的形式中，闭合原理允许您的眼睛跟随虚线到其末端。 但更复杂的应用程序经常出现在徽标中，例如世界野生动物基金会的徽标。 熊猫的大块轮廓丢失了，但你的大脑可以毫不费力地填充缺失的部分以查看整个动物。

Closure 经常用于徽标设计，其他示例包括美国网络、NBC、Sun Microsystems 甚至 Adob​​e。

另一个在 UX 和 UI 设计中非常重要的闭包示例是，当您显示部分图像从用户屏幕上淡出时，以便向他们展示如果他们向左或向右滑动还有更多内容可以找到。 如果没有部分图像，即如果只显示完整图像，大脑不会立即解释可能还有更多内容可以看到，因此您的用户不太可能滚动（因为关闭已经很明显）。

接近

接近度是指元素彼此之间的接近程度。 最强的邻近关系是重叠主体之间的邻近关系，但仅将对象分组到单个区域也可以产生强烈的邻近效应。

当然，反之亦然。 通过在元素之间放置空间，即使它们的其他特征相同，您也可以添加分隔。

以这组圆圈为例：

在 UX 设计中，接近度最常用于让用户将某些事物组合在一起，而无需使用硬边界之类的东西。 通过将相似的事物放在一起，并在每个组之间留出空间，观众将立即了解您希望他们感知的组织和结构。

图/地

图形/地面原理类似于封闭原理，因为它利用了大脑处理负空间的方式。 您可能已经在社交媒体上的模因中或作为徽标的一部分（例如已经提到的 FedEx 徽标）中看到了该原则的示例。

你的大脑会区分它认为是图像前景的物体（人物或焦点）和背景（人物所在的区域）。 有趣的是前景和背景实际上包含两个不同的图像，如下所示：

在这张图片中可以看到一个更简单的例子，两张脸在他们之间创建了一个烛台或花瓶：

一般而言，您的大脑会将图像的较大区域解释为地面，将较小的区域解释为图形。 但是，如上图所示，您可以看到较浅和较深的颜色会影响被视为图形的内容和被视为地面的内容。

当产品设计师想要突出一个焦点时，尤其是当它处于活动状态或使用中时，图形/地面原则非常方便——例如，当一个模态窗口弹出并且站点的其余部分淡入背景时，或者当单击搜索栏，它与网站其他部分之间的对比度会增加。

对称与秩序

对称和秩序法则也被称为pragnanz ，德语中的“好身材”一词。 这个原理的意思是，你的大脑会以尽可能简单的方式感知模棱两可的形状。 例如，奥林匹克标志的单色版本被视为一系列重叠的圆圈，而不是曲线的集合。

这是格式塔设计原则“ pragnanz ”的另一个很好的例子：

你的大脑会将左侧的图像解释为矩形、圆形和三角形，即使每个轮廓的轮廓都不完整，因为它们是比整体图像更简单的形状。

共同命运

虽然共同命运最初并未包含在格式塔理论中，但后来被添加了。 在 UX 设计中，它的用处不容忽视。 该原则指出，人们会将指向或正在朝着同一方向移动的事物组合在一起。

在自然界中，我们在鸟群或鱼群等事物中看到了这一点。 它们由一堆单独的元素组成，但因为它们看起来是一个整体，所以我们的大脑将它们组合在一起，并将它们视为一个单一的刺激。

这在 UX 中非常有用，因为动画效果在现代设计中变得越来越普遍。 请注意，元素实际上不一定要移动才能受益于这一原则，但它们确实必须给人以运动的印象。

用户体验设计中的格式塔原则

与任何心理学原理一样，学习将格式塔的视觉感知原理融入您的设计工作可以极大地改善用户体验。 了解人脑是如何工作的，然后利用一个人的自然倾向创造了一种更加无缝的交互，让用户在网站上感到舒适，即使这是他们第一次访问。

格式塔原则相对容易融入到几乎任何设计中，并且可以快速提升看似随意的设计，或者像是在争取用户注意力的设计，提供无缝、自然的交互，引导用户采取您希望他们采取的行动。

进一步阅读 Toptal 设计博客：

• 设计原则：层次结构介绍
• UI 设计最佳实践和常见错误
• 如何在设计中使用强大的格式塔原则（附信息图）
• 信息架构综合指南
• 使用这些成功的交互设计原则提升您的用户体验