01 .認(rèn)識(shí)留白
在介紹如何使用留白提升用戶(hù)體驗(yàn)之前，我們需要先明確留白的意義。
留白是頁(yè)面元素與元素之間，以及元素周?chē)目臻g。當(dāng)設(shè)計(jì)師談?wù)摿舭讜r(shí)，實(shí)際上說(shuō)的是負(fù)空間，術(shù)語(yǔ)“負(fù)空間”起源于傳統(tǒng)藝術(shù)形式，它讓我們更準(zhǔn)確地捕獲物體的形狀。
▼
“Suprematism: Self Portrait in two dimensions”
負(fù)空間就是元素之間的部分 by Kasimir Malevich
雖然我們稱(chēng)之為留白，但并不意味著就是白色的。只要該空間沒(méi)有任何的文字和圖像，即使被填充了任何顏色，這也算是一個(gè)留白。所以留白與實(shí)際的白色并沒(méi)有關(guān)聯(lián)，“留白”就是“負(fù)空間”。
▼
02 . 為什么留白很重要
留白是一個(gè)好設(shè)計(jì)的基本要素，與傳統(tǒng)藝術(shù)一樣，物體在GUI里也需要負(fù)空間，文字，Button，Logo，和其他元素需要空間去呼吸，所有優(yōu)秀的用戶(hù)界面里，從頂部到底部，頁(yè)面中所有的元素都有適當(dāng)?shù)牧舭住?
空白可分為兩種類(lèi)型：大留白和小留白。
▼
大留白
小留白
03.七種影響用戶(hù)體驗(yàn)的留白
留白是平衡設(shè)計(jì)元素的好工具，幫助我們更好得組織內(nèi)容，提升視覺(jué)信息傳達(dá)的體驗(yàn)。
— 1 強(qiáng)調(diào)特定元素 —
強(qiáng)調(diào)某種元素，是設(shè)計(jì)師最常見(jiàn)的任務(wù)之一，雖然設(shè)計(jì)師可以用許多視覺(jué)方法讓用戶(hù)聚焦在某些特定元素上，在焦點(diǎn)的周?chē)\(yùn)用留白往往都能獲得比較好的效果。
距離和注意力之間有特定的聯(lián)系，較大的距離能吸引人的注意，周?chē)娜笔宫F(xiàn)有的元素更佳突出。設(shè)計(jì)師會(huì)運(yùn)用合適的留白去強(qiáng)調(diào)重要的元素，例如一段內(nèi)容，較大的Padding值會(huì)加強(qiáng)這個(gè)區(qū)域的吸引力，因?yàn)槠聊簧蠜](méi)有其它元素可關(guān)注。
物體周?chē)牧舭自蕉啵驮饺菀孜矍颉?
在下面的例子里，Google在設(shè)計(jì)中大力倡導(dǎo)留白，留白很好地傳達(dá)了設(shè)計(jì)的意圖，我們的注意力在頁(yè)面的主要目標(biāo)上，不會(huì)分散給其他區(qū)域。
▼
MailChimp的主頁(yè)運(yùn)用了相同的方法，來(lái)突出操作按鈕（call to action），你會(huì)注意到“Sign Up Free”這個(gè)按鈕立刻吸引了人的注意。
▼
— 2 鏈接相關(guān)元素 —
當(dāng)我們?cè)跈z查元素布局時(shí)，通常把它看做是一些對(duì)象的組合，這是因?yàn)槲覀兊拇竽X會(huì)根據(jù)物體之間的相對(duì)位置，來(lái)創(chuàng)造一個(gè)關(guān)系模型。格式塔的法則解釋了，臨近的物體會(huì)被看做是一個(gè)整體。留白也提供了一種視覺(jué)線(xiàn)索，看一下這張圖：
很可能你看到的是兩組點(diǎn)陣，而不是12個(gè)原點(diǎn)，這是12個(gè)相同的點(diǎn)，唯一不同的是他們的間距不同。
這個(gè)法則也可以用于交互設(shè)計(jì)，我們來(lái)看下面的Web表單。
- 相關(guān)元素成組：我們知道，一組元素靠在一起時(shí)，看上去是有關(guān)系的，所以相關(guān)的標(biāo)簽要靠得近。左圖較難傳達(dá)出標(biāo)簽與輸入框的關(guān)系，而通過(guò)調(diào)整間距，如右圖，表單的可瀏覽性提高了。
▼
- 相關(guān)信息成組：眾所周知，長(zhǎng)的表單讓人感到壓迫。用戶(hù)在填這些表格的時(shí)候會(huì)變得猶豫。把相關(guān)的字段組合在一起，能幫助用戶(hù)了解他們必須填寫(xiě)的信息。以下的形式中，兩種表格都有相同數(shù)量的字段。不同的是右邊劃分了三個(gè)組，內(nèi)容的數(shù)量是相同的，但是給用戶(hù)的印象大不相同。
▼
— 3 防止視覺(jué)雜亂 —
許多的App和網(wǎng)站承載著太多的信息和元素，沒(méi)有足夠的呼吸空間。這通常由于產(chǎn)品創(chuàng)造者希望傳遞太多的信息，不幸的是，用戶(hù)的關(guān)注度有限，越多的元素爭(zhēng)搶著注意力，用戶(hù)能夠關(guān)注到的就越少。
可以看下面的例子，這是一個(gè)元素太多引起的極端案例。
▼
當(dāng)每個(gè)看上去都一樣的時(shí)候，用戶(hù)選不出重要的那一個(gè)
許多網(wǎng)站有著相同的問(wèn)題，缺乏留白會(huì)給用戶(hù)的眼睛和耐心帶來(lái)壓力，充斥著文字和圖片的網(wǎng)站使用戶(hù)產(chǎn)生挫敗感，使他們逃離。
雜亂的頁(yè)面沒(méi)有吸引力，并且不會(huì)讓用戶(hù)想要閱讀內(nèi)容，尤其是當(dāng)沒(méi)有視覺(jué)層次時(shí)。
過(guò)多的信息負(fù)載讓界面變得混亂，那么減少混亂就能提高界面的可理解性：通過(guò)消除干擾，你可以強(qiáng)制用戶(hù)只關(guān)注即時(shí)可見(jiàn)的內(nèi)容，你可以用留白來(lái)減少壓迫性，留白可以減少噪音，讓用戶(hù)更能聚焦。當(dāng)布局達(dá)到了留白平衡，各個(gè)元素更容易被解讀時(shí)，就會(huì)帶來(lái)更好的用戶(hù)體驗(yàn)。
▼
— 4 通過(guò)互動(dòng)內(nèi)容引導(dǎo)用戶(hù) —
如果你希望用戶(hù)的視線(xiàn)從一個(gè)點(diǎn)流向另一個(gè)點(diǎn)，你需要給他一個(gè)這么做的線(xiàn)索，這個(gè)線(xiàn)索就是留白，留白運(yùn)用的得當(dāng)時(shí)，能為頁(yè)面創(chuàng)造自然的視線(xiàn)流動(dòng)。
特定的留白可以實(shí)現(xiàn)有效引導(dǎo)、保持讀者的興趣，如下圖所見(jiàn)，Dropbox通過(guò)鋸齒模型引導(dǎo)用戶(hù)瀏覽一系列產(chǎn)品的關(guān)鍵特征。
▼
空白可以幫助設(shè)計(jì)師講故事
不對(duì)稱(chēng)是另一種留白技巧，可以用來(lái)引導(dǎo)用戶(hù)對(duì)某一部分的注意，當(dāng)一個(gè)元素運(yùn)用了不對(duì)稱(chēng)留白，它會(huì)立馬就會(huì)從周?chē)脑刂刑摮鰜?lái)，看起來(lái)更有活力。如果你要在頁(yè)面中設(shè)計(jì)一個(gè)鏈接或者按鈕，這種方法可以有效引起別人的注意。
▼
非對(duì)稱(chēng)留白非常適合聚焦頁(yè)面上的特殊區(qū)域
— 5 提高可讀性 —
內(nèi)容為王，內(nèi)容是大多數(shù)應(yīng)用程序和網(wǎng)站的價(jià)值，這就是為什么良好的可用性的一個(gè)關(guān)鍵方面是內(nèi)容的可讀性，很多因素可以提高可讀性，比如字體的大小和顏色，或使用標(biāo)題，留白是其中一個(gè)重要因素，因?yàn)樗鼘?duì)內(nèi)容的可讀性有直接的影響：
行間距可以大大提高一段文本的可讀性，一般來(lái)說(shuō)，行間距越大，用戶(hù)閱讀時(shí)候的體驗(yàn)就越好，但是太大會(huì)破壞統(tǒng)一性，使得設(shè)計(jì)中斷。
▼
段落和文字塊之間的留白有助于幫助人們更好地理解閱讀的內(nèi)容，根據(jù)2004年的研究，這種空白增加了近20%的可理解性
— 6 運(yùn)用視覺(jué)分隔線(xiàn) —
設(shè)計(jì)師經(jīng)常使用橫向或縱向的線(xiàn)去創(chuàng)造分隔線(xiàn)，雖然這樣的分隔線(xiàn)在大多數(shù)情況下是可以的，有一個(gè)主要的缺點(diǎn)，大量分隔線(xiàn)的使用會(huì)導(dǎo)致視覺(jué)的噪音，造成密集擁擠的頁(yè)面。
▼
隨著用戶(hù)的偏好向更簡(jiǎn)潔的界面轉(zhuǎn)移，對(duì)UI中的基本元素進(jìn)行解構(gòu)是成功的關(guān)鍵?？梢杂秘?fù)空間來(lái)布局，而不是線(xiàn)，更少的分隔線(xiàn)能營(yíng)造清爽、現(xiàn)代和更實(shí)用的感受，大方地使用留白可使一些復(fù)雜的界面看起來(lái)更簡(jiǎn)潔友好。這一變化背后的真正意義在于，在關(guān)注內(nèi)容和功能同時(shí)消除冗余的元素。
▼
— 7 創(chuàng)造成熟優(yōu)雅的感受 —
雖然留白經(jīng)常被看作是改善用戶(hù)體驗(yàn)的技巧，但它也可以被用于純粹的審美目的，大量留白的網(wǎng)站能反映出極簡(jiǎn)和奢華感。
▼
留白有助于提高整體設(shè)計(jì)的基調(diào)——通過(guò)把更多的焦點(diǎn)放在產(chǎn)品本身，使產(chǎn)品看上去更奢華。
04. 關(guān)于利益相關(guān)者的幾句話(huà)
現(xiàn)在你可能知道了留白的重要性，而另一方面，留白可能引起設(shè)計(jì)師和利益相關(guān)者的矛盾?！傲舭滋嗔耍覀兛梢杂脕?lái)做什么？”是我們經(jīng)常從利益相關(guān)者（客戶(hù)或經(jīng)理）那里聽(tīng)到的。
把這種要求作為一個(gè)機(jī)會(huì)去教育利益相關(guān)者，作為設(shè)計(jì)師，我們的工作就是幫助他人理解為什么留白是用戶(hù)體驗(yàn)重要的組成部分，宣揚(yáng)并解釋你的思考過(guò)程，如果這不起作用，你可以采用A/B測(cè)試，測(cè)試一個(gè)設(shè)計(jì)的兩個(gè)版本，一個(gè)由設(shè)計(jì)師提出，一個(gè)由客戶(hù)提出，用戶(hù)可能會(huì)喜歡那個(gè)不那么混亂的版本。
05.結(jié)論
留白不是一個(gè)空白的畫(huà)布，而是一個(gè)強(qiáng)大的設(shè)計(jì)工具，但是這個(gè)工具很難掌握：現(xiàn)實(shí)應(yīng)用中的留白既是藝術(shù)也是科學(xué)，掌握如何使用留白來(lái)創(chuàng)建良好的布局需要實(shí)踐。你實(shí)踐的越多，學(xué)到的也就越多。
原文地址：medium
譯文地址：51UXC（公眾號(hào)）
譯者：51UXC 翻譯社
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何在界面設(shè)計(jì)中使用留白
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司