留白，可以讓設計效果更有呼吸感，使界面乾凈有序，同時還能讓用戶更專註於我們要凸顯的內容。

音樂家Frank Zappa說過：

“一個好的音樂，音符之間一定需要足夠的空間，這樣音樂才能在空氣中發揮作用。”

試想一下，如果你聽到一首歌，都是同樣的節奏，以至於每個音符之間沒有區別，那麼這首歌就不會動聽。

設計中的留白亦是如此，留白可以說是隱形的，但卻是設計中很重要的因素，那麼如何在界面中使用空間留白製造呼吸感，使界面有乾凈有序呢？

01 什麼是設計中的留白？

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

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

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

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

留白也可以是一個帶顏色的， 不一定是白色的

留白也可以是一個紋理圖案，運用到我們的設計中，空間就像我們生活中必不可少的空氣一樣，空氣對於我們來說重要性不言而喻，那麼設計中的空氣是什麼，就是空間，留白等。

02 為什麼留白很重要

想象一下，我們進入一個菜市場，裡面各種箱子，貨架，到處擺滿了東西，在這種條件下你能專註麽？能快速找到你想要的東西麽？這和我們用戶體驗一樣，當用戶打開頁面的時候，到處是各種的功能，用戶很容易迷失在裡面!

早期的word帶給用戶太多的信息，雜亂的內容完全找不到你需要的功能，用戶其實並不想看這麼多功能。

早期的國內新聞門戶，展現給用戶內容太多

包括上圖這些，我們平時經常用到註冊登錄頁面，這麼多冗餘的信息。

所以設計裡面空間很重要，沒有足夠的空間和留白會大大分散用戶的關註力，超載的信息和太多干擾的元素，我們需要給用戶足夠多的空氣，凸現最重要的內容給到頁面中。

03 留白的作用是什麼？

1. 區隔內容

還記得之前分享的格式塔原理麽，當元素位置靠在一起時候，會認為是一個組或者一個元素。間距過散(如圖上)會導致頁面缺乏清晰的結構，元素之間很混亂，需要通過空間幫助我們組織信息。

上面這兩個案例留白空間感很足，就是運用空間來分組內容，讓用戶更加明確每個模塊有什麼內容。

2. 聚焦

蘋果網站，通過留白，通過空間來強調新的手機，一個頁面就只有一個焦點內容就是這部手機。

Airmax官方， 通過一雙鞋來強調新款的鞋很輕，很輕量，很科技感。

OKINAWA官方網站，只有一個主頁面以及一把刀子，強調這是一個廚房用品的網站。

韓國電商29CM App，每個頁面都是聚焦頭部大的圖片區域，來強調今日推薦主題或推薦單品。

APP STORE ，只聚焦一個產品，凸顯今日推薦。

3. 提高易讀性

通過留白，更聚焦內容，同時信息更加簡單，用戶理解成本低。

留白很好的區分了每個模塊和模塊之間的關係，形成了很好的視覺引導。

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

當標簽接近與其相關的字段時候，傳遞的信息更加明確，好的空間感，讓信息閱讀性更好。

04 留白有哪幾種?

1. 負留白

這個留白主要是負形留白，直接決定了設計的整體美感，不僅是美感，同時也是引導關註內容，只有四周有足夠的負形留白空間，才能引起關註。

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

這個案例中設計師很好的運用照片作為背景，同時充當著負形的角度，最重要的是，照片元素和內容是互相關聯的，負形設計成為了一個元素，同時整體也很和諧。

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

2. 正留白

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

負留白通過尺寸大小，粗細對比，產生的對比度，是很多驚艷的設計和普通設計之間的最大差異，我們經常看見一個好的設計一定是對於正空間，負空間運用的恰到好處。

通過正留白的大小和周圍的空間對比，創建畫面感，同時創造規則。

正留白在界面中是很重要的一點，很多新手設計師在設計時候，很容易把正留白設計的太大，太大顯得山寨感，太小顯得看不清楚，設計時候一定要整體考慮正負形留白。

3. 內部留白

內部留白就是容器裡面的留白，也就是我們每天工作中經常運用到的，文字和文字之間間距，圖片和文字間距，按鈕四周間距等等，這種留白靈活性大，但是也是最難把控的，要麼處理的很緊湊，要麼處理的很鬆散。

關於內部留白，也叫間距，在界面中也很重要，關於內容空間一定要註意一致性的規則，前期一定需要定義好間距規則，行間距規則，讓我們的界面都在一整套的體系內，也要註意不要讓規則歸於複雜，過於複雜執行難度會比較大。

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），設計交流可加微信：hellosky678，人人都是產品經理專欄作家。原支付寶體驗設計專家，阿裡巴巴天貓設計專家；10年知名互聯網公司設計經驗，對於產品從0到1、品牌定位、金融產品、設計規範、運營規範、大促等有豐富實戰經驗。

本文原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議