如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那你需要看看这篇文章。

在设计的时候，各种视觉要素以有序的方式排列，设计师需要通过对各部分空间的精妙设置来实现这一点。通常而言，我们的目光总会被最引人注目的部分吸引——无论它是视觉主体还是负空间。视觉主体和负空间，两者都很重要，尤其当你需要平和地呈现一个和谐、连贯、天衣无缝的设计。

那么在一个网页设计作品中，设计师到底利用空间传达出怎样的一个故事呢？

这就牵涉到我们今天要聊的主题了——格式塔原理。

人类的大脑天生就能把规律性的散点连接起来，并对目之所及的事物赋予意义。设计是一个创造性的领域，是形式和空间的相互融合，并随之创造各种各样的体验。无论我们接触到什么样的设计作品，我们的大脑都会本能地将作品解构为更简单的各个组件，这些组件由基本的形状和不同的形态组成，而这些形状和形态则与空间息息相关。

过往丰富的体验与经历，使得我们的脑海中充满了各种各样的记忆，于是我们很容易就能识别出这些特定的设计形式。

正空间，或者说显著的设计主体，构成了设计的「肉体」，它是你看到形状、颜色、图案等部分。相反，负空间多数情况下是指背景或大量留白。

文森特·梵高（Vincent Van Gogh）的这幅广受欢迎的作品，是一个以正负空间之间有着强对比的经典设计案例。

就像正空间似乎支配着负空间一样，两者都被用来平衡地传达一个和谐、连贯的设计理念。

在平衡的构图中，设计的正负空间都是相互配合、相互补充的，形成一个无缝、美观的整体。相反，不平衡的构图会让观众感到不适，传达出一个不完整的、扭曲的故事。

我们的设计在表达什么？

网页设计的好坏很大程度上取决于它的实用性和可用性，如果你的设计技巧很差，那么网页设计的整体效果和表现都会受到影响。但从另一个角度来看，在「内容为王」的时代，如果空间布局使用不当，内容将对您的网站产生显著的负面影响。

如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那这篇文章对你就太合适了。在本文中，我们将讨论：

• 正负空间之间的关系、重要性及应用；
• 空间与认知知觉的关系；
• 格式塔原理及其它在网页设计中的应用。

我们还将讨论一些真实的网页设计实例，探讨每个案例如何体现格式塔原理，以及它对空间的创造性使用。

话不多说，一起开始学习吧。

一、正负空间的关系、重要性及应用

空间由两个主要维度组成：正空间和负空间。正空间是可被直接感知到的视觉元素，负空间则为元素以外的留白和间隙。如前所述，正的是物体，负的是物体后面可以通常被忽略的留白区域。一个是焦点，另一个是背景。在前者产生活动和刺激时，后者则保持静止和模糊。一个是月亮，另一个是环绕着它的暗夜。

在网页设计中，正负空间相互作用，共同形成构图，传达理念。只有当正负空间通过对比来区分，同时又向更大的区域延伸时，才会产生视觉层次（脑补一下阴阳太极图吧）。

正负空间的交汇之处就是信息的交汇点。负空间拱卫着正空间元素，让后者更加突出和显著。

通常而言，正空间在绝大多数时候起主导作用，实际上负空间同样重要。负空间的优点在于:

• 创建易于遵循的视觉层次；
• 吸引注意力，营造焦点，减少分心；
• 帮助营造边界，突出焦点；
• 让页面更容易被扫读；
• 使页面看起来自然；
• 不借助外力的情况下，阐明视觉元素之间的关系；
• 有助于保持页面干净清爽；
• 强化网页的视觉风格和外观。

设计中的负空间相反并不是负面的。当正负空间比例平衡得当时，两者在视觉上会显得非常舒适。而当其中一个占据主导地位，并给人一种「过于拥挤」或「空洞无物」的印象时，混乱才会发生。在这两种情况下，受众都无法处理如此复杂的信息，因此，而这样的空间设计是不符合网页设计的基本原则和设计动机的。

这是一个网页模板，它展现了何为「内容错位」和「空间混乱」:

