適當留白不僅是出自審美的考量，它還能提供 3 個相當實際的功能：1.提高用戶的理解能力；2.明確視覺元素之間的關系；3.吸引注意力。

所有優(yōu)秀的視覺藝術家都明白負空間的重要性，適當留白不僅可以吸引注意力，還可以將觀者的目光集中到實際的話題中去。負空間（相當于設計師的留白）就好比是一個盡忠盡職的配角，它的職責就是讓主角脫穎而出，同時又不過分強調(diào)自己。如果你認為自己的設計中不應該存在任何空白之處，那么不如去看一下「世界最爛網(wǎng)頁設計」的集錦，其中有很多血淋淋的案例將充分展示在網(wǎng)頁上堆積過多元素導致其互相爭搶注意力而帶來的毀滅性效果。在網(wǎng)頁交互設計中，留白不僅僅是出自審美的考量，它還能提供 3 個相當實際的功能。

1、提高用戶的理解能力

如果你在網(wǎng)頁中胡亂堆積太多視覺元素，就會使得你的用戶信息過載，反之，將網(wǎng)頁精簡將提高用戶對其內(nèi)容的理解程度。事實上，Usaura 的創(chuàng)始人 Dmitry Fadeyev 明確指出，在文章的段與段之間適當?shù)氖褂昧舭?，并在段落左右留下空間，已經(jīng)被證明可以將用戶對文章內(nèi)容的理解能力提高 20%。這種使用留白的設計技巧可以讓你的用戶留有余地充分消化已經(jīng)閱讀的內(nèi)容，將其中的無關細節(jié)拋在腦后。

留白可以以 4 種形式存在于網(wǎng)頁設計之中：視覺留白（在圖形、圖標與圖片四周留有空間）；排版中留白（段落兩邊留有空間，內(nèi)邊距、裝訂線）；文本留白（行間距以及字母之間了空隙）；內(nèi)容留白（在文本列與列之間用空白分隔。

Medium 是一個綜合使用了這 4 種留白方式的好例子。首先，從交互的角度來看它充分考慮了用戶的目的：用戶想要盡快讀到有趣的閱讀內(nèi)容。Medium 主頁滿足用戶這一需求的直接做法就是將內(nèi)容安排到中心靠前的位置，同時在內(nèi)容兩側使用了大塊留白來強調(diào)文本內(nèi)容。Medium 主頁上的圖片周圍和行與行之間都留有充足的空間，雖然其圖片的內(nèi)邊距設計還有提升的空間（注意：圖片左下角的文字與圖片之間并沒有充分留白。

除了提升用戶的理解能力之外，留白還能夠幫助他們創(chuàng)造出自己的意境地圖（譯者注：即人類頭腦中的空間意象）。在頂部導航條與內(nèi)容瀑布流之間的微小留白也可以促使讀者深入閱讀內(nèi)容。網(wǎng)頁右側的導航欄目的在于讓用戶創(chuàng)建并保存內(nèi)容，因此需要使用更多的留白讓其與文章內(nèi)容分隔開來。在 Medium 的這個案例中，我們可以看到留白指引用戶在不同的區(qū)域完成不同的功能。當用戶點擊標題進去閱讀文章具體內(nèi)容時，留白可以幫助他們集中注意力在最關心的內(nèi)容之上。文章行與行之間的適當留白提高了其整體可讀性。

2、明確視覺元素之間的關系

當在觀察人類個體如何組織視覺信息時，格式塔心理學家無意中發(fā)現(xiàn)了所謂的相似定律，即相鄰的圖像看上去是相似的。比如說，看看下面這張圖：

幾乎每一個人都看到了兩組圖標，而不是單獨的 20 個圖標。其實這些圖標都是相同的，唯一的用來區(qū)分它們的就是用來分隔的留白。這種行為觀察在交互設計中有著一些重要的應用，尤其是在輸入表格的時候，下面有 2 點是需要記住的：

