引言

互聯(lián)網(wǎng)飛速發(fā)展的這個時代，非常多優(yōu)秀的用戶體驗團(tuán)隊，無私地公開了他們的設(shè)計規(guī)范、UI 組件，供行業(yè)有需要的設(shè)計團(tuán)隊學(xué)習(xí)和使用。然而盡管拿到這些優(yōu)秀的設(shè)計指導(dǎo)和組件庫，依然不一定能夠輸出非常有品質(zhì)的設(shè)計，仔細(xì)研究發(fā)現(xiàn)，其中非常重要的一個原因，我們認(rèn)為是：不同 level 的設(shè)計師對“間距”的把握程度不同，拼湊組件輸出的界面信息層次和整體性不好。

>PART 1：UI 間距基本原理

資深 UI 設(shè)計師憑借經(jīng)驗和感覺能快速的搭建高質(zhì)量的模塊和頁面，而新手或資歷不深的 UI 設(shè)計師，費了九牛二虎之力搭建出來的頁面總是顯得有一絲不夠完美，要命的是可能他們自己卻看不出來。

就拿很簡單的一個登錄模塊，下面兩個設(shè)計稿對比哪一種更為優(yōu)雅呢？如果你說右邊更好，那我們更有必要一起來繼續(xù)閱讀這篇文章了。

1. 間距與層級關(guān)系

在平面設(shè)計排版中間距非常影響設(shè)計的品質(zhì)，間距太緊，會感到信息擁擠，難以閱讀；間距太松，會顯得內(nèi)容相關(guān)度弱，版面太空洞。

一個對象周圍的間距越大，就越容易吸引用戶的注意力，這是大留白；間距較遠(yuǎn)的信息區(qū)分較大，而間距較小的信息之間聯(lián)系緊密。這是間距在人的內(nèi)心最基礎(chǔ)的理解和感受。這一規(guī)律在 word 的章節(jié)排版體現(xiàn)得最為明顯：

源自網(wǎng)絡(luò)截圖 https://www.sohu.com/a/396590247_698728

圖中 word 排版，保障正文閱讀的最小行高是最小間距，段落標(biāo)題與正文間間距稍大，章節(jié)標(biāo)題與段落標(biāo)題之間間距更大。當(dāng)然有的 word 排版章節(jié)層級更為復(fù)雜，但也是遵循這一基礎(chǔ)規(guī)律：間距的大小需根據(jù)信息層級由大到小來同等變化，也就是更高層級的信息板塊需要使用更寬松的間距，間距隨層級遞減而需要相應(yīng)減小。當(dāng)然最低層級的信息為了保障可閱讀性應(yīng)該具備一個最基礎(chǔ)的間距。

在 UI 界面中，我們同樣遵循該規(guī)律，通過間距來區(qū)分層級關(guān)系，可以很好地幫助用戶理解界面信息。

iOS 的扁平化以及 Material Design 推行以信息為主、弱化視覺干擾，減少一些不必要的線框修飾的設(shè)計元素，合理控制間距區(qū)分層級，提升視覺美感。

我們看一個例子，去掉分割線后，利用間距的變化將界面信息層級簡化的效果：

去除分割線，將信息重新分組，組內(nèi)間距縮小，組間間距放大，更清晰地把信息呈現(xiàn)給用戶，界面更加整潔美觀。連標(biāo)題與內(nèi)容之間的分割線也可以略去，標(biāo)題下方也留有足夠的間距來突出標(biāo)題文字內(nèi)容，還可以一定程度上節(jié)約縱向空間。

無論是 web 端還是移動端，現(xiàn)在越來越多的設(shè)計都盡量減少線條對畫面的割裂感，采用間距控制來把握信息層級關(guān)系。但是間距在 UI 界面上不能憑感覺給，應(yīng)該遵循上面所說的層級關(guān)系規(guī)律——間距的大小需根據(jù)信息層級由大到小來同等變化。

2. 橫縱向間距協(xié)調(diào)感

通常 word 的排版只有縱向間距的考慮，也就是行間距，而字符間距是不需要去更改的。但 UI 設(shè)計當(dāng)中，小到一個圖標(biāo)、控件，大到頁面布局，都需要兼顧橫縱向的間距，否則設(shè)計效果都不會好看。

在 UI 設(shè)計當(dāng)中，我們運用各種各樣的元素、控件進(jìn)行組合設(shè)計，對于間距的控制沒有平面的自由度高。如上圖左右對比，橫向的邊距與縱向的邊距相等或接近時，界面布局會顯得更加協(xié)調(diào)，橫向間距過大或過小，都顯得不自然，這就是橫縱向間距的協(xié)調(diào)感。

