編者按：今天這篇@飛屋睿UIdesign 的譯文是目前見(jiàn)到最實(shí)用的留白教程之一，從網(wǎng)站元素與內(nèi)容都有細(xì)致的方法可循，附上優(yōu)秀案例剖析，整個(gè)過(guò)程由淺入深，層次分明，非常值得馬克學(xué)習(xí) >>>

由于屏幕是有限的，因此網(wǎng)頁(yè)設(shè)計(jì)也是有限的。可以這么說(shuō)，在屏幕這個(gè)小小的盒子中，每個(gè)像素都是一塊不動(dòng)產(chǎn)。

就算是菜鳥(niǎo)，也懂得一個(gè)頁(yè)面不能加載過(guò)多的內(nèi)容，但涉及到究竟應(yīng)該規(guī)劃多少留白，包括經(jīng)驗(yàn)老道的設(shè)計(jì)師或許也很茫然。

留白，另一說(shuō)為“負(fù)空間”，這兩個(gè)詞常?；Q使用。它們共同所指的都是屏幕中出現(xiàn)的元素之間的一種關(guān)系。所謂留白不一定是要白色，或黑色。就算是圖案、色彩或紋理背景都可以被稱為留白。負(fù)空間是在內(nèi)容外創(chuàng)造一個(gè)空白的環(huán)境，好讓觀者將注意力更加集中于內(nèi)容。

這篇文章中，我們將討論，怎樣運(yùn)用設(shè)計(jì)師的錦囊妙招中的超強(qiáng)致勝工具：留白。

留白的原因

就像已經(jīng)被大家所討論過(guò)的，負(fù)空間一開(kāi)始是作為審美而不可或缺的一部分。

在網(wǎng)頁(yè)設(shè)計(jì)中，在哪里留白顯得更加重要?？梢赃@么說(shuō)，它決不僅僅處于視覺(jué)審美的需要，它得肩負(fù)更重要的角色，即在視覺(jué)審美與引導(dǎo)用戶之間達(dá)成完美平衡。而且，如果現(xiàn)在有一段文字，留白還需在此基礎(chǔ)上讓文字清晰，創(chuàng)造具有可讀性的環(huán)境。

總的來(lái)說(shuō)，留白直接的影響如下。

1、眼球掃描

在網(wǎng)頁(yè)中，兩塊較大內(nèi)容元素之間的空間（在此稱大空間），這類留白能吸引并引導(dǎo)用戶的眼球掃描頁(yè)面的方式。當(dāng)運(yùn)用得當(dāng)，就能引導(dǎo)用戶的視線去注意那些你想突顯的元素。這在品牌標(biāo)識(shí)展示或增加用戶交互行為的時(shí)候最為有效。

2、清晰度

在兩個(gè)較小的內(nèi)容元素之間的空間（在此稱小空間）諸如一個(gè)文字，或一行文字，列表，圖標(biāo)等，恰當(dāng)?shù)牧舭滓材茏屵@些元素更加易于辨認(rèn)。

3、視覺(jué)審美

當(dāng)你看到一張大圖片，留白在視覺(jué)審美中發(fā)揮了很大的作用。舉例來(lái)說(shuō)，如果內(nèi)容亂七八糟絕不會(huì)是一張好看的圖片。

4、高品位

豐富的留白將為你的頁(yè)面灌注一種精致優(yōu)雅的氛圍。

為了更好的理解和運(yùn)用它，我們將要梳理不同類型的留白（大空間和小空間），以及運(yùn)用它們的不同的方法（被動(dòng)和主動(dòng)）。

大空間和小空間

網(wǎng)頁(yè)設(shè)計(jì)中，在哪里運(yùn)用以及怎樣運(yùn)用負(fù)空間將取決于它們的角色。簡(jiǎn)言之，我們把這些角色大致分為大元素和小元素。

1、大元素的留白

大元素的留白是涉及到兩個(gè)大型元素之間的留白。主要運(yùn)用于：

• 總體內(nèi)容
• 獨(dú)立的不同元素
• 文本分列
• Margin
• Padding
• 圖片之間的距離

譯者注：這里的Margin和Padding指的是網(wǎng)頁(yè)設(shè)計(jì)中元素標(biāo)簽外部范圍的區(qū)域。參考下圖可以幫助理解。

這類型的留白空間很大程度影響用戶的視覺(jué)流，不管是潛在引導(dǎo)或者強(qiáng)勢(shì)推動(dòng)都可以讓注意力引導(dǎo)到你想要他們停留的地方。但在此要強(qiáng)調(diào)的一個(gè)法則即是距離越大動(dòng)力越強(qiáng)。想要打破平衡，然而，由于太多的留白違反了格式塔原則，其結(jié)果就是消弱了對(duì)象間的關(guān)系。

