Less is more?是20世紀(jì)30年代著名的建筑師路德維?！っ芩埂し驳铝_說(shuō)過(guò)的一句話，意思是“少即多”這是一種提倡簡(jiǎn)單，反對(duì)過(guò)度裝飾的設(shè)計(jì)理念。簡(jiǎn)單的東西往往帶給人們的是更多的享受。

同樣少即是多也是一種高級(jí)的簡(jiǎn)約的的UI設(shè)計(jì)風(fēng)格，這種思想指導(dǎo)下的界面設(shè)計(jì)，不會(huì)一味地要求設(shè)計(jì)師在界面上堆積元素，而是會(huì)從界面的各個(gè)方面（從組件到頁(yè)面，從微觀到宏）考慮如何恰當(dāng)?shù)丶尤肟瞻椎膽?yīng)用。

學(xué)會(huì)正確地使用留白，可以獲得一個(gè)和諧、清晰易讀的界面。更重要的是，這種思路下得到的界面，通常有效且易于使用。通過(guò)日常的教學(xué)，UXD老師為同學(xué)們總結(jié)了7個(gè)有用的設(shè)計(jì)留白技巧，包含：

01.遵循鄰近法則02.確定留白基線03.集中特定設(shè)計(jì)元素04.統(tǒng)一的測(cè)量空間方法05.使用間距系統(tǒng)06.避免相似間距值07.適當(dāng)調(diào)整行距

下面我們就逐一帶大家了解每個(gè)技巧的具體使用方法，幫助同學(xué)們找到界面設(shè)計(jì)過(guò)程中的節(jié)奏感。

#01遵循鄰近法則

UI中元素之間的空白量指示元素之間如何關(guān)聯(lián)，該定律表明：
1.相關(guān)元素應(yīng)相距較近，相反，不相關(guān)的元素應(yīng)隔開(kāi)。2.相同“類型”的元素應(yīng)均勻間隔。
請(qǐng)遵循這些基本規(guī)則，以幫助用戶輕松組織和感知UI中的邏輯分組。

空白與文本的大小，粗細(xì)和顏色緊密配合，以傳達(dá)界面中元素的層次結(jié)構(gòu)。

#02確定留白基線

基線可以讓你的設(shè)計(jì)保持疏松和呼吸感，改善界面可用性的可靠方法是，確保所有元素之間都有足夠的留白空間。

此處的控件之間的距離太近。

此處的控件間隔適當(dāng)，因此效果更舒適。
對(duì)于大多數(shù)UI來(lái)說(shuō)，擁有正確的留白通常比沒(méi)有留白要美觀、工整很多。

#03集中特定設(shè)計(jì)元素

頁(yè)面上較少的信息和元素可以讓界面清楚和突出重點(diǎn)，并讓用戶注意到顯示在頁(yè)面上的信息和元素。
留白也可以是一種強(qiáng)調(diào)文本的有效方法，它可以與提高文本大小或更改文本的顏色、大小寫(xiě)或粗細(xì)結(jié)合使用，甚至可以替代。.
.
.
這句話被空白包圍著，就是一個(gè)很好的例子。...使元素變大或變亮并不是吸引人們注意的唯一方法，留白反而是即可以保證設(shè)計(jì)精致又能突出設(shè)計(jì)重點(diǎn)的方法。

#04統(tǒng)一測(cè)量空間方法

相鄰文本元素之間的間距，可以通過(guò)以下兩種方法之一進(jìn)行測(cè)量。

1.在相鄰的“邊界框”之間

大多數(shù)UI渲染引擎（例如，網(wǎng)頁(yè)上的文檔對(duì)象模型）都是通過(guò)這種方法來(lái)測(cè)量相鄰元素之前的間距的。但是此方法不是特別精確，因?yàn)槊總€(gè)邊界框的頂部和底部都存在多余空間。

測(cè)量相鄰“邊界框”之間的空間。

2.在相鄰文本高度之間

下面的這種測(cè)量元素間真實(shí)間隔的方法更精確，但可能實(shí)現(xiàn)起來(lái)比較復(fù)雜。

測(cè)量相鄰文本高度之間的空間。
兩種方法都是合理的，但是要權(quán)衡取舍。這里需要強(qiáng)調(diào)的是，在設(shè)計(jì)和實(shí)現(xiàn)中都使用相同的空間測(cè)量方法，這樣可以確保將設(shè)計(jì)準(zhǔn)確地轉(zhuǎn)換為代碼。

