巧用格式塔原则处理网页设计中的正负空间

黎沫limo 翻译文章

备注：翻译过程中为了适合我们的阅读习惯，有对原文进行一定的内容简化和语义修饰，如有不妥欢迎大家根据官网链接进行比对并留言互动。

正文：

当元素以有序的方式排列时，空间的智能使用将我们的目光引向最引人注目的空间——无论正面还是负面。尽管正空间似乎支配着负空间，但两者都被用来平衡地讲述一个和谐、连贯、完整的故事。但是空间在网页设计中讲述了什么样的故事?

人类的大脑通过硬连线来连接点，并使眼睛看到的一切都具有意义。设计是一个创造性的领域，形式和空间相互融合，给我们带来多样化的体验。无论我们遇到什么样的设计，我们的大脑天生就能把那件作品变成更简单的组件，这些组件由与空间相关的基本形状和形式组成。我们的大脑中充满了回忆，并且由于我们的经历，我们很容易识别出这些模式。

空间——正面和负面——在统一设计元素中扮演着关键的角色。因此，我们看到一个统一的模式(或不是）。当元素以有序的方式排列时，空间的智能使用将我们的目光引向最引人注目的空间——无论正面还是负面。

正空间形成设计的客体，它是你看到的形状、颜色图案等部分；相反，负空间是背景或夸张的留白（大多数情况）

                                                           文森特·梵高的《星月夜》

尽管正空间似乎支配着负空间，但两者都被用来平衡地讲述一个和谐、连贯、完整的故事。

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

但是空间在网页设计中讲述了什么样的故事？

在空间中，网页设计的成败更多地取决于实用性和可用性。如果你的设计技巧很差，那么网页设计的整体效果和表现都会受到影响。从另一个角度来看，如果空间使用不当，将对你的网站产生负面影响。

如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那么你就中了头彩。在本文中，我们将讨论:

1、正负空间的关系、重要性与实施；

2、空间与认知感知之间的联系；

3、格式塔原则及其在网页设计中的应用；

我们还将讨论一些创造性利用空间和格式塔原则的真实网页设计示例。

事不宜迟，我们开始吧；

1、正负空间的关系、重要性和实施

空间由两个主要维度组成:正面和负面。正的是元素，负的不是元素。如前所述，正的是客体，负的是其背后可忽略不计的空间。一个是焦点，另一个是背景。前者活动和激励，后者保持静止和模糊。一个是月亮，另一个是周围的黑暗天空。

在网页设计中，空间相互作用以保持整体构图的概念。只有当两个空间通过对比区分，同时又倾向于更大的画面时，才会产生视觉层级(想想阴阳)。

                                                    "阴阳”是中国古代哲学中的二元论概念

我们在交点处对正空间和负空间进行微分，负面主要出现在空白区域，补充正面使其突出。

似乎正空间起主导作用，但负空间同样有益。其中一些益处是：

a. 创建了一个浅显易懂的视觉层级；

b. 设定注意力焦点，减少分心；

c. 帮助建立规模，让焦点更大；

d. 提高了页面扫描能力;

e. 使页面上的流程显得自然；

f. 不需借助额外辅助工具，阐明视觉元素之间的关系；

g. 有助页面整理；

h. 增强网页的样式和外观。

如果你说，设计中的负空间并不是那么消极。然而，当平衡使用比例时，这两种空间类型都表现得很好。只有当其中一个占据主导地位，给人一种“过于拥挤”或“缺乏”的印象时，混乱才会发生。在这两种情况下，用户都无法处理如此复杂的信息，因此，创造性地利用空间进行网页设计的动机就会土崩瓦解。

这是一个内容错位或空间“混乱”的网页模板:

                                                             欠考虑的“混乱”空间

                                                          黑白间的空间差异

                              固定空间，以显示按比例使用时空间如何增强清晰度和均匀度

                                                          在网页设计中有效利用空间

当空间的概念和布局出现时，困惑随之而来：

a. 是正空间被负空间包围还是负空间被正空间吞噬?

b. 如何确定每种空间类型的比例?

c. 哪一个应该作为验证焦点对象？

d. 是否必须突出一个忽略另一个来向用户传达理念?

e. 如何通过正负面空间的交流来实现“设计的涅磐”?

只有清楚的了解基础知识，才能回答这些问题。根据黄金法则:简单是最好的策略(我们这么做是因为它适合!)

在开始提到，网页设计就是要创建一个简单的用户界面，一石二鸟，帮助你和你的用户。或从字面意义上来说,有助于增强网站设计的视觉吸引力以及使其有效且易于使用——是的，空间的利用有着不可思议的力量。

2、空间与认知感知之间的联系

由于我们的大脑总是在扮演侦探的角色，寻找隐藏的线索和空间之间缺失的联系，所以它将当前的视觉效果与之前经历过的视觉效果作为认知过程中的一部分进行比较。成为一名高效的网页设计师，你必须先了解大脑是如何关注周围环境的，它可以帮助你锁定视觉元素的特定用途，并利用它们来影响用户的感知。

“伟大的设计师，明白心理学在视觉感知中所扮演的重要角色。当他人看见你的设计创作时会发生什么?他们对你分享的信息有何反应?”

——Autodesk品牌内容策略师，Laura Busche

你现在必须清楚地了解视觉设计和心理学是如何联系在一起并相互影响的。换句话说，主要是通过格式塔原则利用空间，设计以用户为中心的简易界面。这些可以帮助你理解和控制视觉心理上的联系。

3、网页设计中的格式塔原则

格式塔是德文“Gestalt”的音译，”模式、形状、形式”的意思，它更多的是一个概念而不是一个词，它指出：

“整体不是各部分的总和。”

——Kurt Koffka

当单个单元以某种方式统一时，在我们看来就是一个整体。我们将元素看作一个整体，尽管它们各具特色。这个概念或理论从根本上适用于所有设计媒介:我们不把文本、颜色和形状看作单独的元素，而是把整个网页看作整体。同样的道理也适用于森林:我们看到的不只是一堆树，就像我们看海洋时看不到水滴一样。

格式塔原则描述了当特定的条款和条件被应用时，人类的大脑是如何感知视觉对象的。它帮助大脑创造视觉图像。因此，格式塔原则基于六个主要类别:

a、图形与背景

b、邻近性

c、对称和有序

d、相似性

e、闭合性

f、连续性

a、图形与背景

“图形”是直观且明显与背景区分的物体

                                                                      圣杯

最典型的例子是圣杯——两个镜像面孔之间的花瓶。当你第一次看到这张图片的时候，你的眼睛会立即被吸引到你注意到的最集中的视觉物体上，可能是相互对立的面孔，也可能是花瓶。当你的大脑在调整你的焦点时，背景或花瓶模糊不清，在那一刻，你的大脑直觉地在图像中呈现出负面或背景。

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

                                                               图形与背景的关系

有时，图形与背景之间的关系是稳定的，使得他们彼此区别开来。有时是不稳定的，这意味着图形和背景彼此难以区分。由于这种关系的模糊性，用户遭受感知困扰。

为了让你清楚地了解图形-背景关系如何影响网页设计，我们详细讨论几个示例。每个示例都集中在图形-背景关系的三个主要方面:你可以通过使用对比、方框和阴影为网页设计添加明确的视觉效果。这些技术用于区分颜色、大小和细节层级来区分内容，并为各自的焦点对象添加深度。

下面第一个示例中，Trellis 使用了有图形背景关系的主页横幅(具有明确CTA的图像)，其清楚地显示了细节层级、颜色和大小。

                                                               Trellis （图片来源）

页面中央的大草书文本，与背景中的图像相比显得很突出。白色文本对比灰度图像吸引注意焦点，使其可见。换角度来看，背景模糊，来突出图像上的文本。这些都表明，这里的文本被优先考虑为图形或正空间，而模糊的图像被用作背景或负空间，从而强烈暗示了图形和背景的概念。

接下来是方框中的内容。Ocean Health Index 巧妙地利用了方框内容，区分图形与背景。这是你在访问其网站时看到的:

                                                 Ocean Health Index （图片来源）

当你第一次浏览这个网页时，会先看到哪个图形?如果你问我，我会告诉你，它是右上角的白色主文本以及两个颜色、文字对比鲜明的方框。顶部粗体的白色文本显然就是这个图形。(注意文本在较暗的图像上是如何摆放的)下面的方框也是图形的一部分，因为它们与背景图像形成了对比。该图的第二个对比，是放置在框内的对比色文本。

背景使用微妙色调，以助突出图形，这是一个细节。这些方框也与背景图像重叠，使它们在图像上清晰可见。

一些网站还通过图形添加阴影来展示图形背景关系，表现图形置于背景之上的感觉。这是Seriously Unsweetened网页截图：

                                              Seriously Unsweetened（图片来源）

Seriously Unsweetened的登陆页面使用了多种技术来保持图形与背景的平衡关系；有明亮的颜色和阴影；背景使用白色，使得图形更容易显示在上面；在正空间中，图上的物体呈现出在背景“顶部”的错觉；主图内部添加阴影，这让我们注意到在主图内还有另外的图形背景关系，妙!

b、邻近性

邻近性是指页面中元素的亲密度。web页面不同元素可以进行组合，以建立更大的关联。除了相似之外，用户的脑海里也会自动匹配这些元素与其他页面元素之间的亲密度。

                                                             设计中的邻近性

从图像到文本，导航栏到web菜单，邻近性原则在网页设计中非常重要。当将类似的内容组合在一起时，它会将元素无缝连接，并为用户提供更好的视觉体验。

以下是Mashable网站导航中显示的邻近性示例：

                                                        Mashable（图片来源）

在上面的图片中，清楚地看到如何将同类别元素放在一起，来显示与主菜单间的关系。由于使用了颜色和大小字号文本，用户的视线会被自动吸引到主菜单栏下的子菜单栏。不同项目间利用分割线隔开，该分割线根据邻近性原则,用作关联和分隔项目的用户指南。

除了划定导航栏，基于网格的内容还符合邻近性黄金法则。亚马逊的产品列表就是最好的例子：

                                                 Amazon Products（图片来源）

如图所见，正空间中的类似产品使用留白进行分组和分隔。指导用户从类似的产品列表中挑选想要的。此外，闭合原则也在类似项目清单中起作用。

现在，我们来仔细看看Basecamp 网页表格，它显示了网页设计中邻近性原则的另一种情况:

                                                  Basecamp Web Form（图片来源）

可注意到表单是如何被划分为两个主要部分的:个人信息和ID生成。第一段暗指为最重要的部分，其次是次要的。两个部分的标题各不相同，如颜色和字体大小的差异所示。在这个网页表单中，接近性指示内容按重要程度进行信息分组。

c、对称和有序

对称性是指两个相对平面的精确反射或镜像。可以被看作是把一个物体二等分的平衡。现实生活中的对称包括等边三角形、圆形和正方形等几何图形。

                                                                对称与不对称

人类的大脑渴望在人脸上找到“平衡”，在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，比如图像，因为对称创造和谐，让观众在观看图像时感到舒适。

以下是HvD字体网展示的网页设计对称性的一个很好的例子：

                                                         HvD Fonts（图片来源）

这个网页不仅展示了典型的图形背景关系，还极好的展示了对称性。页面被四等分，文案使用相同的字体颜色和字号，每个部分沿用相同主题的灰度背景。你也可以注意到负空间不一定是白色的;它是背景中的图像。

对称性理念引出了另一个概念:不对称会让人感到困惑，网页设计中须谨慎使用。许多网站使用不对称作为间距的主要平衡元素，非常规的正空间与中性的背景相互平衡，反之亦然。根据不对称的概念，Xplode Marketing展示了不对称性独特的美学方式，令人赏心悦目。

                                                    Xplode Marketing（图片来源）

该网页利用视错觉和不对称性立刻抓住用户眼球。正空间物体以不同寻常的方式放置在负空间上，从而产生吸引力。色彩是两个空间和谐的主要标志，并为观众创造了一种自然的联系。左边的图形和右边的主导物（鹦鹉）也有很强的平衡。

d、相似性

接近性与相似性密切相关的原因是相似分组对象之间共享属性的性质。无论是颜色、形状、姿势、大小、方向或任何其他属性，当其中的一个或多个在邻近区域显示的所有对象中共享时，将建立连通性。

                                                             设计中的相似性

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

只需看看UrbanDecay这些产品列表：

                                                        Urban Decay（图片来源）

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

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

来看看 influenster 网页：

                                                    Influenster的首页（图片来源）

上例中，对齐的方框清楚地显示了相似性。虽然每个正空间中产品不同，但整个页面中一致的文案传达出相似感。相似的风格、布局和主题，给页面提供了完美的视觉效果。

e、闭合性

你是否曾遇到过看上去闭合但实际开放的画面?这是因为闭合性原则。我们的大脑倾向于“闭合”不完整对象中的间隙，并使用我们的视觉感知来完成图形，将其视为一个整体。

                                                                闭合性设计

正负空间紧密结合形成一个整体。最好的例子是设计内外负空间中隐藏的形状和形式，这就要求对设计内部的信息进行智能评估。在封闭空间创造性地使用正负空间，可以产生有趣却简易的设计。

看看下面Magu Kambucha的截图：

                                                     Magu Kambucha（图片来源）

此例中，可以看到闭合性保持了完整的图形-背景关系。瓶子和其后面的粗体文字显然是图形，背景是柔和的粉红色。闭合性在哪里?看到瓶子后面的文字了吗?你不能完全看到它，但仍然知道它是“Kambucha”。除了第一个“K”和最后一个“A”，其他半隐藏字母凭直觉完成，整个形式开始成形，意义也随之而成。朋友，这是一个很好的闭合性示例!

看一下Cult的截图：

                                                       CULT Website（图片来源）

虽然文本没有显示的很清楚，但我们很容易地读出CULT这个词。即使文案不完整，文本的排列和对齐使其易于辨认。

f、连续性

根据格式塔原则，连续性遵循模式通过引导眼睛遵循一致的路径，并在物体之间建立线性模式。最好的例子是通过正空间直线和负空间曲线来理解。两条线的颜色都表明这两条线互相弯曲，但连续性模式却表明相反的情况。

                                                               连续性设计

在上图中，尽管颜色减淡，但观众更倾向看到直线。这使我们相信连续性原则比色彩更能引导感知。这个概念在这两种空间中流畅地流动。当我们在负空间插入一个主题时，我们的眼睛倾向于在正负空间之间划一条区别线。

我们倾向于在设计中引入假想的连续性线，以引导我们的感知区分正负空间的差异。

我们来看看Crypton Trading网站：

                                                    Crypton Trading（图片来源）

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

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

                                                 OscilloScope网站（图片来源）

该网站利用连续性法则，将网站访问者带到工作室的360度视图中，在那里他们可以导航到所需的部分。

                                                  Cargo the movie （图片来源）

影片《Cargo》的登录页面也使用了连续性法则:它使用滚动导航让文本以线性运动的方式漂浮在网站上。由于logo是半可见垂直显示，所以观众必须向下滚动才能看到它的全貌。当页面向下滚动时，静态logo与平行文本块开始一起浮动。导航引导用户通过无干扰的不同层次的体验。

由于我们的眼睛通常遵循最平滑的路径，图形设计师可以使用这样的例子使他们遵循所需路径，并沿直线定位元素。

总结

本文中，我们讨论了关于网页正负空间的格式塔原则。还提供了一些真实的示例，让你清楚地知道如何使用简单而有效的技术来影响用户感知。这里的关键是使用这些原则来创建一个看起来大于其各部分之和的网页设计。

人类主要基于视觉感知来思考，根据关于网页正负空间的格式塔原则，我们倾向于看到更大的图景，而不是第一眼看到的单个元素。

在格式塔原则的帮助下，我们能够更好地想象如何在网页设计中利用空间来创建吸引人的作品。因为空间对于任何设计师来说都是一件错综复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样，你才能真正认识到空间在设计中的重要性、有效性和用途，并毫不费力地成为网页设计领域的有效贡献者。

原作者：Ayesha  Ambreen

https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/