在 UI 設(shè)計當(dāng)中的協(xié)調(diào)感，從一個文字、一個圖標(biāo)，到一個輸入框、一個按鈕，最后形成彈窗、表單、甚至是頁面、產(chǎn)品，應(yīng)該有一個全局統(tǒng)一的高矮胖瘦的感覺。

通常為了廣泛運用，我們所設(shè)計的最基礎(chǔ)的圖標(biāo)是方形的，產(chǎn)品中運用的文字主體也是方形的，所以在我們最小一級的層級的橫縱向間距基本是相同的。那么以此為基礎(chǔ)，將文字和圖標(biāo)放在輸入框、彈窗等控件當(dāng)中，也盡量保持統(tǒng)一協(xié)調(diào)的間距比例。

當(dāng)我們設(shè)計一個長條狀的組件，那么其內(nèi)部左右的橫向間距留白會比上下的縱向間距留白更大，反過來就不協(xié)調(diào)。

3. 間距與文字行高

通常的界面設(shè)計當(dāng)中，一般以文字信息為主，通過不同的布局和圖形輔助設(shè)計，幫助用戶更好地理解系統(tǒng)界面。web 設(shè)計當(dāng)中瀏覽器中所能識別的最小字號是 12 號字，為了保障中長段文字信息的可閱讀性，通常會給文字排版賦予一定的行高，當(dāng)文字自動換行時會保持一個利于閱讀的間距，比如：12 號字 18px，14 號字 20px，16 號字 24px，20 號字 32px……

按上圖中我們以同等的縱向間距為 8px 來排版這些文字時，他們之間實際的間距，人眼所能感受到的距離其實是青色矩形塊所表示的間距，他們遠(yuǎn)比 8px 要大，而且各不相同。

我們的原子級控件、組件中，均以文字為主，包括了行高的考慮，所以在組件使用時，不是那么容易控制好間距的協(xié)調(diào)感。

如同下圖中 B 端常見的一些基礎(chǔ)的信息板塊，組件之間的拼裝，幾乎沒有見到有相關(guān)的指導(dǎo)。不同的設(shè)計師在頁面實施時可能把間距處理得不一樣，同一個設(shè)計師，在不同批次的設(shè)計當(dāng)中也有可能不一樣，并且前端實現(xiàn)出來之后很難肉眼檢視是否 100%還原。

4. 間距與盒模型

為了一定程度上解決 B 端產(chǎn)品中常見的這個問題，也為了提高效率，減少設(shè)計師在這種間距審美上的糾結(jié)，同時也考慮到前端能更好的理解我們的設(shè)計，做到高度還原，我們需要理解前端經(jīng)典的“盒模型”概念。

設(shè)計與前端在“盒模型”上達(dá)成一致，才能對應(yīng)賦予盒子準(zhǔn)確的內(nèi)間距和外間距，才能保障設(shè)計的準(zhǔn)確還原。當(dāng)設(shè)計也把信息拆解成一個個的盒子時，就能記住相同層級的盒子應(yīng)該賦予的間距。

在“盒模型”中，所有的內(nèi)容之間只存在 2 種關(guān)系：包含和并列，我們界面中也是如此。

如下圖，頁面標(biāo)題和它下方模塊中的內(nèi)容屬于包含關(guān)系，下方模塊中，一級標(biāo)題 1 和一級標(biāo)題 2 屬于并列關(guān)系。

從開發(fā)的角度來看，所有界面內(nèi)容都可以按這 2 種方式去實現(xiàn)：

①包含關(guān)系

開發(fā)通常按下圖的方式實現(xiàn)包含關(guān)系，內(nèi)容從屬于標(biāo)題，考慮到排版的整齊性，通常內(nèi)容的 padding 距離要與標(biāo)題的 padding 一致。

當(dāng)然這里如果標(biāo)題與內(nèi)容板塊之間有明顯分隔，如下圖，標(biāo)題盒模型就有另一種形態(tài)，此時標(biāo)題文字到分隔區(qū)域之間多一個 padding 距離。

②并列關(guān)系

開發(fā)實現(xiàn)并列關(guān)系可以如下圖，兩塊內(nèi)容并列，不做標(biāo)題設(shè)定，則通常內(nèi)容之間會采用 margin 處理距離，margin 值與其父級的 padding 值接近。

這兩種方式的設(shè)計與實現(xiàn)，都圍繞信息內(nèi)容所占據(jù)的視覺區(qū)域，遵循間距與層級關(guān)系最基礎(chǔ)的原則，通過相對協(xié)調(diào)的間距來處理信息層級。整個產(chǎn)品界面的信息層級都能以這兩種關(guān)系進(jìn)行相互嵌套實現(xiàn)。

>PART 2：我們的間距規(guī)范

1. 界面層級的梳理

