在你的设计中使用白色空间（或负空间）_极简慕枫

空间是网页设计的基本参数，也是最被低估的一个。如果我们掌握了对空白区域的控制，我们就可以控制网页的一个微妙但定义的元素，并充分利用它。

 武汉企业网站

简而言之，空白是不同元素之间的间距，无论是在页面的实际部分之间，还是在字母之间的空间之间。在大多数情况下，我们使用空白区域（也称为负空间）来分隔内容，以便更轻松，更快速地扫描页面，而无需放入特定的分隔元素。

今天，我们将介绍如何在设计中使用负空间，并弄清楚它如何帮助您的设计保持整洁，整洁的感觉。

什么是白色空间？

正如我刚才所解释的那样，白色空间（或负空间）是不包含任何元素的不同元素之间的间距。为了进行比较，我们将空间称为正数。负空间实际上有助于塑造和定义积极空间。这可以通过观察下面的视错觉来证明。

你看到了什么？花瓶，还是两个面孔？如果你看到了面孔，那是因为在这个特殊的设计中，白色空间充当负空间，而黑色则是正面。我们可以反转角色并获得完全不同的视图，因为它们都在共同塑造图像。

这个例子试图得到的是你的负空间非常重要，因为它可以帮助定义位于正空间中的内容。不要将白色空间视为您没有为其创建内容的剩余位，而是将您的网站布局中的主要结构参与者。

白色空间也有两个级别。这些是宏观和微观白色空间，分别与核心元素之间的空间和较小元素之间的空间有关。

谷歌

正如您所看到的，谷歌在设计中是白色空间的大力倡导者。搜索引擎被广泛认为具有干净的设计，因为重点在于页面的主要目标，而没有对其他领域的大量奉献（与其他领域不同）。

Webdesigntuts +

我很欣赏Envato团队在这个网站上所做的设计工作。在标题，信用额度和段落之间有一个很好的，平衡的白色空间使用。

星巴克

负空间实际上不必是单个颜色块。在摄影中，任何不在焦点的区域都可以被归类为负空间。在这个例子中，背景中没有焦点将你的眼睛吸引到那个杯子上。（而且，星巴克没有更改他们的徽标吗？）

当一个人设计时，他的焦点通常是积极的空间。几乎潜意识的是负空间随之而来，实际上有助于塑造和塑造积极空间如何布局然后阅读。然后可以调整此属性以定制体验，以便更好地阅读和与积极空间进行交互。

比喻

假设你在商店里。如果您因过度拥挤的过道而无法四处走动，并且销售助理不断提示您提供特别优惠，那将是一种舒适或愉快的体验。有太多的东西要看，你既没有时间也没有耐心找到你最初想要的东西。这不好。

这是Apple商店为何如此出色地运作的关键特征之一。它们非常简约，并且产品本身也有大量的车间。但是，如果你冒险进入另一家PC商店，你会被无尽的机器通道消耗，这些机器的外观和功能都不同。根据我的经验，极简主义的购物体验更加愉快。

现在，这与网页设计有什么关系？实际上很多。我们不会上网寻找在您不关心的大量毫无意义的内容之下搜索特定字符串的任务。负空间通过在将注意力吸引到页面焦点的同时保持设计整洁而有助于解决这两个问题。

负空间增加了可读性

你可能会问，我为什么要费心确保我的负空间是正确的？

网络上的文字与任何其他平台上的文字不同，我们都会定制我们的设计，以便最终用户可以轻松阅读我们的内容。与报纸不同，在网络上尝试和破译您感兴趣的内容实际上是令人沮丧的。由于我们不得不首先仔细检查网页，以区分彼此之间的元素，因此太重而无法解决的杂乱设计无法提供简洁易读的体验。白色空间在元素之间存在缓冲区，因此我们更容易找到我们关心的内容。

我们也可以将自己引导到我最近关于排版的文章中，在那里我看了八个有助于良好网页排版的重要因素。通过破解空间元素（例如前导和字母间距），我们可以提高易读性。在这个级别工作意味着我们正在使用微白空间。

简而言之（与前面提到的不同），白色空间将所有东西都空间化，为元素提供了自己的空间，被识别并易于阅读和交互。

网页设计中的负空间

负空间用于许多创意领域，尤其是摄影。在摄影中，负空间是任何不用于容纳主题的空间，这与它在网页设计中的作用相差不远。如果我们看一下Apple的网页设计，他们自然会同时使用宏观和微观空白来填充元素，并在网页上给它们自己的位置。

