【翻译】网页设计中如何科学留白？

How to Effectively Use Whitespace in Web Design

April 30, 2015

byTomer Lerner

你是不是经常盯着你刚刚完成的设计，想着“好像缺了点儿啥”？再具体点儿，你是不是曾得到过这个设计“太空了”或者“太满了”的结论？对我们设计师来说，这些场景总能轻松的让我们在设计中花去大量的时间。

这确实也没什么意外的。毕竟，我们工作的最本质工作都围绕着如何创造性地“填补空白”。然而，尽管这是我们工作的核心部分，它也是设计中的重要方面之一。如何有效地利用空白？

Effective Use of Whitespace: Webydo.com.

空白真的“空”吗？

你是不是曾经认为空白是“设计之间的空间”？这是个完全错误的观点，尽管这是面对我们设计中一些荒凉之处时，我们普遍存有的一个想法。空白区域并不只是设计元素之间的填充，人家自己也是个很重要的设计元素呢，好嘛！

空白就像砖块之间的砂浆，或者彩色玻璃马赛克拼贴中的粘合剂一样。尽管我们的眼睛被训练得善于欣赏内容——砖块和彩色玻璃——但是真正承载它们并帮助形成整体设计流的却是这些空白。

Effective Use of Whitespace: Beatbox Academy.

就像马赛克拼贴没有胶水一样，我们的设计如果没有空白就是一堆彩色垃圾。一旦你认识到了这些你设计中所谓的“空白元素”的重要性，那时你就能更好的将空白的使用能力提升到极致。

聚焦

现在我们已经确立了留白的重要性，那么我们该如何使用它？

我们先来做个小练习。在你最新换的浏览器里打开一个新的标签页并让它转到Google.com。你第一眼看见了什么？我敢打赌一定是色彩鲜艳的谷歌标识，对吧？这个标识在哪儿？它当然没有在你视线自然开始的地方——窗口顶端。那么，你的注意力是怎么被吸引过去的呢？

Effective Use of Whitespace: Google.

猜对了——留白。谷歌用大量的空白区域自然地把你的焦点调整到了页面中央，那个它极简化的设计主体部分所在。留白是引导用户视线的最基本的方式之一。

我们可以用这一设计工具在布局中创造自然的焦点区域。用户的注意力和焦点被吸引到了这个区域，然后我们就可以把重要内容放在里面来更高效地传达我们的信息了。

组织

与能够调动用户焦点一样，留白还为设计师们提供了一种简单的方式，使不同的设计元素更有条理。和我们用空白把整片的文字分割成更容易理解的段落一样，它在为我们的设计构建清晰的组织时也极为有效。

Effective Use of Whitespace: Bagigia.

利用留白来组织内容是，一个有用的小技巧就是要统一。采用这种方法时，考虑好内容分组的问题很有用。尽量对页边距、分区、文字和图片等元素使用一套统一的空白尺寸。

利用留白进行组织的一个好处就是，它既方便调整，又会对设计有深远的影响。所以，尽情尝试吧！

强调

还是因为在引导用户视线上的显著效果，留白可以使你设计中的一些元素更突出。在我们先前讨论组织中的统一性主题的基础上，巧妙地打破这种连贯性可以迅速引起用户的注意。

Effective Use of Whitespace: Cultured Code.

当你在设计时创建了一套稳定的空白使用原则时，用户的眼睛立刻就会习惯这个规则。在用户继续浏览你的设计时，这种连贯性上的一点点打断，即使非常微小，也会马上凸显出来。

有个很棒的例子——你可以试一下，很容易——非常细微地调整一下你想强调的标题的字间距。掌握了这个技能，试着在你的设计中的区域间用更细微的变化应用它。

不一定是留“白”

上面的技巧全都围绕着引导用户的视线。毕竟，这是留白最擅长做的。也就是说，尽管我们说“留白”，但它不一定非得是“白色”的。没有什么不成文的设计法则规定你设计中的主要元素之间的空间是什么颜色。

Effective Use of Whitespace: Huge Inc.

一个可以在实践中看到的例子就是单页设计趋势。当你被限制于只能用一个页面承载内容时，有效的空白利用可以将吸引焦点、清晰组织和强调主体发挥到最大限度。

大块的内容通常在这些情境中被设计成贯穿、流通的。在这些情况下，只要把这些内容块中的颜色换掉，就会在帮助我们维持上面所说的设计中三个方面的同时，也为在有限空间内的内容设计提供了突破点。

读了这些方法，希望你能用一个新鲜的视角看待你的设计中的空白。