留白是一个活跃的元素，而不是被动的背景。它是界面设计中最宝贵的资源，页面上的留白，虽然经常被忽视，但它跟UI元素所占用的空间一样重要。

对于UI设计是否还是处于一知半解，没有头绪，处于迷茫的境界呢？
这都不是问题，希望想学习的你，不管是什么基础，或者是想转行都可以加群，期待你的加群一些学习【667576606】直播课教学

关注【ui179179】公众号获取最新软件安装

感谢您的关注 期待与您一起进步！加油

 01 .认识留白 

在介绍如何使用留白提升用户体验之前，我们需要先明确留白的意义。

留白是页面元素与元素之间，以及元素周围的空间。当设计师谈论留白时，实际上说的是负空间，术语“负空间”起源于传统艺术形式，它让我们更准确地捕获物体的形状。

▼

“Suprematism: Self Portrait in two dimensions”

负空间就是元素之间的部分  by Kasimir Malevich

虽然我们称之为留白，但并不意味着就是白色的。只要该空间没有任何的文字和图像，即使被填充了任何颜色，这也算是一个留白。所以留白与实际的白色并没有关联，“留白”就是“负空间”。

▼

 02 . 为什么留白很重要 

留白是一个好设计的基本要素，与传统艺术一样，物体在GUI里也需要负空间，文字，Button，Logo，和其他元素需要空间去呼吸，所有优秀的用户界面里，从顶部到底部，页面中所有的元素都有适当的留白。

空白可分为两种类型：大留白和小留白。

▼

大留白

小留白

Note小留白：文本和网格之间的空白，它有助于内容的可读性。大留白：页面上主要元素之间的空白，与小留白不同，大留白是整体设计的容器。

 03.七种影响用户体验的留白 

留白是平衡设计元素的好工具，帮助我们更好得组织内容，提升视觉信息传达的体验。

— 1 强调特定元素 —

强调某种元素，是设计师最常见的任务之一，虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上，在焦点的周围运用留白往往都能获得比较好的效果。

距离和注意力之间有特定的联系，较大的距离能吸引人的注意，周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素，例如一段内容，较大的Padding值会加强这个区域的吸引力，因为屏幕上没有其它元素可关注。

物体周围的留白越多，就越容易吸引眼球。

在下面的例子里，Google在设计中大力倡导留白，留白很好地传达了设计的意图，我们的注意力在页面的主要目标上，不会分散给其他区域。

▼

MailChimp的主页运用了相同的方法，来突出操作按钮（call to action），你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。

▼

— 2 链接相关元素 —

当我们在检查元素布局时，通常把它看做是一些对象的组合，这是因为我们的大脑会根据物体之间的相对位置，来创造一个关系模型。格式塔的法则解释了，临近的物体会被看做是一个整体。留白也提供了一种视觉线索，看一下这张图：

很可能你看到的是两组点阵，而不是12个原点，这是12个相同的点，唯一不同的是他们的间距不同。

这个法则也可以用于交互设计，我们来看下面的Web表单。

相关元素成组：我们知道，一组元素靠在一起时，看上去是有关系的，所以相关的标签要靠得近。左图较难传达出标签与输入框的关系，而通过调整间距，如右图，表单的可浏览性提高了。

▼

相关信息成组：众所周知，长的表单让人感到压迫。用户在填这些表格的时候会变得犹豫。把相关的字段组合在一起，能帮助用户了解他们必须填写的信息。以下的形式中，两种表格都有相同数量的字段。不同的是右边划分了三个组，内容的数量是相同的，但是给用户的印象大不相同。

▼

— 3 防止视觉杂乱 —

许多的App和网站承载着太多的信息和元素，没有足够的呼吸空间。这通常由于产品创造者希望传递太多的信息，不幸的是，用户的关注度有限，越多的元素争抢着注意力，用户能够关注到的就越少。

可以看下面的例子，这是一个元素太多引起的极端案例。

▼

当每个看上去都一样的时候，用户选不出重要的那一个