讓我們看看下面這個(gè)網(wǎng)站，以此作為例子來(lái)說(shuō)明留白是如何誘發(fā)用戶交互行為。

Tomasz Wysocki’s

大多數(shù)用戶首先都會(huì)注意到頁(yè)面標(biāo)題，也就是“Digital art&Experiments”這句話，而在它外圍的則是大面積的留白，這樣就使得用戶的注意力完全集中于此。

盡管頁(yè)面的頂部和底部只有一側(cè)留白，但它們也同樣可以引起注意?？偠灾?，在此，留白的區(qū)域很好發(fā)揮了吸引注意力的作用，而設(shè)計(jì)也就似乎看上去不可思議的簡(jiǎn)潔起來(lái)。

設(shè)計(jì)師實(shí)際上是采用留白區(qū)域作為一個(gè)空白幕布，以便給觀眾留下驚喜，好讓我們可以看到他的作品的豐富細(xì)節(jié)。一旦鼠標(biāo)移動(dòng)到底部導(dǎo)航的任一欄目時(shí)，幕布上就會(huì)出現(xiàn)作品的圖片作為背景全屏展示。這種效果創(chuàng)造出類似年幼時(shí)的一種探索和發(fā)現(xiàn)的樂(lè)趣：無(wú)意間闖入一片空白的場(chǎng)所，發(fā)現(xiàn)了每個(gè)抽屜都藏匿著豐富多彩的視覺(jué)盛宴。

你可以試試鼠標(biāo)滑過(guò)時(shí)屏幕上發(fā)生的戲劇性效果。

通過(guò)留白區(qū)域作為工具來(lái)誘導(dǎo)用戶注意到他的作品，設(shè)計(jì)師創(chuàng)造出了一種新鮮奇特的體驗(yàn)。在第一個(gè)作品出現(xiàn)后，我們就很想看看他還有哪些佳作。這感覺(jué)蠻吸引的，因?yàn)槟銓?huì)抑制不住地想要找到最為重要的內(nèi)容。但這都要建立在一個(gè)完美的點(diǎn)燃你好奇的切入點(diǎn)基礎(chǔ)上。

2、小元素的留白

另一方面來(lái)說(shuō)，當(dāng)設(shè)計(jì)師們談到小元素留白，他們通常是指的較小的元素或是較大元素中的次級(jí)元素的留白。他們包括：

• 字體
• 行距
• 段落
• 列表
• 按鈕
• 圖標(biāo)

小元素的留白最多被用在強(qiáng)調(diào)網(wǎng)站整體的清晰度上面，尤其是在排版的清晰度上。當(dāng)你試圖利用文字間的留白打破平衡，保持清晰易讀的同時(shí)又能不至于太過(guò)而讓它偏離了重要的內(nèi)容。我在這里，僅僅是一個(gè)提議，建議將英文行距設(shè)置為1.5px最為完美。（譯者按：這里的作者沒(méi)有考慮中文字體的行距）

就像格式塔規(guī)律中談到的，讓距離較近的元素視覺(jué)上更為接近，這將暗示它們具有相同的功能。小元素的留白將會(huì)讓用戶知道按鈕與鏈接之間的關(guān)系，而同樣的留白將強(qiáng)化這種機(jī)制，這在用戶使用過(guò)程中進(jìn)一步增強(qiáng)認(rèn)知度。

盡管留白被分為了大元素和小元素兩種類型，每一種類型也有主動(dòng)與被動(dòng)兩種用法。

被動(dòng)留白與主動(dòng)留白

留白的應(yīng)用其實(shí)都是取決于內(nèi)容。

就像此前談到的，留白越多，內(nèi)容的吸引力就越強(qiáng)。但是，你不會(huì)想要頁(yè)面的每個(gè)元素都具有最大吸引力，更別提有限的屏幕空間了。

那就讓我們看看被動(dòng)和主動(dòng)的留白是如何幫助負(fù)空間達(dá)到視覺(jué)平衡的。

1、被動(dòng)空間

我們把被動(dòng)的留白視為空的最小化。

沒(méi)有足夠的留白，一個(gè)網(wǎng)站將會(huì)變得無(wú)法閱讀而失去方向，所有的精力都被用于對(duì)抗視覺(jué)的混亂。被動(dòng)的留白就是用空白區(qū)域去試著讓網(wǎng)站易于理解。

