UI设计中“留白”的用处

　　适当留白不仅是出自审美的考量，它还能提供 三个相当实际的功能：

　　1.提高用户的理解能力;

　　2.明确视觉元素之间的关系;

　　3.吸引注意力。

　　所有的视觉艺术家都明白负空间的重要性，适当留白不仅可以吸引注意力，还可以将观者的目光集中到实际的话题中去。

　　负空间(相当于设计师的留白)就好比是一个尽忠尽职的配角，它的职责就是让主角脱颖而出，同时又不过分强调自己。

　　如果你认为自己的设计中不应该存在任何空白之处，那么不如去看一下「世界烂网页设计」的集锦，其中有很多血淋淋的案例将充分展示在网页上堆积过多元素导致其互相争抢注意力而带来的毁灭性效果。

　　在网页交互设计中，留白不仅仅是出自审美的考量，它还能提供 3 个相当实际的功能。

　　1、提高用户的理解能力

　　如果你在网页中胡乱堆积太多视觉元素，就会使得你的用户信息过载，反之，将网页精简将提高用户对其内容的理解程度。

　　事实上，usaura 的创始人 dmitry fadeyev 明确指出，在文章的段与段之间适当的使用留白，并在段落左右留下空间，已经被证明可以将用户对文章内容的理解能力提高 20%。

　　这种使用留白的设计技巧可以让你的用户留有余地充分消化已经阅读的内容，将其中的无关细节抛在脑后。

　　留白可以以 4 种形式存在于网页设计之中：视觉留白(在图形、图标与图片四周留有空间);排版中留白(段落两边留有空间，内边距、装订线);文本留白(行间距以及字母之间了空隙);内容留白(在文本列与列之间用空白分隔。

　　2、明确视觉元素之间的关系

　　当在观察人类个体如何组织视觉信息时，格式塔心理学家无意中发现了所谓的相似定律，即相邻的图像看上去是相似的。比如说，看看下面这张图：

　　几乎每一个人都看到了两组图标，而不是单独的 20 个图标。其实这些图标都是相同的，唯 一的用来区分它们的就是用来分隔的留白。这种行为观察在交互设计中有着一些重要的应用，尤其是在输入表格的时候，下面有 2 点是需要记住的：

　　将标签靠近相关字段。在你所看到的如下示例中，当标签放置的更加靠近相关字段时，其中的信息交流将变得非常清晰明了。

　　在我们先前的实践中也已经证明，即使是微小的犹豫不决也会伤害形式的完整性，在这种情况下仅仅调整一下间距就会提升用户在填写表单时的信心，这将提升完成率。

　　组织相关话题。当处理较长表单时，完成该表格填写的任务会看上去如此艰巨，有些用户甚至连试都不试就直接放弃了。利用留白将信息分成适当的几组，可以让那些长表单看上去更容易处理一些。

　　在右边的表格之中，将 15 个字段分成 3 组让这个填写过程看上去似乎更容易一些。虽然内容是相同的，但是给用户留下的印象是完全不同的。虽然这一原则通常运用于表单之中让它更能吸引用户填写，但是同样的原则也适用于导航栏和网站内容。

　　相对于在顶部导航栏安排 20 个选项，你可以使用下拉目录将顶部导航栏分成 4 到 7 栏，余下的内容都可以收入到下拉框中。

　　3、吸引注意力

　　正如我们在上文中提到的，缺乏其他的元素将使得剩下的元素更加突出。在这样一个高保真的原型当中，我们添加了大量留白将分类目录内容与搜索功能进行区隔。

　　在如此设计之后，分类图标变得更加引人注目(布局也比先前凌乱的垂直设计显得更加整洁)。同时将颜色填充其中，分类目录部分将更具吸引力，还能够提供给用户更好的反馈。但是因为人类的注意力是有选择性的，可能会有意无意就忽略了横幅式样的信息比如横幅广告，这通常被称作「旗帜盲点」，因此你在使用留白的时候后还需要指导如何削减或者调整其幅度。

　　 后，你需要明白的是留白的力量来自于人们注意力与记忆力的局限。

　　多年来，网页设计师的宗旨都是在小化认知负荷的同时避免牺牲功能。虽然人类大脑极其复杂，不过其缺点却是令人惊讶地可以预测出来的。

　　在网页设计中减少认知负荷不仅仅会让ui设计更为实用，也会让用户更加乐于使用，适当的留白会增添和谐感，让用户的浏览体验更具流畅性。