留白對于設(shè)計的價值，已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。盡管留白看起來不復(fù)雜，但是在復(fù)雜多變的設(shè)計環(huán)境之下，往往并不是一件簡單的事情。優(yōu)秀的留白設(shè)計能夠在簡約的風(fēng)格和功能的可用性之間達(dá)到平衡，而要做到這一點，需要相當(dāng)?shù)膶嵺`和積累。

留白的概念

留白本身通常還被稱為負(fù)空間，留白和負(fù)空間雖然是兩個不同的說法，但是兩者表述的是同一個東西。之所以有兩個不同的說法，是因為兩個名稱是來源于不同的兩個領(lǐng)域。

留白是來自排版印刷設(shè)計領(lǐng)域，因為頁面的背景通常是白色的，而文本和圖片周圍的區(qū)域也多是白色的空白，因此有留白之說。而負(fù)空間這個說法是源自于攝影，吸引人注意的視覺主體被稱為正空間，而相應(yīng)的留白就成了負(fù)空間。

需要注意的是，留白并不一定非得是白色的，可以是其他的顏色，甚至是其他的圖案。

留白為何如此重要

當(dāng)你進(jìn)入一個擠滿各種物品和人的房間，到處都是東西和人，找到特定的東西肯定是一個非常艱難的事情。相應(yīng)的，在干凈的地面上，擺放的唯一的物品肯定是非常醒目的，你不需要花費任何力氣就能注意到它。這也是留白發(fā)揮作用的原理所在。

雖然客戶可能會要求設(shè)計師在頁面上盡可能多地塞滿各種元素和功能，這樣可以節(jié)省空間。但是，實際上這是一個最常見的錯誤的做法：用戶并不需要在網(wǎng)頁上一次完成全部的工作。更重要的是，太多的元素會分散用戶的注意力，用戶會難以找到真正想要的信息。正如同 Aarron Walter 所說：“你想讓用戶注意到所有事情的時候，他們會感知不到任何東西的?！?br />

UI設(shè)計中的留白

留白可以在網(wǎng)頁布局中各個元素之間，還可以在特定 UI元素的內(nèi)部。留白賦予了頁面呼吸感，而它本身并不一定非得是白色的空白區(qū)域。

在UI交互設(shè)計中，留白不僅僅是出自審美的考量，它還能提供實際的作用：

• 聚焦視覺重點突出信息本質(zhì)。
  

• 合理劃分空間，預(yù)留舒適的閱讀體驗。

• 提供準(zhǔn)確的點擊區(qū)域，有效預(yù)防誤觸操作。

• 跨平臺適配，易于重置排版。

因此，留白是一種重要的、功能強(qiáng)大的設(shè)計元素，它對于創(chuàng)造積極的用戶體驗有著重大的影響。 交互設(shè)計基金會的 Mads Soegaard 是這么說的：“留白就像一塊畫布，它是將不同設(shè)計元素融合到一起的背景，又讓這些元素通過對比襯托脫穎而出。”

在什么地方用留白

必須承認(rèn)，并非每個設(shè)計都需要大量的留白。留白的使用一定是有范圍，且有留白會對設(shè)計中下列因素產(chǎn)生影響：

• 排版布局

• 影像圖片

• 功能控件

• 文本內(nèi)容

• 邊距間隙

留白劃分為大小兩種：

小留白是在較小的元素之間小間隙，比如下面的元素周圍的留白就是小留白：

• 鏈接

  
  

  
  

• 列表

  
  

• 圖標(biāo)

  
  

• 按鈕

  
  

• 文本段落

  
  

相反，在處理相對較大的元素的時候，周圍的負(fù)空間是大留白。

正確使用留白能夠為整個設(shè)計帶來平衡感。對于文本內(nèi)容，你會發(fā)現(xiàn)易讀性的高低和其中的小留白的控制有著密切的關(guān)聯(lián)，這對于內(nèi)容的呈現(xiàn)有著重要的影響。

使用留白的好處還有很多：

• 留白能夠增加內(nèi)容的可理解性。

• 留白能夠凸顯特定的 UI 元素，CTA 元素大都如此。

• 可以讓設(shè)計更加整潔、友好。

需要考慮的問題和隱患

1.客戶溝通術(shù)語紊淆

和不熟悉設(shè)計術(shù)語的客戶進(jìn)行溝通的時候，應(yīng)該盡量讓他們明白負(fù)空間/留白的含義和功能。對于非設(shè)計從業(yè)者而言，很多時候確實不能很快接受「屏幕中需要留下更多的留白」這樣的概念。對于黑色或者深色的背景，這類客戶可能會有不好的聯(lián)想，事實上并非如此。在進(jìn)行足夠深入的溝通之后，盡量將這些關(guān)鍵點灌輸給客戶，避免術(shù)語和概念上的誤讀。

2.希望減少留白，增加頁面和內(nèi)容

其實這個是幾乎所有的設(shè)計領(lǐng)域都會面臨的問題?？蛻魰Ｍ覂?nèi)設(shè)計師在一面墻擺滿柜子而不是給兩個剩余的地方留白，而建筑設(shè)計師也常常需要建筑周圍有足夠的留白，確保呼吸感，提供更好的服務(wù)。設(shè)計師需要和客戶溝通，了解哪些部分更重要，哪些部分次重要，而哪些內(nèi)容是可有可無的，分清層級，進(jìn)行篩選。留白有助于營造更加協(xié)調(diào)的布局，讓信息和功能的可用性更強(qiáng)。

3. 優(yōu)先級不夠高

如果深思熟慮的信息架構(gòu)和界面并不匹配，留白并不是萬能的解決方案。你需要在考慮界面設(shè)計之前，就確定用戶獲取信息的方式，然后再進(jìn)行設(shè)計。在確定風(fēng)格之前，先要梳理清楚用戶流程，否則，再好的負(fù)空間設(shè)計也不足以發(fā)揮出它應(yīng)有的功能。

具體案例分析

Apple

https://www.apple.com/iphone/

關(guān)于留白的設(shè)計，很難繞過蘋果這么經(jīng)典的案例。雖然他們不是先驅(qū)，但是蘋果將這一技巧的運用在自家的產(chǎn)品設(shè)計和網(wǎng)站設(shè)計上，體現(xiàn)的淋漓盡致。

在他們的網(wǎng)站上，你會看到清晰的視覺脈絡(luò)，頁面的每個部分都有清晰的視覺焦點，主次分明，用戶永遠(yuǎn)不會在這里迷失和分心。

Squarespace

https://www.squarespace.com/

在保證用戶能夠獲取足夠的信息的前提下，Squarespace 的設(shè)計師盡量限制了界面上使用 UI 元素的數(shù)量。搜索框讓用戶能夠輕松找到他們想要的信息，而文案設(shè)計上的獨特性使得品牌的調(diào)性得到了放大。文本的字體色彩選用了黑色，和淺色的背景構(gòu)成了強(qiáng)烈的對比，讓閱讀和信息的獲取都無比的輕松。

Progressive Punctuation

https://progressivepunctuation.com/

如何使用標(biāo)點符號來傳達(dá)復(fù)雜的情緒？Progressive Punctuation 這個網(wǎng)站將這些「全新」的標(biāo)點符號都展示了出來。

和其他的頁面不同的地方在于，頁面需要承載多個不同的非標(biāo)準(zhǔn)標(biāo)點符號，為了將信息準(zhǔn)確的傳達(dá)，設(shè)計師巧妙地使用留白來控制符號之間的間距，確保整體的優(yōu)雅性，又保證了信息的傳達(dá)。

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)