想要用好留白？這篇文章幫你從頭開始梳理

沃準(zhǔn)播報(bào)： 留白對(duì)于設(shè)計(jì)的價(jià)值，已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。留白的存在讓其中的元素得到更好的凸顯，有了留白才有強(qiáng)調(diào)，它們從來都是一體兩面，焦不離孟。今天的文章，我們來聊一下留白的使用技巧和最佳實(shí)踐。

沃準(zhǔn) 播報(bào)： 設(shè)計(jì)中的留白

留白本身通常還被稱為負(fù)空間，它們可以在網(wǎng)頁布局中各個(gè)元素之間，還可以在特定 UI元素的內(nèi)部。留白賦予了頁面呼吸感，而它本身并不一定非得是白色的空白區(qū)域。留白界定了 UI元素本身的空間邊界，而借助格式塔原理，它還可以創(chuàng)造視覺上的聯(lián)系。

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

在諸多的平面設(shè)計(jì)領(lǐng)域當(dāng)中，負(fù)空間都發(fā)揮著無法替代的作用。無論是設(shè)計(jì) LOGO、平面插畫還是字體的時(shí)候，留白的使用關(guān)系著整個(gè)設(shè)計(jì)的表現(xiàn)力。就像下面的博客插圖，負(fù)空間的運(yùn)用讓整個(gè)畫面顯得更加生動(dòng)。

無論是在網(wǎng)站設(shè)計(jì)還是 UI設(shè)計(jì)當(dāng)中，設(shè)計(jì)師都需要借助留白來提升界面和導(dǎo)航的可用性。布局元素周圍的留白或者負(fù)空間通常被稱為宏空間，而它們之間的留白和內(nèi)部的負(fù)空間，則被稱為微空間。

沃準(zhǔn) 播報(bào)： 理清概念

留白和負(fù)空間雖然是兩個(gè)不同的說法，但是兩者表述的是同一個(gè)東西。之所以有兩個(gè)不同的說法，是因?yàn)閮蓚€(gè)名稱是來源于不同的兩個(gè)領(lǐng)域。

留白是來自排版印刷設(shè)計(jì)領(lǐng)域，因?yàn)轫撁娴谋尘巴ǔＪ前咨模谋竞蛨D片周圍的區(qū)域也多是白色的空白，因此有留白之說。而負(fù)空間這個(gè)說法是源自于攝影，吸引人注意的視覺主體被稱為正空間，而相應(yīng)的留白就成了負(fù)空間。

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

沃準(zhǔn) 播報(bào)： 留白為何如此重要

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

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

對(duì)于設(shè)計(jì)而言，負(fù)空間的價(jià)值是非常高的，我們隨便總結(jié)一下，都有很多：

它讓頁面的可閱讀性得到了提升；

它增強(qiáng)了視覺層次；

它使得元素和元素之間的關(guān)系更加清晰，更容易被感知，而不需要借助表格、框架這樣的附加手段；

它為頁面增加了呼吸感，而不至于導(dǎo)致混亂；

它讓用戶更容易將注意力集中到核心元素上，減少分心；

它提升了頁面的風(fēng)格，讓設(shè)計(jì)更加優(yōu)雅。

看看這個(gè)城市指南的著陸頁吧，負(fù)空間在背景中扮演了非常重要的角色，更重要的是，圖片中的元素和前景的文本標(biāo)題之間有所互動(dòng)，這也同樣是借助負(fù)空間的方式來呈現(xiàn)，呈現(xiàn)出一種和諧而有趣的設(shè)計(jì)效果。

沃準(zhǔn)播報(bào)： 影響留白的核心因素

合理的使用留白能夠讓界面的用戶體驗(yàn)提升不少。

可讀性和清晰度：如果和元素之間沒有足夠的留白，會(huì)變得難以閱讀，用戶需要花費(fèi)額外的精力來進(jìn)行分辨。不合理的留白設(shè)計(jì)會(huì)讓用戶感到緊張，想要讓用戶感到自然，需要讓留白恰到好處，令布局顯得足夠自然。如同音樂中的韻律感一樣，設(shè)計(jì)中的韻律感是通過留白的變化來呈現(xiàn)的。

品牌化：如果你熟悉 LOGO的設(shè)計(jì)，你會(huì)發(fā)現(xiàn)設(shè)計(jì)師借助元素周圍的留白來營造氛圍提升感覺，留白的功能性在品牌設(shè)計(jì)上有著非常顯著的體現(xiàn)。 打破留白的設(shè)計(jì)規(guī)則，對(duì)于整體是有害的。

強(qiáng)化屬性：留白的運(yùn)用能夠強(qiáng)化屬性，比如新聞博客平臺(tái)會(huì)更加密集地呈現(xiàn)信息，甚至?xí)柚鷦?dòng)態(tài)的數(shù)據(jù)呈現(xiàn)和較為致密的布局來營造一種資訊的密集感和平臺(tái)的調(diào)性。

視覺層次：富有層次感的留白設(shè)計(jì)能夠創(chuàng)造出視覺層次，并且讓用戶注意到特定的元素和信息。

留白對(duì)于視覺的影響主要體現(xiàn)在以下的幾個(gè)方面：

文案和內(nèi)容

圖形元素

導(dǎo)航

視覺識(shí)別

接下來看看幾個(gè)案例。這是 The Big Landscape 的首頁，沒有表單，沒有視覺框架，僅僅借助留白來平衡所有的設(shè)計(jì)元素。設(shè)計(jì)師構(gòu)建出了清晰的層次結(jié)構(gòu)，并且允許用戶一瞥即可看清所有的內(nèi)容塊，這樣的設(shè)計(jì)看起來是清晰而有條不紊的，而且充滿呼吸感。白色的背景和簡(jiǎn)約的布局讓整個(gè)界面充滿了實(shí)體雜志的質(zhì)感， 而這也相對(duì)視覺化地告知用戶這是一個(gè)在線的數(shù)字雜志。

另外一個(gè)是移動(dòng)端的 APPUpper。整個(gè)應(yīng)用的留白都是使用黑色來進(jìn)行填充的，在視覺上，黑色的留白和核心的視覺元素構(gòu)成了鮮明的對(duì)比，從而起到了凸顯的作用。整個(gè)設(shè)計(jì)留白充足，用戶不會(huì)錯(cuò)過關(guān)鍵的部分，也不會(huì)分心，布局的組織性極強(qiáng)，可讀性也都毫無問題。設(shè)計(jì)師確保了整體的優(yōu)雅性，也讓布局更加具有美學(xué)特征。

沃準(zhǔn) 播報(bào)： 需要考慮的問題和隱患

1. 術(shù)語紊淆

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

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

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

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

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