請(qǐng)看上面的例子，導(dǎo)航里的每個(gè)鏈接間的距離，再看看下面這行文字，行距，字間距等。你能看出什么不同尋常的嗎？……答案是你一定找不出。沒(méi)錯(cuò)！這些空間和距離都是如此微不足道，根本不會(huì)引起你的注意。這就是所謂的被動(dòng)留白。

對(duì)于大元素的留白，被動(dòng)空間意味著足夠多的border和margin的空間去強(qiáng)調(diào)元素之間的不同，避免混淆。舉例來(lái)說(shuō)，就像導(dǎo)航和注冊(cè)都在網(wǎng)頁(yè)頂部，但彼此間間隔了一定的距離。

對(duì)于小元素的留白，被動(dòng)空間就包括了字符，文字，段落的最大可讀性，以及當(dāng)出現(xiàn)列表或下拉框菜單時(shí)，每行文字或每個(gè)選項(xiàng)間的獨(dú)立性。

被動(dòng)空間的應(yīng)用應(yīng)該是自然而然的。實(shí)際上，被動(dòng)留白的主要目的甚至可以說(shuō)就是不被注意。當(dāng)你試著營(yíng)造一塊被動(dòng)空間，那么你要讓它看起來(lái)不那么引人注意，就簡(jiǎn)簡(jiǎn)單單的視之正常為最佳。

當(dāng)安置好所有的被動(dòng)空間，接下來(lái)才涉及到主動(dòng)的部分。

2、主動(dòng)空間

werkstatt

在上面的這個(gè)網(wǎng)頁(yè)中頁(yè)面里有好幾個(gè)元素：菜單欄按鈕、下拉箭頭、下拉提示等，然而，屏幕中占據(jù)主導(dǎo)地位的是中間的黑色文字，這讓其他的元素都放在了周圍，設(shè)計(jì)師放大了中間的留白區(qū)域，然后把最重要的信息放在這里，讓用戶的注意力完全集中于此。

同時(shí)，減少兩行元素間的距離，這一過(guò)程也許可稱得上是一種“隱藏”的方式。就像你常常在網(wǎng)站上見(jiàn)到的法律申明和版權(quán)信息一樣。請(qǐng)看如下的例子，“FiberSensing is an HBM Brand”的展示效果很容易讓人忽略。

大元素的留白通常是用于創(chuàng)造首要的注意力，或是將一堆重要信息分散開(kāi)來(lái)。

然而，有時(shí)候小元素的留白也可以采用主動(dòng)的方式，有的設(shè)計(jì)師就使用主動(dòng)的空間將重要的引言或者段落等形成一段文字獨(dú)立出來(lái)而吸引注意。這的確是一個(gè)強(qiáng)調(diào)重點(diǎn)內(nèi)容的好辦法。

極簡(jiǎn)主義

留白越多，也可以說(shuō)你的頁(yè)面就越趨向極簡(jiǎn)風(fēng)格，你通過(guò)刪減很多元素來(lái)避免凌亂。

極簡(jiǎn)風(fēng)格是一種設(shè)計(jì)的哲學(xué)，可以說(shuō)它不好但也不壞。它祛除了所有能帶給用戶視覺(jué)干擾的雜碎，而讓用戶關(guān)注到你所展示的重要內(nèi)容。沒(méi)有了噪音，剩下的精華內(nèi)容就呈現(xiàn)在一片優(yōu)雅的留白中。

極簡(jiǎn)風(fēng)格在兩個(gè)方面影響你的網(wǎng)站：現(xiàn)存的元素?cái)?shù)量，高品位的氛圍。

1、元素?cái)?shù)量

你的頁(yè)面存在的元素越少，那么頁(yè)面剩下的元素就顯得越重要。

如果頁(yè)面只有一個(gè)元素，即使它蜷縮在角落里，仍然是你的用戶關(guān)注的焦點(diǎn)。如果你的頁(yè)面有成千上萬(wàn)的小元素，你的用戶也許會(huì)隨機(jī)地尋找他們的興趣點(diǎn)，或者由于選擇太多而放棄。

這樣一種相關(guān)性，讓我們深知，在你的設(shè)計(jì)中要增加留白，最簡(jiǎn)單的方式就是減少頁(yè)面元素?cái)?shù)量。但我們知道說(shuō)起來(lái)容易做起來(lái)難。極簡(jiǎn)主義可以說(shuō)適用于任何網(wǎng)站，你絕不會(huì)想要把用戶不需要的也填充到網(wǎng)頁(yè)上。然而，作為視覺(jué)審美來(lái)說(shuō)，極簡(jiǎn)風(fēng)未必適合所有的網(wǎng)站，尤其是對(duì)于內(nèi)容豐富的網(wǎng)站來(lái)說(shuō)，就不會(huì)愿意這樣光禿禿的一覽無(wú)余的畫面。

