设计中的负空间：技巧和最佳实践

本文考虑了负空间在 Web 和移动 UI 设计中的重要性：检查界面中负空间的定义、技巧和示例。

by Marina Yalanska

我们常常认为沉默、空虚或无色对我们不利。我们认为它们是理所当然的，而不认为它们是对比的坚实基础。只有沉默才让我们知道声音的价值。只有空白才能让我们了解我们想用什么来填充它。只有无色才能让我们在舞台上呈现出更亮更深的色彩。只有空气的缺乏让我们知道它是多么重要。今天我们谈论的是设计中的空气。让我们讨论负空间。

什么是设计中的负空间？

基本上，负空间——或通常所说的留白——是布局中留空的区域。它可能不仅围绕您放置在布局中的对象，还可能存在于它们之间和内部。负空间是页面或屏幕上所有对象的一种呼吸空间。它不仅定义了对象的界限，而且还根据以下内容在它们之间建立了必要的联系。格式塔原则 并建立有效的视觉表现。因此，留白是一个正确的设计元素，对积极的用户体验有很大的影响。“白色空间就像一块画布：它是将设计中的元素结合在一起的背景，使它们脱颖而出”——Mads Soegaard 说交互设计基础。

平面设计中的负空间经常出现在徽标、插图、海报和创意字体中，它成为视觉呈现的活跃部分，使关键对象更具表现力。例如，在博客插图 下面我们可以看到背景元素（月亮）如何起到对比负空间的作用，使宇航员看起来更加生动和动感。

在网站和移动应用程序的 UI 设计中，负空间是高可用性和 适航性的界面。布局元素周围的负空间也称为宏空间，而它们之间和内部（用于字母和笔画元素）的空间也称为微空间。

空白空间和负空间有什么区别？

简短的回答：没有区别。这些术语完全可以互换。

为什么用两种不同的术语来称呼这种现象？如果你追根溯源，很容易回答。“留白”一词来自印刷设计，因为当时页面大多是白色的，所以留白是字母或符号周围、内部和内部以及插图周围的一切。今天，在设计中使用，这个术语与白色无关：它是关于空的空间而不是颜色。术语“负空间”来自摄影：照片上拍摄，他们定义正空间（物体吸引注意力）和负空间（背景）。

重要的是要记住，网页设计中的负空间不必只有白色——您可以使用任何颜色、纹理、甚至图案或背景图像。

为什么负空间很重要？

想象一下自己走进一个挤满了各种员工的房间。架子、盒子、袋子、成堆的书和衣服，桌子上堆满了各种各样的东西。你能专注于这样的条件吗？你现在真的需要所有这些东西吗？你能找到你需要的东西吗？需要多少时间？嗯，这与用户打开页面或屏幕时的感觉非常相似，而没有一个重要的负空间空气。

客户和一些设计师可能都希望在一个页面或屏幕上放置尽可能多的元素和功能，认为这会拯救游戏并且对客户有帮助。但这是一个错误：事实上，用户并不是一下子就需要所有东西。更重要的是，没有足够空气的太多元素会显着提高分心的程度：信息和交互元素过载，其中大部分是他们不需要的，用户将不得不努力找到他们真正需要的东西。有如亚伦沃尔特提到，“如果一切都引起观众的注意，那就什么也听不见”。

在设计中对负空间采取深思熟虑的方法的好处中，我们可以提到以下几点：

• 它支持页面的可扫描性
• 它增强了视觉层次
• 它使元素之间的联系可见并自然感知，无需额外的手段，如表格、框架、箭头
• 它在页面上提供足够的空气，使其不会感到混乱
• 它将用户的注意力集中在核心元素上并减少分心的程度
• 它为页面增添了风格和优雅。

例如，让我们看一下 大城市指南。 设计师在这里应用了一张背景照片，它在宏观层面上起到了负空间的作用。更重要的是，照片的元素和主要副本元素的字体是相互关联的：它使负空间成为设计的活跃元素，并使页面具有统一的和谐外观。

负空间影响的核心因素

正确使用负空间可能会对以下用户体验因素产生相当大的影响。

可读性和易读性：如果元素之间没有足够的空间，它们就会变得难以阅读并需要额外的努力。这可能是导致眼睛和大脑紧张的一个重要原因，尽管许多用户无法表述问题。适量的负空间，尤其是微空间，解决了这个问题，让过程更自然。所以，负空间直接影响效率排版在页面或屏幕上。在音乐中，停顿与声音的作用相同。在阅读中它的工作方式相同：正确放置空格使文本更易于阅读。

品牌：如果您查看任何徽标指南，您会发现设计师在其周围定义了适当的负空间量，以便正确感知。打破这些规则对视觉表现有害。

资源的性质：负空间对所谓的设计基调有影响。例如，新闻资源在主页上的空白空间将少于博客，以设置情绪并理解平台上充满了动态显示的数据。

注意力比：足够的负空间增强视觉层次感，让用户专注于关键元素。

基于此，负空间在以下方面对视觉感知产生影响：

• 复制内容
• 图形内容
• 导航
• 同一性

让我们看几个例子。这是 The Big Landscape 的主页。没有任何视觉框架和桌子，由于负空间的平衡利用，设计师建立了强大的视觉层次并允许用户在几秒钟内扫描各种内容块。这样的设计看起来井井有条，但轻盈通风。白色背景和布局安排使其看起来类似于杂志页面，和谐地向读者介绍这本在线杂志的目标和性质。

另一个例子是移动应用程序 上应用：这里的负空间是全黑的，与界面的核心元素形成了鲜明的对比。对于整个屏幕，只使用了一条直线。尽管如此，由于空白充足且没有干扰物，所有布局看起来井井有条且可读性强。它还支持造型师的极简优雅，有利于审美满足。

需要考虑的陷阱

1. 令人困惑的术语。

当您与可能不太熟悉设计术语的客户交谈时，请确保在描述设计解决方案之前解释负空间的含义。对于非设计师来说，可能很难理解为什么“这个屏幕需要更多的空白”看着全黑的背景和负空间可能与一些不好的东西有关——事实并非如此。所以，在使用这些术语之前，不要忘记在所有的 i 上加点。

2.希望减少负空间以在页面或屏幕上放置更多。

这不仅发生在 UI 设计中：您可能会听到室内设计师如何建议为希望在一个房间里有 4 个书柜而不是 2 个书柜的客户节省一些空间，或者一位建筑师解释为什么需要在建筑物周围留出空间来制作它看起来和服务更好。更重要的是，有时通过更好地利用负空间来重新规划元素会产生房间或建筑物比实际更大的错觉——同样的情况发生在你必须放在移动屏幕或网页上的数据上。决定什么更重要，什么是次要的，什么可以消除，以便直观地导航用户。负空间将有助于使屏幕或页面看起来和谐，即使它充满了信息和功能。

3. 优先级差。

如果没有经过深思熟虑的信息架构支持界面，那么负空间并不是万能的。在考虑设计外观之前，你必须决定用户将如何找到实现目标的捷径，如何通过应用程序或网站解决他们的问题。在你做出有风格的外观展示之前，计划这条路线；否则，即使是视觉元素（包括负空间）的最佳平衡也无法有效发挥作用。

用户体验 | 用户界面 | UI | UX/UI | 设计网页设计

内容转载自 5PLUS设计师平台