△ 布局混乱

△ 空间失衡

△ 适当的布局调整

△ 网页设计中空间的合理运用

有意思的是，当谈到空间的概念和布局出现时，质疑声也随之而起。

• 是正空间被负空间包围，还是负空间被正空间吞噬？
• 如何确定正负空间的比例？
• 两种空间类型中，哪一个作为焦点对象？
• 是否必须突出其中一个而忽略另一个，以便向观众传达设计师的预期感知？
• 我将如何通过正负空间之间的变化让设计出现质的变化？

类似的问题只能在理解基本概念后再来作答。黄金经验法则告诉我们——简单是最好的策略。

在文章开头，我曾提到在设计网页的时候，尽量创建简单的用户界面，这是一举两得的举措，既可以造福你自己，也可以惠及用户。或从表面上看，网页设计的重点在于增加网站的视觉吸引力，使用户操作更为简便高效。

二、空间与认知知觉之间的联系

我们的大脑总是在扮演侦探的角色，试图寻找隐藏的线索和空间之间缺失的联系，因此它会将当前的视觉信息与之前的经验进行比对。为了成为一名高效的网页设计师，你必须先了解大脑是如何感知周围环境的。它可以帮助你选择特定的视觉元素，利用它们来影响观众的感知。

伟大的设计师明白心理学在视觉感知中所扮演的强大角色。当某人的目光与你的设计作品相遇时会发生什么？他们对你的文章所传达的信息有何反应？

——劳拉·布什，Autodesk 品牌内容策略师

作为设计师，你必须清楚地了解视觉设计和心理学是如何相互联系、相互影响的。换句话说，开发以用户为中心的简单界面，借助正负空间进行设计主要依靠格式塔原理，它可以帮助你理解和控制视觉和心理的联系。

三、网页设计中的「格式塔原则」

格式塔在德语中是「形式」的意思。它更多的是一个概念而不是一个单纯的词汇，它最基本的概念是：

整体大于各个部分的总和。

——库尔特·考夫卡（美籍德裔心理学家，格式塔心理学的代表人物之一）

当单个部分的集合以某种方式统一时，它们在我们的感知当中就是一组。我们把元素看作一个整体，这一概念或理论基本适用于所有的设计媒介：我们不把文本、颜色和形状看作单独的元素，而是把整个网页看作一个整体。同样的道理也适用于森林：我们看到的不仅仅是一堆树，就像我们在看海洋时看不到水滴一样。

格式塔原则描述了当特定的条件出现时，人类大脑是如何感知视觉成分的。它帮助大脑创造视觉图像。因此，格式塔原理通常会应到下面六个主要类别：

• 图形和背景
• 接近性原则
• 对称和秩序
• 相似性
• 封闭性
• 连续性

1.  图像和背景

「图形」是直观地、明显地与背景分离的物体。

目前最经典的例子是圣杯——两个镜面对称轮廓构成了花瓶。当你第一次看到这张照片的时候，你的眼睛会立即被吸引到画面上看起来最聚焦的视觉主体上，可能是相互对立的面孔，也可能是花瓶。当你的大脑在调整你的焦点时，背景或花瓶被模糊了，在那一刻，你的大脑直觉地在图像中感知到背景。

过了一会儿，你会注意到背景中的花瓶，并意识到它本来就在那里。尽管图形和基本原则看起来模棱两可，设计师常常创造视觉上吸引人的超现实和虚幻艺术，并将之运用于网页设计。

有时，图形与背景之间的关系是稳定的，而这种稳固的视觉关系使得两者之间，产生区别。这种关系有的时候又是不稳定的，这意味着图形和背景是无法清晰区分的。由于这种关系的模糊性，用户会很自然地开始困惑。

为了让大家直观地感受到图形和背景之间的关系，让我们详细的拿几个案例来进行讨论。这些例子都集中在图形-背景关系中的三个主要方面：对比度、Box 区块和阴影。这三方面涉及到诸多属性，包括颜色、尺寸和信息量，它们关系到内容的区分和视觉的纵深。

