空白的力量

掌握空白的力量  Mastering the Power of Nothing

如何在界面设计中使用空

空白是界面设计中最宝贵的资源，页面上的空白，经常被忽视，但是它们跟UI元素所占用的空间一样重要。

“空白被认为是一个活跃的元素，而不是一个被动的背景。”

——Jan Tschichold

在本文中，我的目标是解释空白在设计中是如何提升用户体验的。然而，在开始之前我们需要先明确空的意义。

认识空白

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

“Suprematism: Self Portrait in two dimensions” by Kasimir Malevich. 负空间就是元素之间的部分。

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

为什么空白很重要

空白是获得一个好设计的基本要素，像传统艺术，物体在图形用户界面里也需要负空间，文字，Button，Logo，和其他元素需要空间去呼吸，所有好的用户界面从顶部到底部，页面中所有的元素都有合适的空白值。

这里有两种类型的空白

大空白和小空白

Micro和Macro，大空白和小空白

小空白：文本和网格之间的空白。这个空白有助于内容的可读性。

大空白：页面上主要元素之间的空白，与小空白不同，大空白是作为整体设计的容器。

7种可以影响到UX的空白方式

空白是一个非常好的工具去平衡设计元素，更好的组织内容，去提升视觉信息传达的体验。

1.强调确定的元素

优先考虑具体的要素或内容，是设计师最常见的任务之一，虽然设计师可以用许多视觉方法来聚焦某些特定的元素，一个获得比较好效果的方法是在焦点的周围运用留白。

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

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

Google，在下面的例子里，在他们的设计中大力倡导空白，空白帮助传达设计的意图，重点放在页面的主要目标上，没有多余的贡献给其他区域。

相同的技术运用在了落地页，特别是在突出呼叫操作按钮（call to action）方面，如果你浏览MailChimp的主页，你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。

2.链接相关的元素

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

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

这个法则可以被用作交互设计元素上，我们来看他在Web表单的上下文中是如何运用的。

相关的标签要靠的越近，我们一直到，一组元素靠在一起看上去是有关系的。把标签放到离输入框更近的时候，他更难能方便的传达信息。通过调整间距，可以让表单更容易被浏览，增加成功的机会。

相关领域的成组

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

3.防止视觉杂乱

许多的App和网站承载着太多的信息和元素，没有足够呼吸的空间。这种通常发生在产品的创造者希望传递太多的信息，不幸的是，用户的关注度有限，越多的元素竞争着被关注，用户关注的就越少。

如果你不认为这是一个问题可以看下面的例子，这是一个有太多的元素引起的极端案例。

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

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

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

过多的信息负载让界面变得混乱，那么减少混乱能提高理解力：通过消除分心，你可以强制用户只关注即时可见的内容，你可以用空白来减少压迫性，将空白视为分心的音量旋钮，更多的空白等于更少的噪音，让用户更能聚焦，当布局达到了空白平衡，处理和理解文本变得更加容易，更容易解读图标和图像，并提供更好的用户体验。

MYPORTER的页面有许多的留白，清晰可见，易于阅读。

Tip：

要确认设计整齐，请尝试“5秒测试”，观察一个压面5秒钟，然后记下你记得的内容，这将帮你你了解页面中是否有合适的留白。

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

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

调整空白已实现有效扫描并保持读者的兴趣，如下图所见，这是Dropbox通过锯齿模型引导用户浏览一系列的产品关键特征。

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

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

非对称非常适合关注页面上的特殊区域

5.提高可读性

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

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

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

6.运用视觉分隔线

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

随着用户的偏好向更简洁的界面转移，剥离UI到他最基本必须的元素是成功的关键，可以用元素和间隔来划分，而不是线，更少的分隔线能给界面清爽，现代和更实用的感受，慷慨的留白可使一些复杂的界面看起来更受欢迎和。这一变化背后的真正意义在于，在关注内容和功能同时消除多余的元素。

7.创造一个成熟和优雅的感受

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

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

关于利益相关者的几句话

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

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

结论

白空间不是一个空白的画布，他是一个强大的设计工具，但是这个工具很难掌握：应用中的白空间既是艺术也是科学，了解应该使用多少空白来创建良好的布局需要练习。你设计的越多，你学到的也越多。

原文链接：https://medium.springboard.com/mastering-the-power-of-nothing-a9f6971f1fd