在 UI 設(shè)計界面中每一個間距的設(shè)置是有邏輯的。首先我們需要了解內(nèi)容是什么，他們之間的關(guān)系是什么，然后利用間距層級遞進(jìn)的方式來規(guī)整頁面信息，從而得到有節(jié)奏感、有呼吸感、能讓用戶快速理解的頁面。

如下圖，根據(jù)內(nèi)容的層級關(guān)系，最高層級的間距為 64，層級從大到小，間距也同時遞減，遵循了間距與層級關(guān)系的基本原理。

有關(guān)內(nèi)容的層級關(guān)系，請參閱 https://www.uisdc.com/ui-cheat-sheet-spacing ，圖取自此文

所以我們在設(shè)計時需要優(yōu)先梳理出界面的信息層級，才能相應(yīng)設(shè)計不同的間距來引導(dǎo)用戶瀏覽界面。

2. 層級間距的基準(zhǔn)設(shè)定

在 B 端設(shè)計中，我們通常定義最小單位為 4px 的網(wǎng)格系統(tǒng)，以 4 的倍數(shù)為基準(zhǔn)來規(guī)范間距。一般我們以 14 號字為基礎(chǔ)正文字號，來定義按鈕、標(biāo)簽、輸入框等原子組件，然后使用這些組件進(jìn)行界面設(shè)計。

按照上文中“盒模型”的介紹，我們可以把界面中的元素都封裝到“盒子”當(dāng)中，賦予他們 padding 和 margin 值來控制間距。

從圖中可以看出，在左邊包含關(guān)系中，內(nèi)容盒模型內(nèi)邊距 padding 跟標(biāo)題的 padding 保持協(xié)調(diào)一致，而右邊并列關(guān)系中，兩個并列子級之間的外邊距 margin 與父級的內(nèi)邊距 padding 保持協(xié)調(diào)一致。

所以不管包含還是并列關(guān)系，間距的控制都與父級的內(nèi)邊距 padding 相關(guān)。而這個父級的內(nèi)邊距由什么決定呢?

左圖中標(biāo)題所處的層級是父級，它包含下面的內(nèi)容子級。標(biāo)題的 padding 大小其實由標(biāo)題的文本高度決定（上文 2.2 和 2.3 中介紹的縱橫向間距的協(xié)調(diào)感與文字行高的關(guān)系），標(biāo)題字號越大，對應(yīng)標(biāo)題盒子的 padding 值需要更大，標(biāo)題字號越小，則 padding 值越小。

右圖中 margin 向 padding 看齊，而 padding 由其父級的 padding 決定，這就是嵌套（他總需要有一個父級包含著這個盒子）。

反過來，兩個并列的內(nèi)容子級里也可以有包含關(guān)系的嵌套盒模型，如下圖。兩個或兩個以上包含關(guān)系的盒子并列時，其父級如果沒有標(biāo)題，意味著這是一個空盒子，padding 為 0，那么理論上并列的子級之間的 margin 值應(yīng)該也為 0，所以兩個并列內(nèi)容之間的間距為 padding 值 x2。

當(dāng)以 14 號基準(zhǔn)字號的組件來進(jìn)行設(shè)計時，我們發(fā)現(xiàn)最小的層級的 padding 為 20px 與組件的內(nèi)間距設(shè)計最為協(xié)調(diào)。

當(dāng)我們設(shè)計 14 號標(biāo)題的上一層內(nèi)容時，相當(dāng)于在它的外層再套一層盒子，設(shè)定一個更大的字號 16 和更大的 padding24px。我們直接嵌套發(fā)現(xiàn)，出現(xiàn)兩層盒模型的 padding 值直接疊加，導(dǎo)致空間浪費，并且縮進(jìn)后的文字排版并不美觀。

其實按照上文中“盒模型”的嵌套規(guī)則，16 號標(biāo)題的內(nèi)容子集 padding 值應(yīng)該為 0，直接整個嵌套標(biāo)題 14 號包含關(guān)系的整個盒模型。而直接這樣嵌套時發(fā)現(xiàn)兩級標(biāo)題并沒有左對齊，此時需要將父級標(biāo)題的 padding 調(diào)整為 20px。如下圖中的效果，通過標(biāo)題字號也能區(qū)分出層級，節(jié)省了直接嵌套的空間浪費。

所以我們定義 14 號和 16 號的標(biāo)題文字，都可以用 padding 為 20px 的間距來進(jìn)行控制。

