为你的眼睛做UI设计

为空间设计做减法

本章内容组织结构--译者注

在UI设计里用好空白需要对美、功能、人类行为习惯有很深的理解。空间的设计就是语言与视觉表达之间的联系，更多地考虑到反馈、时效性、和用户习惯。也许页面中间的空间布局是为解决页面周边的问题。

Photo credit:“Long beach lighthouse- negative space”. Armando Maynez.Creative Commons.

我们将会从完全纯粹的留白开始讲留白空间设计。然后我们会将一些更加实际的案例来教你如何处理空间的摆放来让你的页面显得不那么杂乱或孤立。

---

负空间并不是空白

白色的地方会让人望而却步。我们在Web UI Best Practices中说道白色的地方会让人感到太空荡荡了，你觉得必须得加点东西在上面。但实际上完全不是这样：设计师只不过是把留白当做一种工具来设计出最好的界面和最好的用户体验。

Photo credit:www.overclothing.com

所有好的视觉设计师都知道负空间的重要性，留出空白的地方是为了将用户的注意力引导至存在的物体。负空间就是一个一片绿叶，是为了让主体更加夺目的同时还要让主体别太显眼。

如果你认为设计不应该留白那看一下世界最差网站，这是一个极端的案例，因为每个元素都想吸引人的眼球。

在交互设计中，留白有三个功能：提高用户理解程度、澄清元素之间关系、吸引用户的注意力。

1.提高用户理解程度

如果界面提供给用户太多杂乱无章的信息，那么减少这些混乱会提高用户的理解程度。事实上Usaura的创始人Dmitry Fadeyev 指出在文章段落及左右边界之间适当的留白会提高用户20%的理解能力。这种留白是建立在设计师给用户提供可消化的内容省去无用细节的基础上的。

留白可以分解成4种元素：

1. 图片留白—围绕图片、图标、图表的空白

2. 布局留白—边界、空格等

3. 文字留白—在行与行之间、字与字之间的空白

4. 内容留白—栏与栏之间的空白

让我们看一下这4种空白是怎么和谐相处的

Photo credit:www.medium.com

Medium是将4种留白元素平衡运用的绝佳例子

首先让我们从交互的角度来看一下用户的目标：他们想要尽快地找到有趣的内容。在主页上通过留白将放置在中间的内容进行强化。在图片周围和和每一栏之间都留置了充足的而空白，虽然在图片周围的留白要是更加统一那就更好了（图片左侧的空白与底部的空白不一致）

除了提高理解程度，留白还能帮助建立心智地图。极少的留白被应用在导航与内容流之间使用户能够有沉浸式体验（相同的功能应该放在一起）。因为右侧的导航最主要是创建和保存内容，所以在右侧和主内容流之间留置了更多的空白。所以留白也能帮助用户对页面上不同的功能进行分类。

Photo credit:www.medium.com

当你点击进入一篇文章时，留白能帮助用户聚焦最重要的—内容。注意在每行之间的留白是怎样提高文章的可读性的。看一个细节，在JW Marriot 的Logo通过周围的留白非但没有打扰到用户而且更加的醒目（一个对“图标要大一点，再大一点”的有力反驳）

就像主页，你能看见在各个项目组之间为了增加间距来分清功能的大量留白。例如在底部右侧内容与commenting/ favoriting/ share 图标之间的留白。

更重要的是，合理的留白消除了界面上不需要的东西，每一个项目的目的都是帮助用户达成他们的目标。想一下在The Guide to Mockups中的“减法雕刻”，你雕去越多的材料你就越突出了主体并为其创造了更多的空间：

你开始拿到的是一块厚厚的原石，首先凿出个大概，然后从另一个角度去雕刻修整，再从另一个角度雕刻细节，最后你要磨出脸、手臂、躯干。通过细化各个结构，慢慢地你肯定就会得到你想要的了。

想要学习更多关于留白的内容查看22条好的例子和21条绝佳的例子。

留白是减法雕刻。当你雕去不必要的东西时，也是在突出留下东西的美。

2.澄清关系

当格式塔专家在观察人们怎么组织视觉信息时，他们在接近法则这受阻了，接近法则阐释了当物体靠的比较近时看起来是相似的。看一下这幅图。

几乎所有人看到的是两组点，而不是20个点。所有的点都是一样的，唯一不同的是分隔它们之间的白色空格大小。这个观察结果在交互设计中有许多重要的应用。特别是在输入框中：

