Medium 是一個綜合使用了這 4 種留白方式的好例子。首先,從交互的角度來看它充分考慮了用戶的目的:用戶想要盡快讀到有趣的閱讀內容。Medium 主頁滿足用戶這一需求的直接做法就是將內容安排到中心靠前的位置,同時在內容兩側使用了大塊留白來強調文本內容。Medium 主頁上的圖片周圍和行與行之間都留有充足的空間,雖然其圖片的內邊距設計還有提升的空間(注意:圖片左下角的文字與圖片之間并沒有充分留白)。
除了提升用戶的理解能力之外,留白還能夠幫助他們創造出自己的意境地圖(譯者注:即人類頭腦中的空間意象)。在頂部導航條與內容瀑布流之間的微小留白也可以促使讀者深入閱讀內容。網頁右側的導航欄目的在于讓用戶創建并保存內容,因此需要使用更多的留白讓其與文章內容分隔開來。在 Medium 的這個案例中,我們可以看到留白指引用戶在不同的區域完成不同的功能。當用戶點擊標題進去閱讀文章具體內容時,留白可以幫助他們集中注意力在最關心的內容之上。文章行與行之間的適當留白提高了其整體可讀性。
當在觀察人類個體如何組織視覺信息時,格式塔心理學家無意中發現了所謂的相似定律,即相鄰的圖像看上去是相似的。比如說,看看下面這張圖:
幾乎每一個人都看到了兩組圖標,而不是單獨的 20 個圖標。其實這些圖標都是相同的,唯一的用來區分它們的就是用來分隔的留白。這種行為觀察在交互設計中有著一些重要的應用,尤其是在輸入表格的時候,下面有 2 點是需要記住的:
將標簽靠近相關字段。在你所看到的如下示例中,當標簽放置的更加靠近相關字段時,其中的信息交流將變得非常清晰明了。在我們先前的實踐中也已經證明,即使是最微小的猶豫不決也會傷害形式的完整性,在這種情況下僅僅調整一下間距就會提升用戶在填寫表單時的信心,這將提升完成率。
組織相關話題。當處理較長表單時,完成該表格填寫的任務會看上去如此艱巨,有些用戶甚至連試都不試就直接放棄了。利用留白將信息分成適當的幾組,可以讓那些長表單看上去更容易處理一些。在右邊的表格之中,將 15 個字段分成 3 組讓這個填寫過程看上去似乎更容易一些。雖然內容是相同的,但是給用戶留下的印象是完全不同的。雖然這一原則通常運用于表單之中讓它更能吸引用戶填寫,但是同樣的原則也適用于導航欄和網站內容。相對于在頂部導航欄安排 20 個選項,你可以使用下拉目錄將頂部導航欄分成 4 到 7 欄,余下的內容都可以收入到下拉框中。
3、吸引注意力
正如我們在上文中提到的,缺乏其他的元素將使得剩下的元素更加突出。我們對于 Yelp 的頁面重新設計就是一個很好的例子,在這樣一個高保真的原型當中,我們添加了大量留白將分類目錄內容與搜索功能進行區隔。在如此設計之后,分類圖標變得更加引人注目(布局也比先前凌亂的垂直設計顯得更加整潔)。同時將顏色填充其中,分類目錄部分將更具吸引力,還能夠提供給用戶更好的反饋。但是因為人類的注意力是有選擇性的,可能會有意無意就忽略了橫幅式樣的信息比如橫幅廣告,這通常被稱作「旗幟盲點」,因此你在使用留白的時候后還需要指導如何削減或者調整其幅度。
最后,你需要明白的是留白的力量來自于人們注意力與記憶力的局限。你可以比較一下 Yahoo 與 Google 的交互設計,Yahoo 在其網頁中安排了太多的按鈕,而 Google 深知用戶使用網站的基本需求就是使用搜索功能找到其想要的東西。正因為 Google 能夠對于用戶的需求進行現實的考量,因此其網頁設計創造了更為積極有效的交互。
大多數的設計師都屬于「不要讓用戶動腦子」學派,這不僅僅是因為用戶通常是懶惰的,還因為他們在瀏覽網頁的時候腦海中已經存有很多信息了,如果還要填鴨式地向其腦中灌輸信息,只會使得他們感覺無力閱讀。這種在交互設計中傳遞太多信息而導致用戶無力接受的現象通常被稱作「認知負荷」。
多年來,網頁設計師的宗旨都是在最小化認知負荷的同時避免犧牲功能。雖然人類大腦極其復雜,不過其缺點卻是令人驚訝地可以預測出來的。在 1956 年,科學家喬治•米勒發表了他關于人類短時記憶的研究,在該研究中他發現人類的瞬時記憶只能維持記憶 5 到 9 個數字,平均來說是 7 個。雖然確切的數字至今仍有爭議(3 到 6 個是現在公認的理想狀態),但是米勒的研究發現被證明是確實有效的,它引出了重要的「組塊方法」,在實踐當中將相關性信息按組分類,可以讓用戶的記憶過程與理解過程都更加簡便。
適當的留白會讓你的網站充滿活力,比較透氣,對用戶沒有壓迫感。