什么是空白？

空白通常是指负空间——视觉网页设计元素（如图像、徽标和文本）周围和内部的未标记区域。下面举例说明不同类型的空白：

页面上的宽边距

文本块之间和每个字母之间的空格（也称为排版中的字距调整）

图像内部或周围的负空间

白色空间在 20 世纪上半叶开始流行。从那时起，艺术家和设计师已经认识到它的重要性和多功能性，并定期将空白融入他们的作品中。

在设计网站时，留白可以平衡一个视觉区域，将访问者的视线引导到某些区域，甚至可以提升用户体验。它也不必是白色，甚至是纯色。

在下面的网站模板示例中，渐变背景（一种流行的网页设计趋势）被认为是白色空间，尽管它有颜色，因为它构成了主题。网站标题上导航菜单链接之间的空格也是空格：

在网页设计中使用留白有什么好处？

虽然空白对查看者来说可能是“不可见的”，但它在用户体验中发挥着重要作用，对网站访问者和其背后的品牌都有好处：

增强易读性：在字母、单词和行之间留有适量的空白，访问者可以快速阅读和理解您的内容。

创造和谐：当网络感觉嘈杂和杂乱时，一个平衡良好且设计简约且带有空白的网站可以帮助访问者感到安全、舒适和专注。

强化品牌基调：作为设计元素，留白可以传达品牌的个性和风格。

帮助组织：在设计网站时，使用空白可以帮助加强视觉层次。负空间有助于在页面内容之间创建有组织的流程，从而提高网站的可用性。

促使访问者采取行动：空白区域可以突出关键号召性用语 (CTA)，指导访问者安排约会、购买产品或联系以获取更多信息。

在网页设计中使用空白的最佳实践

无论您是自定义网站模板还是从头开始构建网站，在向您的设计中添加新内容时，请使用以下空白最佳实践：

01.同时使用微观和宏观空白

微观和宏观空白在您的网站上都有不同的用途。

微空白是指网页上较小元素（如文本）周围的空间。实施微空白以增加可读性。即使是微空白区的最小变化也会降低或提高易读性。

宏观空白是指网页设计的较大空间，例如，单个页面上不同部分之间的空间或照片库中的图像。在您的网站上实施宏空白，通过提高可见性和组织内容来改善用户体验。

02.不要过火

正如我们所见，空白可以增强您的网站设计。但是决定使用多少可能很棘手。为确保每次使用空白都有其用途，请问自己以下问题：

这个空间看起来是不是太空了？

访问者能否轻松阅读并理解他们所看到的内容？

访客的眼睛应该聚焦在哪里很明显吗？

留白是否会干扰或增强周围的元素？

理想的空白量是多少？除了您的个人设计偏好之外，还有足够的空白空间来提高访问者的注意力并增加参与度，而您的网站（和品牌）不会显得草率或稀疏。

3.用空白管理视觉层次

网站的视觉层次是指访问者的眼睛在页面上所遵循的路径。杂乱的网站布局使访问者很难知道要关注哪些细节或下一步该去哪里。

空白突出页面中最重要的部分，为访问者清除视觉层次结构，增加他们对您的品牌体验的信心和满意度。

下面的示例包含四个可以以多种方式堆叠和间隔的服务块。留白、排序和分层的正确组合澄清了视觉层次，使访客更容易阅读每个服务描述并完成预订。

4. 密切关注 CTA 周围的空白区域

最有用的网站都有一个主要的号召性用语按钮：对于餐厅网站，它可能是“进行预订”。对于电子商务企业，它是“立即购买”。对于博客，常见的 CTA 是“订阅”。

您应该用空白围绕您网站的 CTA。这并不意味着您应该隔离文本或按钮，而是添加足够的空白区域，以便访问者可以轻松找到并单击 CTA 而不会分心。

号召性用语按钮并不是唯一受益于空白的设计元素。想想网站表格：如果访问者无法轻松找到联系方式或结帐表格，他们可能会完全放弃注册过程。

5.别忘了手机

由于在较小的屏幕上可以使用的空间更少，空白也极大地影响了移动网站。

例如，以下面的“关于”页面为例。大标题“关于我”下面有两个段落。在桌面上，由于页面的边距很大，这看起来不错。

但是，当您切换到移动设备时，请注意边距是如何收缩的。从移动设备查看网站时，这些段落在薄屏幕上可能看起来太长且令人生畏。

解决方案？在移动设备上，首先要考虑用户的体验。为了便于阅读，请增加字体大小或添加额外的分段符。然后，开始尝试使用空白来增强您的移动网站的外观。