將標簽靠近相關字段。在你所看到的如下示例中，當標簽放置的更加靠近相關字段時，其中的信息交流將變得非常清晰明了。在我們先前的實踐中也已經(jīng)證明，即使是最微小的猶豫不決也會傷害形式的完整性，在這種情況下僅僅調(diào)整一下間距就會提升用戶在填寫表單時的信心，這將提升完成率。

組織相關話題。當處理較長表單時，完成該表格填寫的任務會看上去如此艱巨，有些用戶甚至連試都不試就直接放棄了。利用留白將信息分成適當?shù)膸捉M，可以讓那些長表單看上去更容易處理一些。在右邊的表格之中，將 15 個字段分成 3 組讓這個填寫過程看上去似乎更容易一些。雖然內(nèi)容是相同的，但是給用戶留下的印象是完全不同的。雖然這一原則通常運用于表單之中讓它更能吸引用戶填寫，但是同樣的原則也適用于導航欄和網(wǎng)站內(nèi)容。相對于在頂部導航欄安排 20 個選項，你可以使用下拉目錄將頂部導航欄分成 4 到 7 欄，余下的內(nèi)容都可以收入到下拉框中。

3、吸引注意力

正如我們在上文中提到的，缺乏其他的元素將使得剩下的元素更加突出。我們對于 Yelp 的頁面重新設計就是一個很好的例子，在這樣一個高保真的原型當中，我們添加了大量留白將分類目錄內(nèi)容與搜索功能進行區(qū)隔。在如此設計之后，分類圖標變得更加引人注目（布局也比先前凌亂的垂直設計顯得更加整潔）。同時將顏色填充其中，分類目錄部分將更具吸引力，還能夠提供給用戶更好的反饋。但是因為人類的注意力是有選擇性的，可能會有意無意就忽略了橫幅式樣的信息比如橫幅廣告，這通常被稱作「旗幟盲點」，因此你在使用留白的時候后還需要指導如何削減或者調(diào)整其幅度。

最后，你需要明白的是留白的力量來自于人們注意力與記憶力的局限。你可以比較一下 Yahoo 與 Google 的交互設計，Yahoo 在其網(wǎng)頁中安排了太多的按鈕，而 Google 深知用戶使用網(wǎng)站的基本需求就是使用搜索功能找到其想要的東西。正因為 Google 能夠?qū)τ谟脩舻男枨筮M行現(xiàn)實的考量，因此其網(wǎng)頁設計創(chuàng)造了更為積極有效的交互。

大多數(shù)的設計師都屬于「不要讓用戶動腦子」學派，這不僅僅是因為用戶通常是懶惰的，還因為他們在瀏覽網(wǎng)頁的時候腦海中已經(jīng)存有很多信息了，如果還要填鴨式地向其腦中灌輸信息，只會使得他們感覺無力閱讀。這種在交互設計中傳遞太多信息而導致用戶無力接受的現(xiàn)象通常被稱作「認知負荷。

多年來，網(wǎng)頁設計師的宗旨都是在最小化認知負荷的同時避免犧牲功能。雖然人類大腦極其復雜，不過其缺點卻是令人驚訝地可以預測出來的。在 1956 年，科學家喬治?米勒發(fā)表了他關于人類短時記憶的研究，在該研究中他發(fā)現(xiàn)人類的瞬時記憶只能維持記憶 5 到 9 個數(shù)字，平均來說是 7 個。雖然確切的數(shù)字至今仍有爭議（3 到 6 個是現(xiàn)在公認的理想狀態(tài)），但是米勒的研究發(fā)現(xiàn)被證明是確實有效的，它引出了重要的「組塊方法」，在實踐當中將相關性信息按組分類，可以讓用戶的記憶過程與理解過程都更加簡便。

在網(wǎng)頁設計中減少認知負荷不僅僅會讓 UI 設計更為實用，也會讓用戶更加樂于使用，適當?shù)牧舭讜鎏砗椭C感，讓用戶的瀏覽體驗更具流暢性。