引言

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

>PART 1：UI 間距基本原理

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

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

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

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

一個(gè)對(duì)象周?chē)拈g距越大，就越容易吸引用戶的注意力，這是大留白；間距較遠(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é)層級(jí)更為復(fù)雜，但也是遵循這一基礎(chǔ)規(guī)律：間距的大小需根據(jù)信息層級(jí)由大到小來(lái)同等變化，也就是更高層級(jí)的信息板塊需要使用更寬松的間距，間距隨層級(jí)遞減而需要相應(yīng)減小。當(dāng)然最低層級(jí)的信息為了保障可閱讀性應(yīng)該具備一個(gè)最基礎(chǔ)的間距。

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

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

我們看一個(gè)例子，去掉分割線后，利用間距的變化將界面信息層級(jí)簡(jiǎn)化的效果：

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

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

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

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

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

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

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

當(dāng)我們?cè)O(shè)計(jì)一個(gè)長(zhǎng)條狀的組件，那么其內(nèi)部左右的橫向間距留白會(huì)比上下的縱向間距留白更大，反過(guò)來(lái)就不協(xié)調(diào)。

3. 間距與文字行高

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

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

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

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

4. 間距與盒模型

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

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

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

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

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

①包含關(guān)系

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

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

②并列關(guān)系

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

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

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

1. 界面層級(jí)的梳理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

若嵌套后只有一層標(biāo)題時(shí)，三級(jí)標(biāo)題優(yōu)先采用小號(hào)標(biāo)題（14 號(hào)），因?yàn)樗雌饋?lái)更加協(xié)調(diào)。

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

4. 豐富層級(jí)的靈活運(yùn)用

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

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

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

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

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

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

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

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

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

參考文章：

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

碧野青風(fēng)