留(liu)白(bai)對于(yu)設(she)計(ji)的(de)(de)價值，已經得到相當廣泛(fan)的(de)(de)認可了。留(liu)白(bai)的(de)(de)存在讓其中的(de)(de)元素得到更(geng)好的(de)(de)凸顯(xian)，有了留(liu)白(bai)才有強調，它們(men)從來都是一體兩面，焦不離孟。今天的(de)(de)文(wen)章，我(wo)們(men)來聊(liao)一下留(liu)白(bai)的(de)(de)使用技巧和最佳實踐(jian)。
留(liu)白(bai)本身(shen)通(tong)常還(huan)(huan)被稱為負空(kong)(kong)間，它們可(ke)以(yi)(yi)在(zai)網頁布局中各個(ge)元(yuan)素之間，還(huan)(huan)可(ke)以(yi)(yi)在(zai)特定 UI元(yuan)素的(de)(de)內部。留(liu)白(bai)賦予了頁面(mian)呼(hu)吸感，而(er)它本身(shen)并不一定非得是白(bai)色的(de)(de)空(kong)(kong)白(bai)區域。留(liu)白(bai)界定了 UI元(yuan)素本身(shen)的(de)(de)空(kong)(kong)間邊界，而(er)借助格式(shi)塔原理(li)，它還(huan)(huan)可(ke)以(yi)(yi)創造視覺上的(de)(de)聯系(xi)。
因此，留白是一(yi)(yi)種重要的(de)(de)、功能(neng)強大(da)的(de)(de)設計元素，它對于創造(zao)積極(ji)的(de)(de)用戶體驗有著重大(da)的(de)(de)影響(xiang)。 交互設計基金會的(de)(de) Mads Soegaard 是這么說的(de)(de)：“留白就像一(yi)(yi)塊畫布，它是將不同設計元素融合到一(yi)(yi)起的(de)(de)背(bei)景(jing)，又讓這些(xie)元素通過對比襯托脫穎而出。”
在諸多的(de)平面設計領域當中，負(fu)(fu)空間(jian)(jian)都發揮著(zhu)(zhu)無(wu)(wu)法替代的(de)作用。無(wu)(wu)論是(shi)設計LOGO、平面插(cha)(cha)畫還(huan)是(shi)字體的(de)時候，留白的(de)使用關系(xi)著(zhu)(zhu)整個設計的(de)表現力。就像(xiang)下面的(de)博客插(cha)(cha)圖，負(fu)(fu)空間(jian)(jian)的(de)運(yun)用讓整個畫面顯得更(geng)加生動。
無論是在網站設計(ji)還是 UI設計(ji)當中，設計(ji)師(shi)都(dou)需要借助留白(bai)(bai)來提(ti)升界面和導航的可用性。布局元素周圍(wei)的留白(bai)(bai)或者負空(kong)間(jian)通常被(bei)稱(cheng)為(wei)宏空(kong)間(jian)，而它們之間(jian)的留白(bai)(bai)和內(nei)部(bu)的負空(kong)間(jian)，則被(bei)稱(cheng)為(wei)微空(kong)間(jian)。
留白(bai)和負(fu)空間雖然是(shi)兩個(ge)不同(tong)的(de)說法，但是(shi)兩者表述(shu)的(de)是(shi)同(tong)一個(ge)東西。之(zhi)所(suo)以有兩個(ge)不同(tong)的(de)說法，是(shi)因為(wei)兩個(ge)名(ming)稱是(shi)來源于不同(tong)的(de)兩個(ge)領域。
留(liu)(liu)白是(shi)來自排版印刷設計(ji)領域(yu)(yu)，因(yin)為(wei)頁面的(de)(de)背景通常是(shi)白色(se)的(de)(de)，而(er)文本(ben)和圖(tu)片周(zhou)圍的(de)(de)區域(yu)(yu)也(ye)多是(shi)白色(se)的(de)(de)空白，因(yin)此有留(liu)(liu)白之說(shuo)。而(er)負空間這個說(shuo)法是(shi)源自于攝影(ying)，吸引人注意的(de)(de)視覺主(zhu)體被稱為(wei)正空間，而(er)相應的(de)(de)留(liu)(liu)白就(jiu)成(cheng)了負空間。
需要注意的(de)是(shi)，留白并不一定非得是(shi)白色的(de)，可以是(shi)其他的(de)顏(yan)色，甚至是(shi)其他的(de)圖案。
當你進入一個擠滿各(ge)種物品(pin)和(he)人(ren)(ren)的(de)(de)房間(jian)，到(dao)處都是東西(xi)和(he)人(ren)(ren)，找到(dao)特定的(de)(de)東西(xi)肯定是一個非常艱(jian)難的(de)(de)事情(qing)。相應的(de)(de)，在干凈的(de)(de)地面(mian)上(shang)，擺放的(de)(de)唯一的(de)(de)物品(pin)肯定是非常醒目的(de)(de)，你不(bu)需要花費任(ren)何(he)力氣就能注意到(dao)它(ta)。這(zhe)也是留白發揮作(zuo)用的(de)(de)原理所在。
雖然客戶(hu)可能(neng)會要求設計師在頁面上盡可能(neng)多(duo)地(di)塞滿各(ge)種(zhong)元(yuan)素(su)(su)和(he)功能(neng)，這(zhe)樣可以節省空(kong)間。但是，實際上這(zhe)是一個最(zui)常(chang)見的(de)(de)(de)(de)(de)錯誤(wu)的(de)(de)(de)(de)(de)做法：用(yong)戶(hu)并(bing)不需要在網頁上一次完成全部的(de)(de)(de)(de)(de)工作。更重要的(de)(de)(de)(de)(de)是，太多(duo)的(de)(de)(de)(de)(de)元(yuan)素(su)(su)會分散用(yong)戶(hu)的(de)(de)(de)(de)(de)注意(yi)力，用(yong)戶(hu)會難以找到真正(zheng)想要的(de)(de)(de)(de)(de)信息。正(zheng)如同 Aarron Walter 所說：“你想讓用(yong)戶(hu)注意(yi)到所有事情的(de)(de)(de)(de)(de)時候，他(ta)們會感(gan)知不到任(ren)何東西(xi)的(de)(de)(de)(de)(de)。”
對于(yu)設計(ji)而言，負空(kong)間的價值(zhi)是非(fei)常(chang)高的，我們隨便總結一下，都有很多：
看(kan)看(kan)這(zhe)(zhe)個(ge)城(cheng)市(shi)指南的(de)(de)著陸頁(ye)吧，負空間(jian)在背(bei)景中扮演了非常重要的(de)(de)角色，更重要的(de)(de)是(shi)，圖(tu)片中的(de)(de)元素和(he)前景的(de)(de)文本標(biao)題之間(jian)有(you)所互動，這(zhe)(zhe)也同樣是(shi)借助負空間(jian)的(de)(de)方式來呈(cheng)(cheng)現，呈(cheng)(cheng)現出一種(zhong)和(he)諧而有(you)趣的(de)(de)設計效果(guo)。
合理(li)的(de)使用留(liu)白(bai)能夠讓界面的(de)用戶體驗提升不少(shao)。
可(ke)讀性和清晰度：如(ru)果和元(yuan)素(su)之(zhi)間沒有足夠(gou)的(de)留白，會變得(de)難以閱讀，用(yong)戶(hu)(hu)需要花(hua)費額外的(de)精力來進(jin)行分(fen)辨。不合理的(de)留白設(she)計會讓(rang)用(yong)戶(hu)(hu)感(gan)(gan)到(dao)緊張，想要讓(rang)用(yong)戶(hu)(hu)感(gan)(gan)到(dao)自然，需要讓(rang)留白恰到(dao)好處，令布局顯得(de)足夠(gou)自然。如(ru)同音(yin)樂中的(de)韻(yun)律感(gan)(gan)一樣，設(she)計中的(de)韻(yun)律感(gan)(gan)是通過(guo)留白的(de)變化來呈(cheng)現的(de)。
品牌化：如果你(ni)熟悉LOGO的(de)(de)設(she)(she)計，你(ni)會(hui)發現(xian)設(she)(she)計師借助元素周圍(wei)的(de)(de)留(liu)白來營造氛圍(wei)提升感覺(jue)，留(liu)白的(de)(de)功能性在(zai)品牌設(she)(she)計上有(you)著非常顯著的(de)(de)體(ti)現(xian)。打破留(liu)白的(de)(de)設(she)(she)計規則，對于整體(ti)是有(you)害的(de)(de)。
強化屬性：留(liu)白的(de)運用(yong)能夠強化屬性，比如新聞博(bo)客平臺會更加密(mi)集(ji)地(di)呈(cheng)現信息，甚至會借助動態(tai)的(de)數(shu)據呈(cheng)現和(he)較(jiao)為致密(mi)的(de)布局(ju)來(lai)營造一種資訊的(de)密(mi)集(ji)感和(he)平臺的(de)調性。
視覺層次(ci)：富(fu)有(you)層次(ci)感的留白設計能夠創造出視覺層次(ci)，并且(qie)讓用戶(hu)注(zhu)意到特定(ding)的元(yuan)素和信息。
留白對于視覺(jue)的影響主要體現在(zai)以下(xia)的幾個方(fang)面：
接下來(lai)看(kan)(kan)看(kan)(kan)幾個案例(li)。這(zhe)是 The Big Landscape 的首頁，沒(mei)有表單，沒(mei)有視覺框(kuang)架，僅僅借助留白(bai)來(lai)平衡所(suo)有的設計(ji)元素。設計(ji)師構建(jian)出了清(qing)晰的層次結構，并且允許用戶一瞥即可(ke)看(kan)(kan)清(qing)所(suo)有的內容(rong)塊，這(zhe)樣的設計(ji)看(kan)(kan)起來(lai)是清(qing)晰而(er)有條不紊(wen)的，而(er)且充滿呼吸(xi)感。白(bai)色(se)的背景和簡(jian)約(yue)的布局讓整(zheng)個界面充滿了實體雜志(zhi)的質感， 而(er)這(zhe)也相對(dui)視覺化地告知用戶這(zhe)是一個在線的數字雜志(zhi)。
另外一個(ge)是移動端的(de)APP Upper。整(zheng)個(ge)應用(yong)的(de)留白都(dou)是使用(yong)黑色來進行填充的(de)，在視覺上，黑色的(de)留白和核心(xin)的(de)視覺元(yuan)素(su)構成了(le)鮮明的(de)對比，從(cong)而起(qi)到了(le)凸顯的(de)作用(yong)。整(zheng)個(ge)設計(ji)留白充足，用(yong)戶不會錯過關鍵(jian)的(de)部(bu)分，也(ye)不會分心(xin)，布(bu)局的(de)組織性(xing)極強，可讀性(xing)也(ye)都(dou)毫(hao)無問題。設計(ji)師確保了(le)整(zheng)體的(de)優雅性(xing)，也(ye)讓布(bu)局更加具有(you)美學特征。
1. 術語紊淆
和(he)不熟悉設(she)計術語的(de)客(ke)戶(hu)進行(xing)溝(gou)通的(de)時(shi)(shi)候，應(ying)該盡量(liang)讓他們明白負空間/留(liu)白的(de)含(han)義和(he)功能(neng)。對于(yu)非設(she)計從(cong)業者而言(yan)，很多(duo)時(shi)(shi)候確實不能(neng)很快接(jie)受(shou)「屏幕中(zhong)需(xu)要(yao)留(liu)下更多(duo)的(de)留(liu)白」這樣的(de)概念(nian)。對于(yu)黑(hei)色或者深色的(de)背景，這類客(ke)戶(hu)可(ke)能(neng)會有不好的(de)聯(lian)想，事實上(shang)并非如此。在進行(xing)足夠深入的(de)溝(gou)通之后，盡量(liang)將這些關鍵點灌輸給(gei)客(ke)戶(hu)，避免術語和(he)概念(nian)上(shang)的(de)誤讀。
2. 希望減少留白，增加頁面和內容
其實這個是幾乎(hu)所有(you)的(de)(de)設(she)計領域都會(hui)(hui)面臨的(de)(de)問題(ti)。客戶會(hui)(hui)希望室內(nei)設(she)計師在一面墻(qiang)擺滿(man)柜子(zi)而不是給兩(liang)個剩余(yu)的(de)(de)地方(fang)留白，而建(jian)筑設(she)計師也常(chang)常(chang)需要(yao)建(jian)筑周圍有(you)足夠的(de)(de)留白，確保(bao)呼吸(xi)感(gan)，提供更好的(de)(de)服務(wu)。設(she)計師需要(yao)和客戶溝通，了解哪(na)些(xie)(xie)部(bu)分(fen)更重要(yao)，哪(na)些(xie)(xie)部(bu)分(fen)次重要(yao)，而哪(na)些(xie)(xie)內(nei)容(rong)是可有(you)可無的(de)(de)，分(fen)清層級，進行篩選。留白有(you)助(zhu)于營造更加協調的(de)(de)布局，讓信息和功能的(de)(de)可用性更強。
3. 優先級不夠高
如果深思熟慮的(de)信(xin)息架(jia)構和界(jie)面并不(bu)匹配，留白并不(bu)是萬能的(de)解決(jue)方(fang)案(an)。你需要(yao)在考慮界(jie)面設計(ji)之前，就確定用(yong)(yong)戶(hu)獲(huo)取信(xin)息的(de)方(fang)式，然后再進行設計(ji)。在確定風格之前，先要(yao)梳理清楚用(yong)(yong)戶(hu)流程(cheng)，否則，再好的(de)負(fu)空間設計(ji)也不(bu)足以發揮出它應有(you)的(de)功(gong)能。
在線客服1號
微信公眾賬號