留白(或“负空间”)是一个页面元素之间的空白区域。尽管许多人认为这是在浪费宝贵的屏幕空间，但留白是设计中必不可少的元素。

“留白被视为一个活跃的元素，而不是被动的背景”- Jan Tschichold

今天，我将介绍如何在你的设计中使用留白来给人一种干净整洁的感觉。

留白和负空间

“负空间”一词源于传统艺术，它用来更精确地捕捉物体的外形。实际上，空间并不需要是有色的，任何与焦点内容无关的空白空间都可以被归类为“留白”。由于与实际的颜色没有真正的联系，术语“留白”和“负空间”可以互换。

 ALT：构成至上主义: 飞行的飞机 。-梅尔魏契。“负空间”是组合元素之间的空间。

图形用户界面中的留白

与传统艺术一样，图形用户界面中的对象也需要负空间——文本、按钮、图标和其他对象需要有自己的一席之地。所有好的用户界面都会适当地留白且从上到下融合到所有页面元素中。GUI中的留白元素有:

页边的空白，边框的填充及元素标签外部范围的区域 图形和图像的距离 文本内容中的行间距和字母间距，及列间距

页面上的留白与UI元素占用的空间一样重要，因为即使是留白也可以达到想要的效果，并支持视觉完整性的布局。留白有4个主要的功能:

1.易于理解

留白应该使扫视和阅读内容变得更容易及可预测。

优先考虑易读性和可读性

文本之间的留白很重要，因为它有助于定义页面内容本身。你应该优化你的内容使其易读(你能更好地分辨字母和单词)和可读(你能更好地扫视内容)。

威奇托州立大学的一项实验室研究证实，增加的留白实际上提高了阅读理解能力，尽管它可能会降低阅读速度。正如德米特里·法耶夫所指出的:

正确使用段落之间的留白及左边和右边的页边距可以提高对内容20%的理解力。

在优化文本内容时要注意的两件重要事情是段落间距和行间距(每行之间的留白)。行间距可以极大地提高正文的可读性。一般来说，间距越大，用户在阅读时就会有更好的体验，虽然间距太多会破坏统一，使设计不连贯。当然，你需要在两者之间进行权衡。

   ALT：左:文本之间靠太近，缺乏留白让读者看起来不适。右:良好的间距有助于可读性。图片来源:苹果

2.明确关系

整个布局是由各小部分组成的。内容关系由周围的留白定义。留白作为一个视觉线索。

相关元素的分组

在观察人们如何组织视觉信息时，完形心理学家建立了近距离法则，该法则认为靠近彼此的对象看起来是相似的。

ALT：近距离法则规定，近距离的对象将作为一个“单元”出现，即留白空间作为视觉线索。

在GUI的背景下，这意味着邻近的对象将显示为一个“单位”。例如，在Web表单的上下文中，将标签靠近相关字段放置以创建单个单元是一个好的想法。

ALT：当标签被放在与他们相关的领域更近的时候，信息就会更加清晰地传达出来。

3.吸引注意

许多应用程序和网页在没有足够的展示空间的情况下，会有太多的元素和信息被夹在一起。

ALT：凌乱的界面承载给用户太多的信息。尤其是在没有视觉层次的情况下，一个凌乱的页面对用户没有吸引力，也不会让用户想阅读内容。

如果凌乱的界面承载给用户太多的信息，那么减少凌乱会提高用户的理解能力。通过消除干扰，你会迫使用户只关注眼前的东西。

引导用户关注相关内容

距离和注意力之间有一种关系——距离越大，也就越吸引注意力。缺乏其他元素只会使现有元素更加显眼突出。利用留白来吸引你的眼睛进入某些页面元素。由于屏幕上没有其它东西可以吸引人们的注意，所以在某一特定的内容部分上额外的填充可以将用户的注意力转移到该区域。

一个对象周围的留白越多，它就越吸引人的眼睛。

ALT：正如上图你所看到的，Mailchimp在他们的设计中是留白的主要倡导者。当快速在Mailchimp的主页浏览时，很明显，“免费注册”按钮几乎立即吸引了你的注意。

创建视觉层次结构

当适当地使用留白时，它允许页面创建一般的流程和平衡，这有助于传达设计的意图。

作为设计师，我们有责任创造可用的通讯工具。

留白可以支持整个层次结构。它可以是对称或不对称。对称留白创造了记忆和和谐，而不对称吸引了人们的注意。不对称留白非常适合于将人们的注意力吸引到页面上的某个特定区域或特定元素上。当一个元素使用不对称的留白时，它会比周围的其他元素显眼。

ALT：当一个元素使用不对称的留白时，它会比周围的其他元素显眼。

4.创造奢侈的感觉

尽管留白通常被认为是提高用户体验的技术，但它也可以用于纯粹的审美目的。设计师使用留白来为高档品牌创造一种优雅的感觉。伴随着印刷和摄影的敏感使用，慷慨的留白在奢侈品市场上随处可见。通过创造一种感觉，即产品的价值比房地产更重要，在一个通用的页面中，留白可以增加高雅和奢侈的感觉。

让产品为自己代言

ALT：时尚界在他们的营销材料中使用了大量的留白来告诉读者他们是复杂的，高质量的，而且通常是昂贵的。

结论：

留白不是一个空白的画布，它是一个强大的设计工具。留白可能很难掌握:它的应用是艺术和科学。真正了解应该使用多少留白来创建好的布局，需要大量实践。你设计得越多，学到的就会越多。

原文作者：Nick Babich

原文链接：http://babich.biz/whitespace/

更多设计类相关干货（文章及经验教程），尽在：UI/UX专业博客