许多网站有着相同的问题，缺乏留白会给用户的眼睛和耐心带来压力，充斥着文字和图片的网站使用户产生挫败感，使他们逃离。

杂乱的页面没有吸引力，并且不会让用户想要阅读内容，尤其是当没有视觉层次时。

过多的信息负载让界面变得混乱，那么减少混乱就能提高界面的可理解性：通过消除干扰，你可以强制用户只关注即时可见的内容，你可以用留白来减少压迫性，留白可以减少噪音，让用户更能聚焦。当布局达到了留白平衡，各个元素更容易被解读时，就会带来更好的用户体验。

▼

Tip请尝试“5秒测试”，观察一个页面5秒钟，然后回忆你记得的内容，是否是你想要强调的元素，这将帮你了解页面中是否有合适的留白。

— 4 通过互动内容引导用户 —

如果你希望用户的视线从一个点流向另一个点，你需要给他一个这么做的线索，这个线索就是留白，留白运用的得当时，能为页面创造自然的视线流动。

特定的留白可以实现有效引导、保持读者的兴趣，如下图所见，Dropbox通过锯齿模型引导用户浏览一系列产品的关键特征。

▼

空白可以帮助设计师讲故事

不对称是另一种留白技巧，可以用来引导用户对某一部分的注意，当一个元素运用了不对称留白，它会立马就会从周围的元素中跳脱出来，看起来更有活力。如果你要在页面中设计一个链接或者按钮，这种方法可以有效引起别人的注意。

▼非对称留白非常适合聚焦页面上的特殊区域

— 5 提高可读性 —

内容为王，内容是大多数应用程序和网站的价值，这就是为什么良好的可用性的一个关键方面是内容的可读性，很多因素可以提高可读性，比如字体的大小和颜色，或使用标题，留白是其中一个重要因素，因为它对内容的可读性有直接的影响：

行间距可以大大提高一段文本的可读性，一般来说，行间距越大，用户阅读时候的体验就越好，但是太大会破坏统一性，使得设计中断。

▼段落和文字块之间的留白有助于帮助人们更好地理解阅读的内容，根据2004年的研究，这种空白增加了近20%的可理解性

— 6 运用视觉分隔线 —

设计师经常使用横向或纵向的线去创造分隔线，虽然这样的分隔线在大多数情况下是可以的，有一个主要的缺点，大量分隔线的使用会导致视觉的噪音，造成密集拥挤的页面。

▼随着用户的偏好向更简洁的界面转移，对UI中的基本元素进行解构是成功的关键。可以用负空间来布局，而不是线，更少的分隔线能营造清爽、现代和更实用的感受，大方地使用留白可使一些复杂的界面看起来更简洁友好。这一变化背后的真正意义在于，在关注内容和功能同时消除冗余的元素。

▼

— 7 创造成熟优雅的感受 —

虽然留白经常被看作是改善用户体验的技巧，但它也可以被用于纯粹的审美目的，大量留白的网站能反映出极简和奢华感。

▼留白有助于提高整体设计的基调——通过把更多的焦点放在产品本身，使产品看上去更奢华。

04. 关于利益相关者的几句话 

现在你可能知道了留白的重要性，而另一方面，留白可能引起设计师和利益相关者的矛盾。“留白太多了，我们可以用来做什么？”是我们经常从利益相关者（客户或经理）那里听到的。

把这种要求作为一个机会去教育利益相关者，作为设计师，我们的工作就是帮助他人理解为什么留白是用户体验重要的组成部分，宣扬并解释你的思考过程，如果这不起作用，你可以采用A/B测试，测试一个设计的两个版本，一个由设计师提出，一个由客户提出，用户可能会喜欢那个不那么混乱的版本。

05.结论 

留白不是一个空白的画布，而是一个强大的设计工具，但是这个工具很难掌握：现实应用中的留白既是艺术也是科学，掌握如何使用留白来创建良好的布局需要实践。你实践的越多，学到的也就越多。