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