1. 把标签放在与之相关的地方 — 在这个例子里将标签与其相关内容靠的更近所传达的意思更明确。

Web UI Best Practices 中提到，用户对表格（各种调查表什么的）有轻微的疑虑就会影响到表格的填报完成度。在这种情况下，稍微调整空格大小就能增强用户填表格的信心，从而提高表格的填报完成率。

2. 将相关项目组合在一起 — 在填很长的表格时，用户会感觉“臣妾做不到啊…”所以一些用户甚至都没有尝试就放弃了。将信息合理分组有助于帮助用户更轻松地完成表格。表格是用户体验中最难跨越的鸿沟，但该原则同样适用于导航和内容页。在导航时，你可以使用一个下拉菜单显示4-7条一级导航项目，将其他项目放置于二级菜单来代替同时将20条项目一股脑儿放在导航栏上。

3. 吸引注意力

我们刚才提到，其他项目的缺失将会使页面上显示的更加突出。让我们看一下Yelp的重设计（取自User Testing & Design）

Source:User Testing & Design

上面的高保真原型中我们在搜索栏与分类之间设置了大量留白。这样做了之后分类标签更能吸引人的注意（比现在网站使用的垂直分类方式更简单清晰）。鼠标在按钮上在悬停时按钮上颜色的变化吸引了用户的注意并制造了更好的反馈。

但因为人们选择性的关注造成视野狭隘—选择性过滤掉广告，你也需要知道内容之间的间隙必须减小。

在Westfield London的例子中，公司顾问Jakob Nielsen通过弹出窗口演示了事情的发展时间线。由于“2000”没有被注意到，所以左边的设计是失败的。用户一开始就被图片和内容本身给吸引过去了。但在新的图片中“2000”被稍微调整之后这个问题就被解决了。

另外我们必须知道留白之所以有用是因人类注意力和记忆力是有限的。

看一下下图中Google与Yahoo的对比，Yahoo一下子想让用户关注的东西过多，Google知道用户想要最基本的搜索功能。为了实现用户的目标，Google的设计更多的是进行有效的交互。

Photo credit:www.google.com

---

内容组块化

大多数设计师同意“别让我思考”的设计思路。

这并不是说用户很懒，只不过是用户头脑里已经有许多东西了，更多的东西只会让事情完成起来更复杂。界面设计给用户造成的负担就是“认知加载”，好的UI设计应该尽量减少认知加载。

人类的大脑不仅复杂而且也是不可预料的。根据George Miller的研究，在1956年科学家指出人类的短期记忆只能承载5-9个项目（平均7个）。具体的数字现在还在争论当中（现在说是3-6个），Miller的发现被证明有效并推导出了重要的交互理论方法，包括“组块化”

组块化是将关联的信息组合使其更容易使用和记忆。这幅图中第一组形状更容易被记住因为它们被组块化了。

但是现在组块记忆被玩坏了，它就像一条硬性规定而不是一种最好的操作。例如有些设计师坚持认为菜单、下拉菜单、列表等永远不能超过6个项目，但这并不是推荐的组块化使用方法。

组块化并不是一条一成不变的定理，而是可以根据实际内容作出改变的。简单的说，组块化用在以下的情境中：

1. 当你的产品需要先记忆许多信息接下来才能被使用时

2. UI必须和外部刺激共同争夺用户的注意力。（例如手机app）

3. 数字化学习软件（因为用户接下来必须再次使用信息）

另一方面，如果是为了搜索和浏览，你就不需要使你的信息块状化。但也有例外，看下图的Etsy。

当用户不需要记住分类时，块状化分类的内容增加了视觉层级。当你从分类里点击进去时，块状化消失了里面的内容依次排列。在具体项目级别没有必要使用块状化不然用户每页只能浏览5-6件商品会崩溃的。

Etsy的做法让用户在所有的页面都得到了良好的体验，更多数量的商品被展现出来但是用户并不感到厌烦。在上面的例子中共展示了32件不同的物品。用其他的设计方法用户可能会心烦意乱。多亏了组块化得方法，用户才能得到所有的信息。

---

小结：

留白也许会一无所用或者大有用处就看你怎么用它了。

在相关项目之间太多的留白是失败的设计，把许多项目堆在一起会显得杂乱无章。在布局方面注意空白的安排，特别是关系到用户的记忆及是否可以通过适当的留白传达有价值的信息。空间设计在交互设计方面非常重要，有时候无言胜千言。