Apple的设计使用宏观和微观白色空间，由两种不同的颜色定义，覆盖在下面的图像上。这样可以实现干净，优雅的设计，并且可以优雅地间隔开。您可能不知道，但您对内容的关注将受到白色空间区域内容不足的影响。我们的注意力范围被证明在网络上更短，因此杂乱，沉重的印刷设计并不是传递到虚拟设计领域的趋势。

当然，空间实际上不一定是白色的。任何类型的与焦点内容不竞争的空白空间都可以归类为“白色空间”，如下面的设计所示。

精致和奢华

在印刷设计中，您可能会注意到您的客户希望他的所有最后一块房产用于宣传他的产品。然而，在设计虚拟土地时，这是一个不同的故事。通过创造产品比它所居住的房地产更重要的感觉，白色空间可以为通用网页增添一种精致和奢华的感觉。它可以通过使用“少即是多”原则使产品看起来更奢华。当你看到Apple的网站 - 一个我们认为属于更高端计算终端的品牌 - 几乎没有必要，因为产品不言自明，尽管还有一些简约的标语。这种现象在高级健康和健康网站中也很受欢迎，其中需要很少的内容来传达所宣传的产品或服务的一般概念。

通常，较便宜的品牌似乎尽可能多地将信息塞入空间; 不同的市场，不同的最终用户。例如，HP和Apple网站突出了这一点。苹果公司非常自信，让自己的产品为自己说话。如果您想要产品，请浏览一下，如果不是这样的话。另一方面，惠普网站采用更繁忙的向上销售和交叉销售，推广优惠并将廉价定价推向用户的心中，并试图展示您可能感兴趣的各种替代产品。

改善负空间

到目前为止，您应该认识到负面空间是什么以及如何在设计中识别它。如果您是这个领域的新手，当有人建议您改善空白区域时，您可能会感到困惑。如果你回答过一些事情，那就不会让我感到惊讶，“这只是空间的左边”。嗯，事实上，通过调整一些常见问题可以大大提高你的负面空间，使其存在更加有效。

边距和一致间距

不一致的间距可能是最大的问题之一，但可以轻松调整。当你的元素周围的填充相等时，一切看起来都更平衡，整体看起来更好看。如果我们看一下下面的例子，设计（我们的姐妹网站，ActiveTuts +的设计），右边的真实设计看起来好多了，因为元素之间的填充更加一致。

边距也不应使设计感觉断开。太大的边距可能会破坏元素之间的关系，降低设计中的统一感。巨额利润也会浪费您的房地产，可能会降低您的工作效率。

微级间距

如前所述，微级别间距是页面上最小元素之间存在的负空间，就像段落中的字母一样。

行间距可以极大地提高文本正文的易读性，是您精心设计的排版案例研究中的关键决策。行间距或行距是文本行之间的微白空间。通常，领先的越大，用户在阅读时将获得更好的体验，尽管太多会破坏统一性并使设计断开连接。

我在Tuts +上的几篇不同的文章中使用了下面的图片，我想再次指出它。右侧的示例具有更多的前导，并且当在更广泛的文本选择中使用时，应该使其更容易阅读。

同样，字母间距可以有助于使用良好的负空间。狭窄的字母读起来并不是那么有趣，但也不是你可能会误认为单个单词的字母。再次，它只是找到完美的平衡。

分析每个项目的不同

在设计和定制您的网页设计时，请使用一种新鲜的头脑来做到这一点，这种头脑不会受到您上次所做的污染。每个项目都是不同的，因为没有预定义的指导方针或一致的数学，您需要使用新近精炼的眼睛分别分析每个产品。

最后的想法

负面空间，正如我在本文中多次提到的，两个整理者都设计并帮助塑造和吸引焦点到页面上的内容。回到购物比喻，没有人想要工作以达到他们想要的结果。相反，他们希望将它放在一个容易识别的盘子上，不会被他们没有要求的无意义的配菜干扰，也不想要。

回顾一下，我们还可以通过在大多数情况下保持一致性来分析和细化边距来改善负空间使用，并注意排版和微观间距。理想情况下，您还应该以不同方式对待每个项目，以便识别设计中的最佳位置。

除了干净，整洁的网页的实际好处之外，负面空间可以通过允许内容“自己说话”而不会出现看起来便宜的重大入侵，从而创造出精致和优雅的感觉。

感谢您潜入一个有趣的旅程。希望你已经学到了一些东西（我当然有）关于设计中负面空间的重要性，也许在你试图将一百万个荒谬或不必要的对象推入你的页面之前要三思而后行。在我离开你之前，最后一个提示：尝试五秒测试（查看网页五秒钟并记下你记得的内容），以确认你的设计整洁并且使用其白色空间。

武汉企业网站