在反推過程中，我們發(fā)現(xiàn)兩個并列內(nèi)容之間的間距為 padding 值 x2，即 20x2=40，這個間距過大，浪費了太多空間，適當(dāng)?shù)恼{(diào)整為 32px 后，顯得更為協(xié)調(diào)。所以當(dāng)并列的兩個盒模型同時有 20px 的內(nèi)間距留白時，并列盒子之間留白距離要適當(dāng)縮減為 32px（20×2-8）。

在業(yè)務(wù)復(fù)雜的 B 端產(chǎn)品中，層級往往會超過 2 級，這時該怎么辦呢?

3. 盒模型嵌套底板空間循環(huán)

我們發(fā)現(xiàn)，當(dāng)一個模塊空間中出現(xiàn)超過 3 個層級時，再用左對齊的方式，用戶的理解難度會變得很大（如下圖），雖然下圖中通過了多種方式來解釋層級關(guān)系，如分割線、不同大小的標(biāo)題、嵌套框，但是整個看上去依然不太理想。

心理學(xué)家 SusanWeinschenk 說過：人在識別物體時會尋找規(guī)律。所以我們要盡量創(chuàng)建規(guī)律來幫助用戶快速解讀信息。

盒模型的嵌套其實就如同套娃，每層都具備自己一個獨立的空間，循環(huán)的嵌套。于是我們嘗試著采用了更換底板背景來區(qū)分嵌套的空間，并限制單個底板空間中出現(xiàn)的層級不超過 2 級，超出則更換嵌套底板，那么嵌套后間距及標(biāo)題參數(shù)則可以重新循環(huán)。按照這種規(guī)律設(shè)計出的結(jié)果，非常富有簡單清晰的節(jié)奏感，用戶理解起來更加容易。

若嵌套后只有一層標(biāo)題時，三級標(biāo)題優(yōu)先采用小號標(biāo)題（14 號），因為它看起來更加協(xié)調(diào)。

當(dāng)然這種嵌套也不是無限的，一個頁面中出現(xiàn)三個底板的嵌套基本上已經(jīng)達(dá)到了極限，再多時就需要考慮從業(yè)務(wù)角度去梳理信息層級，通過頁面的層級來表達(dá)復(fù)雜的信息關(guān)系。

4. 豐富層級的靈活運用

通過盒模型嵌套底板空間循環(huán)的方式，我們可以使用相同的間距來解決信息層級區(qū)分設(shè)計，并且很容易的保障前端的高度還原。但是 B 端復(fù)雜的系統(tǒng)中，往往上述兩種標(biāo)題不足以覆蓋全部的場景，我們通常用于包含關(guān)系中的標(biāo)題層級，還有 Tab 選項卡，根據(jù)基準(zhǔn)的 20px 間距，和 14、16 號兩種尺寸的標(biāo)題字號，我們擴(kuò)展出 3 種尺寸的標(biāo)題（大、中、?。┖?3 種 tabs（大尺寸線條型、中尺寸線條型、膠囊型）。設(shè)計使用時層級由高到低，依次使用，不允許跨級。

大標(biāo)題（20 號）用于概括整體頁面，頁面中只會有一個，它的行高（32px）和視覺看到的字高（26px）相差了 6px，根據(jù)上方基準(zhǔn) padding 為 20px，那么橫縱向的間距會不太協(xié)調(diào)，我們將左右和下方的 padding 值微調(diào)成 24px 后不協(xié)調(diào)感得到改善。

注意：同一層級容器內(nèi)，線條 Tab-Bar 不能出現(xiàn) 2 個，容器嵌套時允許出現(xiàn) 2 個

5. 總體規(guī)則導(dǎo)出

總結(jié)一下規(guī)則（以 14 號字為基準(zhǔn)）：

1. 梳理清晰全局的信息內(nèi)容，統(tǒng)一遵循“盒模型”包含和并列關(guān)系，基準(zhǔn)間距統(tǒng)一為 20px；
2. 當(dāng)并列的兩個盒模型同時有 20px 的內(nèi)間距留白時，并列盒子之間留白距離要適當(dāng)縮減為 32px（20×2-8）；
3. 采用盒模型循環(huán)底板嵌套進(jìn)行層級設(shè)計，單個底板只允許兩層層級，超出時采用嵌套更換底板。注意：若嵌套后只有一層層級時，三級標(biāo)題優(yōu)先采用小號標(biāo)題（14 號）；
4. 3 種標(biāo)題與 3 種 Tab 根據(jù)層級由高到低，依次使用，不允許跨級。20 號大標(biāo)題為頁面標(biāo)題，它的子級左右下方的 padding 值為 24。

>PART 3：總結(jié)回顧

上述的方式是基于我們產(chǎn)品的特性分析得出的，它的目的是為了減輕設(shè)計師在設(shè)計過程中對間距的糾結(jié)，同時提升整體產(chǎn)品的可讀性和一致性，當(dāng)然不能以一概全。

接下來我們會進(jìn)一步地在更多的產(chǎn)品和場景中去驗證使用，并繼續(xù)深入研究其中的規(guī)律。

參考文章：

1. https://blog.prototypr.io
2. https://www.uisdc.com/ui-cheat-sheet-spacing

碧野青風(fēng)