01 .認識留白
在介紹如何使用留白提升用戶體驗之前，我們需要先明確留白的意義。
留白是頁面元素與元素之間，以及元素周圍的空間。當設計師談論留白時，實際上說的是負空間，術語“負空間”起源于傳統(tǒng)藝術形式，它讓我們更準確地捕獲物體的形狀。
▼
“Suprematism: Self Portrait in two dimensions”
負空間就是元素之間的部分 by Kasimir Malevich
雖然我們稱之為留白，但并不意味著就是白色的。只要該空間沒有任何的文字和圖像，即使被填充了任何顏色，這也算是一個留白。所以留白與實際的白色并沒有關聯(lián)，“留白”就是“負空間”。
▼
02 . 為什么留白很重要
留白是一個好設計的基本要素，與傳統(tǒng)藝術一樣，物體在GUI里也需要負空間，文字，Button，Logo，和其他元素需要空間去呼吸，所有優(yōu)秀的用戶界面里，從頂部到底部，頁面中所有的元素都有適當?shù)牧舭住?
空白可分為兩種類型：大留白和小留白。
▼
大留白
小留白
03.七種影響用戶體驗的留白
留白是平衡設計元素的好工具，幫助我們更好得組織內容，提升視覺信息傳達的體驗。
— 1 強調特定元素 —
強調某種元素，是設計師最常見的任務之一，雖然設計師可以用許多視覺方法讓用戶聚焦在某些特定元素上，在焦點的周圍運用留白往往都能獲得比較好的效果。
距離和注意力之間有特定的聯(lián)系，較大的距離能吸引人的注意，周圍的缺失使現(xiàn)有的元素更佳突出。設計師會運用合適的留白去強調重要的元素，例如一段內容，較大的Padding值會加強這個區(qū)域的吸引力，因為屏幕上沒有其它元素可關注。
物體周圍的留白越多，就越容易吸引眼球。
在下面的例子里，Google在設計中大力倡導留白，留白很好地傳達了設計的意圖，我們的注意力在頁面的主要目標上，不會分散給其他區(qū)域。
▼
MailChimp的主頁運用了相同的方法，來突出操作按鈕（call to action），你會注意到“Sign Up Free”這個按鈕立刻吸引了人的注意。
▼
— 2 鏈接相關元素 —
當我們在檢查元素布局時，通常把它看做是一些對象的組合，這是因為我們的大腦會根據(jù)物體之間的相對位置，來創(chuàng)造一個關系模型。格式塔的法則解釋了，臨近的物體會被看做是一個整體。留白也提供了一種視覺線索，看一下這張圖：
很可能你看到的是兩組點陣，而不是12個原點，這是12個相同的點，唯一不同的是他們的間距不同。
這個法則也可以用于交互設計，我們來看下面的Web表單。
- 相關元素成組：我們知道，一組元素靠在一起時，看上去是有關系的，所以相關的標簽要靠得近。左圖較難傳達出標簽與輸入框的關系，而通過調整間距，如右圖，表單的可瀏覽性提高了。
▼
- 相關信息成組：眾所周知，長的表單讓人感到壓迫。用戶在填這些表格的時候會變得猶豫。把相關的字段組合在一起，能幫助用戶了解他們必須填寫的信息。以下的形式中，兩種表格都有相同數(shù)量的字段。不同的是右邊劃分了三個組，內容的數(shù)量是相同的，但是給用戶的印象大不相同。
▼
— 3 防止視覺雜亂 —
許多的App和網(wǎng)站承載著太多的信息和元素，沒有足夠的呼吸空間。這通常由于產(chǎn)品創(chuàng)造者希望傳遞太多的信息，不幸的是，用戶的關注度有限，越多的元素爭搶著注意力，用戶能夠關注到的就越少。
可以看下面的例子，這是一個元素太多引起的極端案例。
▼
當每個看上去都一樣的時候，用戶選不出重要的那一個
許多網(wǎng)站有著相同的問題，缺乏留白會給用戶的眼睛和耐心帶來壓力，充斥著文字和圖片的網(wǎng)站使用戶產(chǎn)生挫敗感，使他們逃離。
雜亂的頁面沒有吸引力，并且不會讓用戶想要閱讀內容，尤其是當沒有視覺層次時。
過多的信息負載讓界面變得混亂，那么減少混亂就能提高界面的可理解性：通過消除干擾，你可以強制用戶只關注即時可見的內容，你可以用留白來減少壓迫性，留白可以減少噪音，讓用戶更能聚焦。當布局達到了留白平衡，各個元素更容易被解讀時，就會帶來更好的用戶體驗。
▼
— 4 通過互動內容引導用戶 —
如果你希望用戶的視線從一個點流向另一個點，你需要給他一個這么做的線索，這個線索就是留白，留白運用的得當時，能為頁面創(chuàng)造自然的視線流動。
特定的留白可以實現(xiàn)有效引導、保持讀者的興趣，如下圖所見，Dropbox通過鋸齒模型引導用戶瀏覽一系列產(chǎn)品的關鍵特征。
▼
空白可以幫助設計師講故事
不對稱是另一種留白技巧，可以用來引導用戶對某一部分的注意，當一個元素運用了不對稱留白，它會立馬就會從周圍的元素中跳脫出來，看起來更有活力。如果你要在頁面中設計一個鏈接或者按鈕，這種方法可以有效引起別人的注意。
▼
非對稱留白非常適合聚焦頁面上的特殊區(qū)域
— 5 提高可讀性 —
內容為王，內容是大多數(shù)應用程序和網(wǎng)站的價值，這就是為什么良好的可用性的一個關鍵方面是內容的可讀性，很多因素可以提高可讀性，比如字體的大小和顏色，或使用標題，留白是其中一個重要因素，因為它對內容的可讀性有直接的影響：
行間距可以大大提高一段文本的可讀性，一般來說，行間距越大，用戶閱讀時候的體驗就越好，但是太大會破壞統(tǒng)一性，使得設計中斷。
▼
段落和文字塊之間的留白有助于幫助人們更好地理解閱讀的內容，根據(jù)2004年的研究，這種空白增加了近20%的可理解性
— 6 運用視覺分隔線 —
設計師經(jīng)常使用橫向或縱向的線去創(chuàng)造分隔線，雖然這樣的分隔線在大多數(shù)情況下是可以的，有一個主要的缺點，大量分隔線的使用會導致視覺的噪音，造成密集擁擠的頁面。
▼
隨著用戶的偏好向更簡潔的界面轉移，對UI中的基本元素進行解構是成功的關鍵。可以用負空間來布局，而不是線，更少的分隔線能營造清爽、現(xiàn)代和更實用的感受，大方地使用留白可使一些復雜的界面看起來更簡潔友好。這一變化背后的真正意義在于，在關注內容和功能同時消除冗余的元素。
▼
— 7 創(chuàng)造成熟優(yōu)雅的感受 —
雖然留白經(jīng)常被看作是改善用戶體驗的技巧，但它也可以被用于純粹的審美目的，大量留白的網(wǎng)站能反映出極簡和奢華感。
▼
留白有助于提高整體設計的基調——通過把更多的焦點放在產(chǎn)品本身，使產(chǎn)品看上去更奢華。
04. 關于利益相關者的幾句話
現(xiàn)在你可能知道了留白的重要性，而另一方面，留白可能引起設計師和利益相關者的矛盾。“留白太多了，我們可以用來做什么？”是我們經(jīng)常從利益相關者（客戶或經(jīng)理）那里聽到的。
把這種要求作為一個機會去教育利益相關者，作為設計師，我們的工作就是幫助他人理解為什么留白是用戶體驗重要的組成部分，宣揚并解釋你的思考過程，如果這不起作用，你可以采用A/B測試，測試一個設計的兩個版本，一個由設計師提出，一個由客戶提出，用戶可能會喜歡那個不那么混亂的版本。
05.結論
留白不是一個空白的畫布，而是一個強大的設計工具，但是這個工具很難掌握：現(xiàn)實應用中的留白既是藝術也是科學，掌握如何使用留白來創(chuàng)建良好的布局需要實踐。你實踐的越多，學到的也就越多。
原文地址：medium
譯文地址：51UXC（公眾號）
譯者：51UXC 翻譯社
轉載請注明：學UI網(wǎng)》如何在界面設計中使用留白
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司