在下面的第一个例子中，Trellis 使用了一个全屏大图背景，并且搭配上清晰的 CTA 元素，图形-背景关系明确，该关系清楚地展示出了细节、色彩和尺寸上的差异。

页面中的文字是位于中央的手写风格字体，与背景中的图像相比显得很突出。和灰色背景图片构成对比的白色文本是吸引用户注意力的焦点，这使得文本在画面中是高度可见的。

从另一个角度来看，背景图片是模糊的，所以清晰的文本会非常醒目。这些都表明，这里的文本被优先考虑为图形或正空间，而模糊的图像被用作背景或负空间，从而强烈地暗示了图形和背景之间的关系。

下一个案例是下图方框里的内容。 Ocean Health Index 巧妙地利用了框内区域的内容将图片与背景分离开来，这是你在浏览他们的网站时看到的：

当你第一次浏览这个页面时，哪个部分会吸引你的注意力？你会发现，它的主要文本为白色和蓝色背景构成对比，而更加醒目的是是两个与文字对比鲜明的 Box 区块。前者借助了深色背景和文本色彩上的差异，构造对比度。而 Box 区块本身的色彩和背景色构成对比的同时，还和更靠前的文本构成色彩对比。

背景使用了微妙的色调，使数字得以鲜明地展现，并突出细节。方框的运用使它们在页面上清晰可见。

一些网站还通过添加阴影来表现物与背景的关系，产生一种图象被置于背景之上的感觉。以下截图来自于 serious unsweet.com：

Seriously Unsweetened 的着陆页使用了不止一种方法来保持图形与背景的平衡关系。明亮颜色和阴影的配合；背景是纯粹的白色，使得前景元素更容易从中出来。

背景之上的元素都是「正空间」，图中的物体呈现在背景的映衬下，有一种被置于「顶部」的错觉。而阴影并没有直接用在图片和文本上，而是应用在图片的内部，这让我们注意到在主要图像内部还有另一层视觉元素，这意味着里面还有一层图片-背景关系——这是一个非常智慧的设计。

2. 接近性原理

接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起，不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外，这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。

从图像到文本、导航栏到网页表单，这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时，它将在元素之间创建关联，为观者提供更好的视觉体验。

以下是 Mashable 网站导航显示的运用接近度的案例：

在上方的截图中，我们可以清楚地看到如何将相同类别的元素放在一起，以显示它们与主菜单的关系。由于颜色和文本大小的选择，使观者的目光自动被吸引到主标题下的子栏目上。

除了导航栏外，基于网格的内容也符合黄金比例的接近性，亚马逊的产品列表就是最好的例子：

这个案例体现的是接近性还是相似性还有待讨论。如你所见，具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中，对其目标产品基于购买偏好进行排序。此外，封闭性原则也在类似项目的清单中发挥了作用。

现在，我们来仔细看看 Basecamp 的网页表单设计，它在网页设计中显示了另一种接近性的理想情况：

可以看到上图中的表单是被划分为两个主要部分的：个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段，第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中，接近度是一个重要指标，它将网页中呈现的信息按优先级排列。

3. 对称和秩序

对称是指两个元素呈现出精确镜像关系。它可以被看作是把一个物体一分为二的平衡。真实的对称图形包括等边三角形、圆形和正方形等几何图像。

人类的大脑会本能地渴望在面孔中找寻「平衡」和「对称」，这在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，因为对称创造和谐，让观者在观看图像时感到舒适。

下面是 HvD Fonts 在网页设计中体现对称性的一个很好的案例：

这个页面不仅显示了典型的图形-背景关系，而且强调了对称性原则的运用。页面被分成四等份，字体大小和颜色相似，四个部分中的每个部分的背景都具有相同的主题色和灰度效果。你也可以注意到负空间不一定是白色的，黑色甚至其他的颜色也可以以图像作为背景。

对称性原则还可以衍生出了另一个概念：在网页设计中，不对称会使观感不佳，必须谨慎使用。许多网站使用不对称作为平衡间距的元素——非常规的正空间元素与中性的背景相互平衡，反之亦然。而 Xplode 的营销理念是不对称，Xplode 以独特的美观悦目的方式引发不对称。

