如果您不是设计师,请确保您的网站看起来完美无瑕。使用高质量的主题可以走很长的路,但如果你想要最好的结果,你还需要学习一些基础知识。这包括理解“空白”设计的概念。

留白顾名思义,尽管看起来很简单,但它是任何视觉设计的重要组成部分。例如,过多的内容会使页面看起来空白,而过多的内容会使页面显得杂乱无章。另一方面,取得适当的平衡可以对网站的外观和可用性产生重大影响。

空白简介

空白是在许多上下文中使用的通用设计术语。这些包括印刷、美术和(当然)网页设计。即使您以前从未听说过这个短语,您也可能仅从名称中就知道它的含义。

看下面的页面:

这个主页显示了一张图片,一个标题和一些文字,这些都是页面的内容。内容周围的“空白”称为空白。

当然,重要的是不要从字面上理解这个术语。空间实际上不必是白色的,它可以是任何其他背景颜色(甚至是背景图像或设计)。它只是页面的空白部分。因此,它有时被称为“负空间”。

很容易将页面上的空白视为无关紧要。但是,从某种意义上说,每个页面的空白与其分隔的内容一样重要。让我们谈谈这是为什么。

为什么留白是一个重要的设计概念

当您构建一个网站或开始一个博客时,您可能会尝试在每个页面上放置尽可能多的内容.毕竟,您想与读者或客户分享很多东西。所以很容易陷入“越多越好”的心态。

但让我们看看当我们将这种哲学推向自然的极端时会发生什么:

这个页面几乎没有空白,因此受到影响。它看起来非常杂乱无章,很难找到您要找的东西。大多数访问者很可能会在到达此类站点后立即离开。

虽然这可能是一个典型的例子,但页面使用的空白空间不足是很常见的。这个网站也很好地说明了这一点:

p>这里做了比较少的工作,但是元素之间的压缩关系还是太紧了。这使页面看起来势不可挡(当然,颜色和视觉效果的选择也无济于事)。

这里的要点是,在您的网页上使用足够的空白是使它们既美观又易于浏览的关键。元素之间有足够的空白也被反复证明可以提高阅读理解力并对整体用户体验 (UX) 产生积极影响。

当然,你也可以将这个概念推向相反的方向。太多的空白会让你的设计显得空洞、脱节和不专业:

同时,谷歌的首页几乎是空白,效果很好:

这只是显示对于任何给定网页有多少空白是“正确的”,具体取决于其目标和包含的内容类型。在构建或重新设计您自己的网站时,首先要在负空间和占用空间之间找到完美的平衡。

如何在 Web 上有效地使用空白设计

正如我们所指出的,过多或过少的空白都可能成为问题。但实际上,问题几乎总是忘记在网页上的其他元素之间使用足够的负空间。这就是为什么空白设计主要围绕使用空白来平衡内容元素。

更具体地说,实际上有两种类型的空白。

微间隙

“微间隙”是指文本行、网格或图库中的图像、菜单链接和其他此类元素之间的小间隙:

这个空间很重要,确保访问者 能够阅读页面上的文本并将元素分开以表明它们是不同的是至关重要的。在大多数情况下,页面上的所有内容都应该至少包含一点微空白。

它也可以被认为是边框或边距,并且通常在连续使用时最有效。例如,这意味着在每行文本之间使用相同的间距,并在所有图像周围包含相同宽度的边框:

宏空白

如您所料,要考虑的另一个方面是“宏空白”。这些是页面各部分之间、内容块或侧边栏周围的较大空白,与主要内容分开的页眉和页脚:

宏空白帮助访问者了解您网页的结构。它可以快速显示一个部分的结束位置和另一个部分的开始位置。此外,它确保可以轻松区分导航等关键元素。

根据经验,一个元素与另一个元素的差异越大,它们之间应包含的空白就越多。它们之间负空间较小的部分将被视为更密切相关。另一方面,较大的差距表示切换到新类型的内容或功能:

最后,空白也可以用来帮助突出页面上最重要的元素。例如,大多数网站至少有一个号召性用语 (CTA)。这些是您希望访问者采取的重要步骤。例如,这可能意味着单击购买按钮或填写订阅表格。

用大量空白围绕 CTA 元素是吸引访问者注意力的最佳方式之一。当 CTA 本身也通过独特的颜色和设计来区分时,这一点尤其有效:

在页面上实现适当的空白平衡可能需要一些工作。然而,这是值得的。相信自己的眼睛并让测试人员重新审视您的页面也很重要。

此外,如果您无法确定您的活动网站上是否包含足够的空白区域,您可以使用热图工具来分析访问者行为。如果您看不到与导航和 CTA 等关键元素的交互,您可以从中获益。在空白设计方面,少即是多。

结论

据说在音乐中,音符之间的沉默与声音本身一样重要,因为这是塑造和区分这些声音的因素。同样的原则也适用于您的网站——内容之间的间距比您最初预期的更重要。

在您的网站上使用空白设计原则时,平衡是关键。太少的空白会让你的页面感觉混乱和混乱,而太多又会导致结构不清晰。为避免这些问题,您可以策略性地使用负空间来显示紧密相连的元素,以及被认为独立但不同的元素。