適當(dāng)留白不僅是出自審美的考量，它還能提供 三個(gè)相當(dāng)實(shí)際的功能：
1.提高用戶的理解能力;
2.明確視覺(jué)元素之間的關(guān)系;
3.吸引注意力。
所有的視覺(jué)藝術(shù)家都明白負(fù)空間的重要性，適當(dāng)留白不僅可以吸引注意力，還可以將觀者的目光集中到實(shí)際的話題中去。
負(fù)空間(相當(dāng)于設(shè)計(jì)師的留白)就好比是一個(gè)盡忠盡職的配角，它的職責(zé)就是讓主角脫穎而出，同時(shí)又不過(guò)分強(qiáng)調(diào)自己。
如果你認(rèn)為自己的設(shè)計(jì)中不應(yīng)該存在任何空白之處，那么不如去看一下「世界爛網(wǎng)頁(yè)設(shè)計(jì)」的集錦，其中有很多血淋淋的案例將充分展示在網(wǎng)頁(yè)上堆積過(guò)多元素導(dǎo)致其互相爭(zhēng)搶注意力而帶來(lái)的毀滅性效果。
在網(wǎng)頁(yè)交互設(shè)計(jì)中，留白不僅僅是出自審美的考量，它還能提供 3 個(gè)相當(dāng)實(shí)際的功能。
1、提高用戶的理解能力
如果你在網(wǎng)頁(yè)中胡亂堆積太多視覺(jué)元素，就會(huì)使得你的用戶信息過(guò)載，反之，將網(wǎng)頁(yè)精簡(jiǎn)將提高用戶對(duì)其內(nèi)容的理解程度。
事實(shí)上，usaura 的創(chuàng)始人 dmitry fadeyev 明確指出，在文章的段與段之間適當(dāng)?shù)氖褂昧舭?，并在段落左右留下空間，已經(jīng)被證明可以將用戶對(duì)文章內(nèi)容的理解能力提高 20%。
這種使用留白的設(shè)計(jì)技巧可以讓你的用戶留有余地充分消化已經(jīng)閱讀的內(nèi)容，將其中的無(wú)關(guān)細(xì)節(jié)拋在腦后。
留白可以以 4 種形式存在于網(wǎng)頁(yè)設(shè)計(jì)之中：視覺(jué)留白(在圖形、圖標(biāo)與圖片四周留有空間);排版中留白(段落兩邊留有空間，內(nèi)邊距、裝訂線);文本留白(行間距以及字母之間了空隙);內(nèi)容留白(在文本列與列之間用空白分隔。
2、明確視覺(jué)元素之間的關(guān)系
當(dāng)在觀察人類個(gè)體如何組織視覺(jué)信息時(shí)，格式塔心理學(xué)家無(wú)意中發(fā)現(xiàn)了所謂的相似定律，即相鄰的圖像看上去是相似的。比如說(shuō)，看看下面這張圖：
幾乎每一個(gè)人都看到了兩組圖標(biāo)，而不是單獨(dú)的 20 個(gè)圖標(biāo)。其實(shí)這些圖標(biāo)都是相同的，唯 一的用來(lái)區(qū)分它們的就是用來(lái)分隔的留白。這種行為觀察在交互設(shè)計(jì)中有著一些重要的應(yīng)用，尤其是在輸入表格的時(shí)候，下面有 2 點(diǎn)是需要記住的：
將標(biāo)簽靠近相關(guān)字段。在你所看到的如下示例中，當(dāng)標(biāo)簽放置的更加靠近相關(guān)字段時(shí)，其中的信息交流將變得非常清晰明了。
在我們先前的實(shí)踐中也已經(jīng)證明，即使是微小的猶豫不決也會(huì)傷害形式的完整性，在這種情況下僅僅調(diào)整一下間距就會(huì)提升用戶在填寫(xiě)表單時(shí)的信心，這將提升完成率。
組織相關(guān)話題。當(dāng)處理較長(zhǎng)表單時(shí)，完成該表格填寫(xiě)的任務(wù)會(huì)看上去如此艱巨，有些用戶甚至連試都不試就直接放棄了。利用留白將信息分成適當(dāng)?shù)膸捉M，可以讓那些長(zhǎng)表單看上去更容易處理一些。
在右邊的表格之中，將 15 個(gè)字段分成 3 組讓這個(gè)填寫(xiě)過(guò)程看上去似乎更容易一些。雖然內(nèi)容是相同的，但是給用戶留下的印象是完全不同的。雖然這一原則通常運(yùn)用于表單之中讓它更能吸引用戶填寫(xiě)，但是同樣的原則也適用于導(dǎo)航欄和網(wǎng)站內(nèi)容。
相對(duì)于在頂部導(dǎo)航欄安排 20 個(gè)選項(xiàng)，你可以使用下拉目錄將頂部導(dǎo)航欄分成 4 到 7 欄，余下的內(nèi)容都可以收入到下拉框中。
3、吸引注意力
正如我們?cè)谏衔闹刑岬降?，缺乏其他的元素將使得剩下的元素更加突出。在這樣一個(gè)高保真的原型當(dāng)中，我們添加了大量留白將分類目錄內(nèi)容與搜索功能進(jìn)行區(qū)隔。
在如此設(shè)計(jì)之后，分類圖標(biāo)變得更加引人注目(布局也比先前凌亂的垂直設(shè)計(jì)顯得更加整潔)。同時(shí)將顏色填充其中，分類目錄部分將更具吸引力，還能夠提供給用戶更好的反饋。但是因?yàn)槿祟惖淖⒁饬κ怯羞x擇性的，可能會(huì)有意無(wú)意就忽略了橫幅式樣的信息比如橫幅廣告，這通常被稱作「旗幟盲點(diǎn)」，因此你在使用留白的時(shí)候后還需要指導(dǎo)如何削減或者調(diào)整其幅度。
后，你需要明白的是留白的力量來(lái)自于人們注意力與記憶力的局限。
多年來(lái)，網(wǎng)頁(yè)設(shè)計(jì)師的宗旨都是在小化認(rèn)知負(fù)荷的同時(shí)避免犧牲功能。雖然人類大腦極其復(fù)雜，不過(guò)其缺點(diǎn)卻是令人驚訝地可以預(yù)測(cè)出來(lái)的。
在網(wǎng)頁(yè)設(shè)計(jì)中減少認(rèn)知負(fù)荷不僅僅會(huì)讓ui設(shè)計(jì)更為實(shí)用，也會(huì)讓用戶更加樂(lè)于使用，適當(dāng)?shù)牧舭讜?huì)增添和諧感，讓用戶的瀏覽體驗(yàn)更具流暢性。
文中圖片素材來(lái)源網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系刪除
蘇公網(wǎng)安備32010402001741
