留白，可以讓設(shè)計(jì)效果更有呼吸感，使界面干凈有序，同時(shí)還能讓用戶更專注于我們要凸顯的內(nèi)容。

‍‍“一個(gè)好的音樂，音符之間一定需要足夠的空間，這樣音樂才能在空氣中發(fā)揮作用�！�

‍‍

音樂家Frank Zappa

試想一下，如果你聽到一首歌，都是同樣的節(jié)奏，以至于每個(gè)音符之間沒有區(qū)別，那么這首歌就不會動聽。

設(shè)計(jì)中的留白亦是如此，留白可以說是隱形的，但卻是設(shè)計(jì)中很重要的因素，那么如何在界面中使用空間留白制造呼吸感，使界面有干凈有序呢？

01/

什么是設(shè)計(jì)中的留白？

留白很多叫法，有的叫呼吸感，有的叫空間，有的叫負(fù)形，簡單字面理解就是一個(gè)頁面中的空白區(qū)域，包括文字和文字之間區(qū)域，它可以用在元素周圍，也可以運(yùn)用到元素和元素之間，它的目的是讓元素更加突出，在視覺設(shè)計(jì)中，這個(gè)空間一般指的頁面中，文字段落，圖片，按鈕，圖標(biāo)，之間的間距。

‍‍雖然叫留白，但留白不一定是白色的，它可以是任何顏色，紋理，圖案，或背景。

留白可以是一張圖片背景，也可以是商品的照片

留白也可以是一張渲染氛圍的照片

留白也可以是一個(gè)帶顏色的， 不一定是白色的

留白也可以是一個(gè)紋理圖案，運(yùn)用到我們的設(shè)計(jì)中，空間就像我們生活中必不可少的空氣一樣，空氣對于我們來說重要性不言而喻，那么設(shè)計(jì)中的空氣是什么，就是空間，留白等。

02/

為什么留白很重要

想象一下，我們進(jìn)入一個(gè)菜市場，里面各種箱子，貨架，到處擺滿了東西，在這種條件下你能專注么？能快速找到你想要的東西么？這和我們用戶體驗(yàn)一樣，當(dāng)用戶打開頁面的時(shí)候，到處是各種的功能，用戶很容易迷失在里面!

早期的word帶給用戶太多的信息，雜亂的內(nèi)容完全找不到你需要的功能，用戶其實(shí)并不想看這么多功能。

早期的國內(nèi)新聞門戶，展現(xiàn)給用戶內(nèi)容太多

包括上圖這些，我們平時(shí)經(jīng)常用到注冊登錄頁面，這么多冗余的信息。

所以設(shè)計(jì)里面空間很重要，沒有足夠的空間和留白會大大分散用戶的關(guān)注力，超載的信息和太多干擾的元素，我們需要給用戶足夠多的空氣，凸現(xiàn)最重要的內(nèi)容給到頁面中。

03/

留白的作用是什么？

1. 區(qū)隔內(nèi)容

還記得之前分享的格式塔原理么，當(dāng)元素位置靠在一起時(shí)候，會認(rèn)為是一個(gè)組或者一個(gè)元素。間距過散(如圖上)會導(dǎo)致頁面缺乏清晰的結(jié)構(gòu)，元素之間很混亂，需要通過空間幫助我們組織信息。

上面這兩個(gè)案例留白空間感很足，就是運(yùn)用空間來分組內(nèi)容，讓用戶更加明確每個(gè)模塊有什么內(nèi)容。

2. 聚焦

蘋果網(wǎng)站，通過留白，通過空間來強(qiáng)調(diào)新的手機(jī)，一個(gè)頁面就只有一個(gè)焦點(diǎn)內(nèi)容就是這部手機(jī)。

Airmax官方， 通過一雙鞋來強(qiáng)調(diào)新款的鞋很輕，很輕量，很科技感。