當(dāng)提到極簡(jiǎn)主義，請(qǐng)大家記得，我們不是僅僅在談?wù)搶徝婪矫?，它也不是我們的目?biāo)。恰如其分達(dá)到極簡(jiǎn)風(fēng)格的水平是去精簡(jiǎn)頁(yè)面元素，直到不能使用。這需要在用戶中進(jìn)行大量測(cè)試，然后在你減少的最多時(shí)停止。

voghi

就像上面的例子中，整個(gè)頁(yè)面只有兩個(gè)可點(diǎn)擊元素：菜單欄圖標(biāo)和下拉箭頭。信息已經(jīng)被極簡(jiǎn)化處理放在了屏幕右側(cè)。元素少之又少，因而用戶注意力就放在了中間的那張極富感染力的圖片上，同時(shí)視線也會(huì)引導(dǎo)至下拉箭頭。

你怎樣去平衡元素的重要性完全由自己決定。有些頁(yè)面就只設(shè)置一個(gè)可點(diǎn)擊的鏈接，這樣確保了用戶去到設(shè)計(jì)師想要他們?nèi)サ牡胤健６械捻?yè)面給了多個(gè)下拉選項(xiàng)供用戶選擇。你可以考慮去掉標(biāo)語(yǔ)，突出內(nèi)容，簡(jiǎn)化導(dǎo)航，當(dāng)然這全取決于你的品牌和產(chǎn)品。

2、高品位的氛圍

極簡(jiǎn)風(fēng)現(xiàn)在變成了高品位的同義詞，它能魔法般地營(yíng)造出一種精細(xì)、時(shí)尚和優(yōu)雅的氛圍。時(shí)尚行業(yè)的網(wǎng)站在數(shù)字設(shè)計(jì)方面都是傾向極簡(jiǎn)的，但是對(duì)于一些零售行業(yè)的企業(yè)來(lái)說(shuō)，還很少看到有類似的設(shè)計(jì)。

高品位的氛圍是與留白有著直接的聯(lián)系的：

• 重度留白：可以見(jiàn)到一些奢華、高端的品牌中使用。
• 中度留白：比較平衡但仍是有品質(zhì)的。
• 低度留白：可見(jiàn)于一些廉價(jià)的、質(zhì)低的、凌亂的展示效果中

amazon

你可以用亞馬遜的網(wǎng)站和剛剛上面那個(gè)網(wǎng)站進(jìn)行對(duì)比，亞馬遜的網(wǎng)站內(nèi)容凌亂而導(dǎo)航的選項(xiàng)繁多。兩個(gè)網(wǎng)站都出售了高端的時(shí)尚產(chǎn)品，但典型時(shí)尚客戶會(huì)更喜歡哪一個(gè)呢？而那些理性的喜歡追逐價(jià)廉物美的購(gòu)物者又喜歡哪一種？

這些是應(yīng)用在大元素和小元素的留白空間，但同樣重要的是網(wǎng)站使用的圖片。瀏覽那些時(shí)尚網(wǎng)站所用的圖片，你會(huì)發(fā)現(xiàn)比其他普通網(wǎng)站使用的圖片更具有藝術(shù)感。

總之，你還是需要從了解自己的客戶需求開(kāi)始。研究你的用戶，他們的特點(diǎn)，然后再考慮用多少留白來(lái)展示自己的信息，讓用戶體驗(yàn)最優(yōu)化。

總結(jié)

作為一種視覺(jué)藝術(shù)，設(shè)計(jì)不能忽略最重要的視覺(jué)藝術(shù)基本原則。它需要滿足審美的同時(shí)也要?jiǎng)?chuàng)造出更為長(zhǎng)遠(yuǎn)的實(shí)際價(jià)值，比如更多的互動(dòng)，更人性化的交互。

對(duì)于入門的設(shè)計(jì)師來(lái)說(shuō)，做網(wǎng)頁(yè)設(shè)計(jì)只是增加一個(gè)頁(yè)面的可操作元素。但是對(duì)于高級(jí)設(shè)計(jì)師，做網(wǎng)頁(yè)設(shè)計(jì)是如何巧妙的使用留白去引導(dǎo)用戶進(jìn)行交互。