留白的力量

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

“留白被视为一个活跃的元素，而不是被动的背景”- 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专业博客