OKINAWA官方網(wǎng)站，只有一個(gè)主頁面以及一把刀子，強(qiáng)調(diào)這是一個(gè)廚房用品的網(wǎng)站。

韓國電商29CM App，每個(gè)頁面都是聚焦頭部大的圖片區(qū)域，來強(qiáng)調(diào)今日推薦主題或推薦單品。

APP STORE ，只聚焦一個(gè)產(chǎn)品，凸顯今日推薦。

3. 提高易讀性

通過留白，更聚焦內(nèi)容，同時(shí)信息更加簡單，用戶理解成本低。

留白很好的區(qū)分了每個(gè)模塊和模塊之間的關(guān)系，形成了很好的視覺引導(dǎo)。

左側(cè)的設(shè)計(jì)很擁擠，缺少呼吸空間感，給眼睛帶來了很大壓力，右邊設(shè)計(jì)良好空間感，提升了設(shè)計(jì)的閱讀性。

當(dāng)標(biāo)簽接近與其相關(guān)的字段時(shí)候，傳遞的信息更加明確，好的空間感，讓信息閱讀性更好。

04/

留白有哪幾種?

1. 負(fù)留白

這個(gè)留白主要是負(fù)形留白，直接決定了設(shè)計(jì)的整體美感，不僅是美感，同時(shí)也是引導(dǎo)關(guān)注內(nèi)容，只有四周有足夠的負(fù)形留白空間，才能引起關(guān)注。

圖中白色負(fù)形空間，能夠增加頁面的可掃描性，同時(shí)很好的增加了視覺層次。

這個(gè)案例中設(shè)計(jì)師很好的運(yùn)用照片作為背景，同時(shí)充當(dāng)著負(fù)形的角度，最重要的是，照片元素和內(nèi)容是互相關(guān)聯(lián)的，負(fù)形設(shè)計(jì)成為了一個(gè)元素，同時(shí)整體也很和諧。

負(fù)形同時(shí)能很好的為頁面提供呼吸感，不會感覺到亂，同時(shí)將用戶注意力放到核心元素上了。

2. 正留白

與負(fù)留白相反就是正留白，它不僅僅考慮元素四周的空間和留白，同時(shí)還考慮元素本身的大小，通過改本元素本身大小，是控制畫面層次結(jié)構(gòu)很好的方法。

負(fù)留白通過尺寸大小，粗細(xì)對比，產(chǎn)生的對比度，是很多驚艷的設(shè)計(jì)和普通設(shè)計(jì)之間的最大差異，我們經(jīng)�？匆娨粋�(gè)好的設(shè)計(jì)一定是對于正空間，負(fù)空間運(yùn)用的恰到好處。

通過正留白的大小和周圍的空間對比，創(chuàng)建畫面感，同時(shí)創(chuàng)造規(guī)則。

正留白在界面中是很重要的一點(diǎn)，很多新手設(shè)計(jì)師在設(shè)計(jì)時(shí)候，很容易把正留白設(shè)計(jì)的太大，太大顯得山寨感，太小顯得看不清楚，設(shè)計(jì)時(shí)候一定要整體考慮正負(fù)形留白。

3. 內(nèi)部留白

內(nèi)部留白就是容器里面的留白，也就是我們每天工作中經(jīng)常運(yùn)用到的，文字和文字之間間距，圖片和文字間距，按鈕四周間距等等，這種留白靈活性大，但是也是最難把控的，要么處理的很緊湊，要么處理的很松散。

關(guān)于內(nèi)部留白，也叫間距，在界面中也很重要，關(guān)于內(nèi)容空間一定要注意一致性的規(guī)則，前期一定需要定義好間距規(guī)則，行間距規(guī)則，讓我們的界面都在一整套的體系內(nèi)，也要注意不要讓規(guī)則歸于復(fù)雜，過于復(fù)雜執(zhí)行難度會比較大。

#專欄作家#

Sky，微信公眾號：我們的設(shè)計(jì)日記（ID：helloskys），設(shè)計(jì)交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓設(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。