这个网页利用视觉错觉和不对称，抓住了观者的眼球。作为正空间的物体被放置在一个不对称的布局之下，在负空间中创造了强烈的视觉吸引力。色彩是两个空间和谐的主要因素，并为观者创造了一种自然的联系。左边的图形也有很强的平衡性，而右边的则是带来更强的视觉吸引力。你觉得这个设计如何呢？

4. 相似性原理

相似性与接近性原理密切相关的原因，是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性，当这些属性中的一个或多个在邻近对象中共享时，相似性将占上风。

即使正空间的元素看起来没有明显的联系，由于相似性原理，它们也会与负空间元素区分开。

看看这些 UrbanDecay 的商品列表：

虽然上面的商品各不相同，但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告，在同类产品中独树一帜。这显然是一种营销策略，目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是，尺寸上的相似性使其他图像与相似的产品类别区分开来。

除了产品展示之外，正空间可以与相似度结合使用，也可以与负空间结合使用。

让我们来看看 influenster 的着陆页：

上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的，但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的，因此带来了统一的视觉效果。

5. 封闭性原理

你是否曾经遇到过这样一幅画面，看上去是闭合的，但实际上是开放的？这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白，并利用我们的视觉感知来使图形完整化。

正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式，这要求对正空间中要传达的信息进行精确评估。在封闭空间创造性地使用着正负空间，可以产生有趣但简单的设计。

下面是 Magu Kambucha 的设计图：

在这个案例中，可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比，背景则是和两者都构成对比的柔粉色。

封闭性体现在哪里？看到瓶子后面的文字了吗？

虽然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」，其他字母都是半隐藏的，这些字母都是凭观者的直觉自动完成的，整个形式开始成形，意义也随之成形。

下面是 Cult 的截图：

即使文本没有写得很清楚，我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整，文本的排列和对齐也可以使其易于辨认。

6. 连续性原理

最后，根据一般格式塔原则，连续性遵循模式，即引导实现遵循一致的路径，建立从一个对象到另一个对象的线性模式。

在上面的图片中，尽管圆形色块的颜色变淡了，但是观者更倾向于将中间的间隙其看作一条直线，这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径，我们的眼睛倾向于优先感知正负空间之间的界限。

脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。

让我们来看看 Crypton Trading 网站中的视觉线索设计：

看到页面右半部分设计的完美延续了吗？不管背景的明暗色调如何变化，图案在页面上的变化都非常显著。当你向下滚动时，你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里，色调的变化是可以忽略的，我们所看到的是一个连续的线和点的模式。

另一个很好的例子是 OscilloScope 网站：

该网站借用连续性法则，将网站用户引入到工作室的 360 度视角中，他们可以在导航中选择所需的子栏目。

影片《Cargo》的着陆页也使用了连续性法则：滚动式的导航，以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的，所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时，静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验，而不会干扰隐藏在下面的内容。

由于我们的眼睛通常遵循最平滑的路径，设计师可以使用这样的方式来创建引导路径。

总结

在这篇文章中，我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例，让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候，可以达到 1 + 1 > 2 的效果。

人类是根据感知来思考的——主要是基于视觉。根据格式塔原理，我们倾向于看到更大的整体性图景，而不是第一眼看到的某一单个元素。

正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下，我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性，继而使自己成为网页设计领域的佼佼者。

相关引用：

• “Design principles: Space And The Figure-Ground Relationship,” Steven Bradley, Smashing Magazine
• “Psychology + Design: Gestalt principles You Can Use As Design Solutions,” Mhariell Riel, Medium
• “Gestalt principles In UI Design,” Eleana Gkogka, Medium
• “The Gestalt principle: Design Theory For Web Designers,” Ahmed Hussam, Envato Tuts+
• “Design principles: Gestalt, White Space And Perception,” Barbara Marcantonio, Manifesto

作者： Ayesha Ambreen

译者：陈子木

来源：https://www.uisdc.com/spaces-web-design-gestalt-principles

本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载

题图来自Unsplash，基于CC0协议