如何使用负空间创建令人惊叹的网站

网站和应用程序具有必须共存的各种视觉元素——按钮、列、图标、图像、线条、媒体和排版。 所有这些元素都需要一个画布（空白网页），而那个画布需要空白空间，即负空间或空白空间。 没有它，观看者的眼睛无法处理它所看到的东西。

订阅我们的 YouTube 频道

什么是负空间？

正空间是作品中充满主题或其他焦点的部分。 负空间占据了其余部分。 它可能是空白的或白色的，在颜色或设计上形成对比，一个微妙的背景图像——无论它是什么，它都会让人感觉空虚而不是饱满或杂乱。 然而，仅仅因为负空间是空心的，这并不意味着它不重要——它会引起人们对正空间的关注，有时甚至从不同的角度来看，它本身也会变成正空间。

负空间的例子

负空间——及其对应的正空间——存在于各种艺术和设计中，包括网页设计。 让我们看看联邦快递的标志。 你看到紫色和橙色的字母，对吧？ 但是，在空白处有一个箭头：

隐藏的联邦快递箭头以类似于绘画的方式使用负空间——轮廓的创建就像正空间的创建一样。 在这样的例子中，负空间不是仅仅因为它是正空间不存在的地方而创建的。

NBC孔雀做同样的事情：

虽然负空间的重点通常是将重点放在正空间上，但它有时会成为巧妙设计的重点。 这是另一个例子——看看狼的牙齿是如何形成一棵树的：

有一个术语：图形背景反转。 它基本上意味着前景色和背景色交换位置以改变视角和解释。 如果您对此感兴趣，请查看 MC Escher 的作品，尤其是他的变形版画。

负空间在摄影中扮演着同样的角色。 看看我为我表弟的儿子 Julian 拍的这张照片。 黑色的背景把所有的注意力都集中在他身上：

你可以在自然界中找到负空间，比如花瓣之间的空间，在功能设计中，比如通过咖啡杯把手的空间。

我们也在我们的网站上使用它。 我们的主页有大量信息，但由于我们将其间隔开的方式，它并没有太多。 即使背景有一些颜色和一些形状可以添加到设计中，它也不会分散注意力——它仍然给人一种令人愉悦的空旷而不乏味的感觉（而且它是品牌的）。

负空间的类型

有几种类型的负空间。 微观和宏观是指构图中负空间的大小。 主动和被动指的是这些区域为用户做什么。

微观与宏观负空间

微负空间是指元素之间的小空间——文本行之间的间距或导航菜单中链接之间的区域。 这会影响内容对读者的可读性。 如果行与行之间没有足够的空间或文本超出边距，用户将很难阅读和理解它。

宏观负空间较大； 它是布局周围的空间以及大型设计元素之间的空间。 一个例子是内容块之间的区域。 容器的空部分容纳了整个设计。

具有少量宏观负空间的网站往往具有很高的信息量。 具有大量宏观负空间的网站通常是极简主义或展示奢华的。 第一个例子是小宏观负空间，第二个例子是大宏观负空间：

主动与被动负空间

积极的负空间增加了页面结构，改善了内容的流动并引导用户去你想要他们去的地方。 被动负空间改善了网站的外观，但不会让用户通过任何特定的流程。 当空间偏离中心和不对称时，它通常是活跃的。 当它平衡和对称时，它通常是被动的——它唤起较少的运动，这不会强迫用户以某种方式看待它。 这是一个主动负空间的例子：

这是被动负空间的一个例子：

负空间和构图

负空间对于构图很重要，原因如下：

• 您需要查看构图中的空间，以保持其匀称。
• 它还允许您处理设计中不同对象之间的关系。
• 在网页设计中，它可以发挥重要作用，让人们留在您的页面上。
• 一个元素周围的空间大小决定了该元素有多少焦点——更多的空间意味着更多的焦点。

选择正负空间的正确平衡

您使用多少消极和积极的空间将取决于您想要的外观以及您想要在观众中唤起的东西。

• 如果你想要一个美观的设计，你可能会使用相等的负空间和正空间。
• 对于故意显得鲜明和极简主义的设计，您会选择更多的负空间。
• 为了看起来压倒性和面对面，您可以选择更积极的空间。

设计师必须在空间上发挥作用，直到他们为品牌和网站的预期目的取得适当的平衡。

用负空间整理文本繁重的网站

当您必须将大量信息挤到一页上时，找出放置负空间的位置变得棘手 - 特别是如果该信息是大量文本，可能会很快看起来杂乱无章。 HostingDude 是太多积极空间的一个很好的例子：

另一方面，《纽约时报》已经想出了如何在不让你的眼睛发疯的情况下用他们的新闻包装他们的主页，这一切都归功于间距（和颜色选择）。 虽然宏观空间的空间不大，但他们利用了微观空间：

尽管 HostingDude 上的元素更接近，但由于它们之间的额外空间，纽约时报网站上的元素看起来更加统一。 眼睛可以更轻松地理解页面，从而使其设计更完整、更有凝聚力。 当眼睛有机会休息时，它能够更好地吸收所看到的东西。 负空间认为少即是多。

用负空间分解文本

您已经看到设计师如何创建美观且文本丰富的主页，但是较长的文本块本身又如何呢？ 将短段落与长段落混合、加粗标题、创建列表和在整篇文章中添加媒体都有助于在单词周围建立负空间，使其更吸引读者。 外观很重要，即使是复制品，伟大的设计师也会考虑到这一点。

向客户解释负空间点

网站设计师可能会与客户就负空间发生冲突。 客户看到了更多的空间来挤入重要的赚钱信息。 他们觉得空白是浪费空间。 另一方面，设计师看到眼睛实际吸收已经存在的信息所需的视觉冲击。 他们知道网站上的所有空间都很重要，即使是没有内容的空间。

这是模型和原型制作工具派上用场的地方。 向客户展示他们网站的两个版本，一个有令人满意的负空间，另一个是充满正空间的。 让他们并排查看网站，并让他们玩弄这些网站。 我的猜测是，他们会很轻松地浏览设计良好的网站，而对设计不佳的网站感到迷失。

包起来

网站有很多不同的元素，如果你想让这些元素和谐相处并吸引观众，你需要在它们周围留出空白。 您使用的空白量及其运作方式取决于 (a) 您的品牌和 (b) 您希望用户采取的行动。 您也可以通过白色空间获得创意，例如通过反转颜色或使用负空间绘制以有趣或令人瞠目的方式定义它。

无论你采取什么方法，空白区域都应该是平衡的——不过，这并不一定意味着对称。 相反，这意味着元素存在于页面上而不会相互竞争，同时吸引您希望它们拥有的注意力类型。 对于浏览者来说，平衡意味着能够在浏览网站时不会感到困惑或不知所措。

在您的网站上尝试留白。 添加一些，取出一些。 减少宏观和增加微观，反之亦然。 测试某些元素周围或多或少的空白如何鼓励用户采取行动。 留白的美妙之处在于它是一种艺术技巧，这意味着没有硬性规定。

设计旅游网站？ 您可能会使用大量的宏空间。 查看我们的旅游网站 Divi 儿童主题综述。

精选图片来自 StockVector / Shutterstock.com