#05使用間距系統(tǒng)

間距系統(tǒng)指定要在設(shè)計(jì)中使用的一組視覺(jué)觀感較好的間距值，使用間距系統(tǒng)可以幫助給UI帶來(lái)一致性和和諧感。

在間距系統(tǒng)中只需要幾個(gè)值。上圖案例中使用四個(gè)不同的間距值，即12、16、32和56，構(gòu)建了間距系統(tǒng)。

間距系統(tǒng)會(huì)迫使你從一組受約束的選項(xiàng)中做出UI設(shè)計(jì)決策。有了間距系統(tǒng)后，你只需在UI設(shè)計(jì)過(guò)程中考慮系統(tǒng)中的少數(shù)間距值，這使設(shè)計(jì)迭代更快，更系統(tǒng)。

#06避免相似間距值

當(dāng)間距值在數(shù)學(xué)上不同，但在視覺(jué)上過(guò)于相似時(shí)，用戶在UI中感知邏輯分組的方式可能會(huì)變得模棱兩可。對(duì)比很重要！如果你要使兩個(gè)間距值不同，則需要很明顯地看出它們實(shí)際上是不同的。

每個(gè)“動(dòng)作行”上方和下方的空間太相似，因此尚不清楚每個(gè)動(dòng)作行應(yīng)與哪個(gè)視頻相關(guān)聯(lián)。

每個(gè)“動(dòng)作行”下方都有足夠的空間，有助于闡明每個(gè)視頻及其相關(guān)動(dòng)作之間的關(guān)系。
考慮使間距系統(tǒng)中的值“散布”區(qū)域更寬，這可以使得相鄰間距值之間在視覺(jué)上有明顯的差異。

這是一個(gè)非線性間隔系統(tǒng)，具有從一個(gè)間隔值到下一個(gè)間隔值的逐漸增大的增量。

#07適當(dāng)調(diào)整行距

UI設(shè)計(jì)中，不需要可以保持相同的比例行高，因?yàn)樵黾游谋敬笮?dǎo)致字號(hào)較大的每行文本之間有太多空白。在實(shí)際操作中遵循字號(hào)越大，比例行高越小的原則，比如大標(biāo)題的比例行高通常應(yīng)小于正文的行高。

這兩行文字彼此相距太遠(yuǎn)。

當(dāng)使用較小的行高時(shí)，兩行文本被視為一個(gè)視覺(jué)組。

#08適元素關(guān)聯(lián)

在信息密集的UI中，除了空白以外，還需要依靠其他技術(shù)來(lái)傳達(dá)界面中的元素如何相互關(guān)聯(lián)，例如：

?在一組相關(guān)元素周圍添加填充或邊框；?使用一條線將垂直排列緊密的相鄰元素分開(kāi)，或者，使用（“·”）分隔水平排列的相鄰元素；?更改文本的大小、大小寫(xiě)、粗細(xì)或顏色，以關(guān)聯(lián)或區(qū)分UI元素。

通過(guò)減少空格，減小文本大小以及添加細(xì)微的水平線來(lái)確保相鄰行在視覺(jué)上彼此不同，從而提高信息密度。

使信息更加密集可以提高其使用效率，信息密集的界面只要通過(guò)合理的信息分層，不一定會(huì)令人感到混亂或不堪重負(fù)。

了解空白的一種有效方法（一般而言指UI設(shè)計(jì)）是臨摹練習(xí)：從你喜歡的設(shè)計(jì)中選擇一個(gè)或多個(gè)界面，然后完整地重新創(chuàng)建它。通過(guò)這種臨摹練習(xí)，你將深入了解許多這些優(yōu)秀的設(shè)計(jì)中容易讓人忽視的小細(xì)節(jié)，并了解上述有關(guān)空白的技巧如何在精心設(shè)計(jì)的UI中實(shí)際發(fā)揮作用。

為什么界面“看起來(lái)正確”背后一定是有原因的，通過(guò)經(jīng)驗(yàn)和實(shí)踐，可以磨練如何在設(shè)計(jì)中應(yīng)用留白的視覺(jué)感和直覺(jué)。