留白對于設計的價值，已經得到相當廣泛的認可(kě)了(le)。留白的存在讓其中的元素得到更好的凸顯，有了(le)留白才有強調，它們從(cóng)來都(dōu)是一(yī)體兩面，焦不離孟。今天的文章(zhāng)，我們來聊一(yī)下(xià)留白的使用技巧和(hé)最佳實踐。
留白本身通(tōng)常還被稱為(wèi)負空間(jiān)，它們可(kě)以在網頁布局中各個元素之間(jiān)，還可(kě)以在特定 UI元素的內(nèi)部。留白賦予了(le)頁面呼吸感，而它本身并不一(yī)定非得是白色的空白區(qū)域。留白界定了(le) UI元素本身的空間(jiān)邊界，而借助格式塔原理，它還可(kě)以創造視(shì)覺上(shàng)的聯系。
因此，留白是一(yī)種重要(yào)的、功能(néng)強大的設計元素，它對于創造積極的用戶體驗有着重大的影響。 交互設計基金(jīn)會的 Mads Soegaard 是這(zhè)麽說的：“留白就像一(yī)塊畫(huà)布，它是将不同設計元素融合到一(yī)起的背景，又讓這(zhè)些元素通(tōng)過對比襯托脫穎而出。”
在諸多的平面設計領域當中，負空間(jiān)都(dōu)發揮着無法替代的作(zuò)用。無論是設計LOGO、平面插畫(huà)還是字體的時(shí)候，留白的使用關系着整個設計的表現力。就像下(xià)面的博客插圖，負空間(jiān)的運用讓整個畫(huà)面顯得更加生動。
無論是在網站設計還是 UI設計當中，設計師(shī)都(dōu)需要(yào)借助留白來提升界面和(hé)導航的可(kě)用性。布局元素周圍的留白或者負空間(jiān)通(tōng)常被稱為(wèi)宏空間(jiān)，而它們之間(jiān)的留白和(hé)內(nèi)部的負空間(jiān)，則被稱為(wèi)微(wēi)空間(jiān)。
留白和(hé)負空間(jiān)雖然是兩個不同的說法，但(dàn)是兩者表述的是同一(yī)個東西(xī)。之所以有兩個不同的說法，是因為(wèi)兩個名稱是來源于不同的兩個領域。
留白是來自(zì)排版印刷設計領域，因為(wèi)頁面的背景通(tōng)常是白色的，而文本和(hé)圖片周圍的區(qū)域也多是白色的空白，因此有留白之說。而負空間(jiān)這(zhè)個說法是源自(zì)于攝影，吸引人(rén)注意的視(shì)覺主體被稱為(wèi)正空間(jiān)，而相應的留白就成了(le)負空間(jiān)。
需要(yào)注意的是，留白并不一(yī)定非得是白色的，可(kě)以是其他(tā)的顔色，甚至是其他(tā)的圖案。
當你進入一(yī)個擠滿各種物(wù)品和(hé)人(rén)的房間(jiān)，到處都(dōu)是東西(xī)和(hé)人(rén)，找到特定的東西(xī)肯定是一(yī)個非常艱難的事情。相應的，在幹淨的地(dì)面上(shàng)，擺放的唯一(yī)的物(wù)品肯定是非常醒目的，你不需要(yào)花費(fèi)任何力氣就能(néng)注意到它。這(zhè)也是留白發揮作(zuò)用的原理所在。
雖然客戶可(kě)能(néng)會要(yào)求設計師(shī)在頁面上(shàng)盡可(kě)能(néng)多地(dì)塞滿各種元素和(hé)功能(néng)，這(zhè)樣可(kě)以節省空間(jiān)。但(dàn)是，實際上(shàng)這(zhè)是一(yī)個最常見(jiàn)的錯誤的做(zuò)法：用戶并不需要(yào)在網頁上(shàng)一(yī)次完成全部的工(gōng)作(zuò)。更重要(yào)的是，太多的元素會分散用戶的注意力，用戶會難以找到真正想要(yào)的信息。正如(rú)同 Aarron Walter 所說：“你想讓用戶注意到所有事情的時(shí)候，他(tā)們會感知不到任何東西(xī)的。”
對于設計而言，負空間(jiān)的價值是非常高的，我們随便總結一(yī)下(xià)，都(dōu)有很(hěn)多：
看(kàn)看(kàn)這(zhè)個城市指南的着陸頁吧，負空間(jiān)在背景中扮演了(le)非常重要(yào)的角色，更重要(yào)的是，圖片中的元素和(hé)前景的文本标題之間(jiān)有所互動，這(zhè)也同樣是借助負空間(jiān)的方式來呈現，呈現出一(yī)種和(hé)諧而有趣的設計效果。
合理的使用留白能(néng)夠讓界面的用戶體驗提升不少(shǎo)。
可(kě)讀性和(hé)清晰度：如(rú)果和(hé)元素之間(jiān)沒有足夠的留白，會變得難以閱讀，用戶需要(yào)花費(fèi)額外(wài)的精力來進行(xíng)分辨。不合理的留白設計會讓用戶感到緊張，想要(yào)讓用戶感到自(zì)然，需要(yào)讓留白恰到好處，令布局顯得足夠自(zì)然。如(rú)同音樂(yuè)中的韻律感一(yī)樣，設計中的韻律感是通(tōng)過留白的變化來呈現的。
品牌化：如(rú)果你熟悉LOGO的設計，你會發現設計師(shī)借助元素周圍的留白來營造氛圍提升感覺，留白的功能(néng)性在品牌設計上(shàng)有着非常顯著的體現。打破留白的設計規則，對于整體是有害的。
強化屬性：留白的運用能(néng)夠強化屬性，比如(rú)新聞博客平台會更加密集地(dì)呈現信息，甚至會借助動态的數(shù)據呈現和(hé)較為(wèi)緻密的布局來營造一(yī)種資訊的密集感和(hé)平台的調性。
視(shì)覺層次：富有層次感的留白設計能(néng)夠創造出視(shì)覺層次，并且讓用戶注意到特定的元素和(hé)信息。
留白對于視(shì)覺的影響主要(yào)體現在以下(xià)的幾個方面：
接下(xià)來看(kàn)看(kàn)幾個案例。這(zhè)是 The Big Landscape 的首頁，沒有表單，沒有視(shì)覺框架，僅僅借助留白來平衡所有的設計元素。設計師(shī)構建出了(le)清晰的層次結構，并且允許用戶一(yī)瞥即可(kě)看(kàn)清所有的內(nèi)容塊，這(zhè)樣的設計看(kàn)起來是清晰而有條不紊的，而且充滿呼吸感。白色的背景和(hé)簡約的布局讓整個界面充滿了(le)實體雜(zá)志的質感， 而這(zhè)也相對視(shì)覺化地(dì)告知用戶這(zhè)是一(yī)個在線的數(shù)字雜(zá)志。
另外(wài)一(yī)個是移動端的APP Upper。整個應用的留白都(dōu)是使用黑(hēi)色來進行(xíng)填充的，在視(shì)覺上(shàng)，黑(hēi)色的留白和(hé)核心的視(shì)覺元素構成了(le)鮮明(míng)的對比，從(cóng)而起到了(le)凸顯的作(zuò)用。整個設計留白充足，用戶不會錯過關鍵的部分，也不會分心，布局的組織性極強，可(kě)讀性也都(dōu)毫無問(wèn)題。設計師(shī)确保了(le)整體的優雅性，也讓布局更加具有美學特征。
1. 術(shù)語紊淆
和(hé)不熟悉設計術(shù)語的客戶進行(xíng)溝通(tōng)的時(shí)候，應該盡量讓他(tā)們明(míng)白負空間(jiān)/留白的含義和(hé)功能(néng)。對于非設計從(cóng)業者而言，很(hěn)多時(shí)候确實不能(néng)很(hěn)快(kuài)接受「屏幕中需要(yào)留下(xià)更多的留白」這(zhè)樣的概念。對于黑(hēi)色或者深色的背景，這(zhè)類客戶可(kě)能(néng)會有不好的聯想，事實上(shàng)并非如(rú)此。在進行(xíng)足夠深入的溝通(tōng)之後，盡量将這(zhè)些關鍵點灌輸給客戶，避免術(shù)語和(hé)概念上(shàng)的誤讀。
2. 希望減少(shǎo)留白，增加頁面和(hé)內(nèi)容
其實這(zhè)個是幾乎所有的設計領域都(dōu)會面臨的問(wèn)題。客戶會希望室內(nèi)設計師(shī)在一(yī)面牆擺滿櫃子而不是給兩個剩餘的地(dì)方留白，而建築設計師(shī)也常常需要(yào)建築周圍有足夠的留白，确保呼吸感，提供更好的服務。設計師(shī)需要(yào)和(hé)客戶溝通(tōng)，了(le)解哪些部分更重要(yào)，哪些部分次重要(yào)，而哪些內(nèi)容是可(kě)有可(kě)無的，分清層級，進行(xíng)篩選。留白有助于營造更加協調的布局，讓信息和(hé)功能(néng)的可(kě)用性更強。
3. 優先級不夠高
如(rú)果深思熟慮的信息架構和(hé)界面并不匹配，留白并不是萬能(néng)的解決方案。你需要(yào)在考慮界面設計之前，就确定用戶獲取信息的方式，然後再進行(xíng)設計。在确定風(fēng)格之前，先要(yào)梳理清楚用戶流程，否則，再好的負空間(jiān)設計也不足以發揮出它應有的功能(néng)。
在線客服1号
微(wēi)信公衆賬号