引言
互聯網飛速發展的這個時代，非常多優秀的用戶體驗團隊，無私地公開了他們的設計規范、UI 組件，供行業有需要的設計團隊學習和使用。然而盡管拿到這些優秀的設計指導和組件庫，依然不一定能夠輸出非常有品質的設計，仔細研究發現，其中非常重要的一個原因，我們認為是：不同 level 的設計師對“間距”的把握程度不同，拼湊組件輸出的界面信息層次和整體性不好。
資深 UI 設計師憑借經驗和感覺能快速的搭建高質量的模塊和頁面，而新手或資歷不深的 UI 設計師，費了九牛二虎之力搭建出來的頁面總是顯得有一絲不夠完美，要命的是可能他們自己卻看不出來。
就拿很簡單的一個登錄模塊，下面兩個設計稿對比哪一種更為優雅呢？如果你說右邊更好，那我們更有必要一起來繼續閱讀這篇文章了。
1. 間距與層級關系
在平面設計排版中間距非常影響設計的品質，間距太緊，會感到信息擁擠，難以閱讀；間距太松，會顯得內容相關度弱，版面太空洞。
一個對象周圍的間距越大，就越容易吸引用戶的注意力，這是大留白；間距較遠的信息區分較大，而間距較小的信息之間聯系緊密。這是間距在人的內心最基礎的理解和感受。這一規律在 word 的章節排版體現得最為明顯：
源自網絡截圖 https://www.sohu.com/a/396590247_698728
圖中 word 排版，保障正文閱讀的最小行高是最小間距，段落標題與正文間間距稍大，章節標題與段落標題之間間距更大。當然有的 word 排版章節層級更為復雜，但也是遵循這一基礎規律：間距的大小需根據信息層級由大到小來同等變化，也就是更高層級的信息板塊需要使用更寬松的間距，間距隨層級遞減而需要相應減小。當然最低層級的信息為了保障可閱讀性應該具備一個最基礎的間距。
在 UI 界面中，我們同樣遵循該規律，通過間距來區分層級關系，可以很好地幫助用戶理解界面信息。
iOS 的扁平化以及 Material Design 推行以信息為主、弱化視覺干擾，減少一些不必要的線框修飾的設計元素，合理控制間距區分層級，提升視覺美感。
我們看一個例子，去掉分割線后，利用間距的變化將界面信息層級簡化的效果：
去除分割線，將信息重新分組，組內間距縮小，組間間距放大，更清晰地把信息呈現給用戶，界面更加整潔美觀。連標題與內容之間的分割線也可以略去，標題下方也留有足夠的間距來突出標題文字內容，還可以一定程度上節約縱向空間。
無論是 web 端還是移動端，現在越來越多的設計都盡量減少線條對畫面的割裂感，采用間距控制來把握信息層級關系。但是間距在 UI 界面上不能憑感覺給，應該遵循上面所說的層級關系規律——間距的大小需根據信息層級由大到小來同等變化。
2. 橫縱向間距協調感
通常 word 的排版只有縱向間距的考慮，也就是行間距，而字符間距是不需要去更改的。但 UI 設計當中，小到一個圖標、控件，大到頁面布局，都需要兼顧橫縱向的間距，否則設計效果都不會好看。
在 UI 設計當中，我們運用各種各樣的元素、控件進行組合設計，對于間距的控制沒有平面的自由度高。如上圖左右對比，橫向的邊距與縱向的邊距相等或接近時，界面布局會顯得更加協調，橫向間距過大或過小，都顯得不自然，這就是橫縱向間距的協調感。
在 UI 設計當中的協調感，從一個文字、一個圖標，到一個輸入框、一個按鈕，最后形成彈窗、表單、甚至是頁面、產品，應該有一個全局統一的高矮胖瘦的感覺。
通常為了廣泛運用，我們所設計的最基礎的圖標是方形的，產品中運用的文字主體也是方形的，所以在我們最小一級的層級的橫縱向間距基本是相同的。那么以此為基礎，將文字和圖標放在輸入框、彈窗等控件當中，也盡量保持統一協調的間距比例。
當我們設計一個長條狀的組件，那么其內部左右的橫向間距留白會比上下的縱向間距留白更大，反過來就不協調。
3. 間距與文字行高
通常的界面設計當中，一般以文字信息為主，通過不同的布局和圖形輔助設計，幫助用戶更好地理解系統界面。web 設計當中瀏覽器中所能識別的最小字號是 12 號字，為了保障中長段文字信息的可閱讀性，通常會給文字排版賦予一定的行高，當文字自動換行時會保持一個利于閱讀的間距，比如：12 號字 18px，14 號字 20px，16 號字 24px，20 號字 32px……
按上圖中我們以同等的縱向間距為 8px 來排版這些文字時，他們之間實際的間距，人眼所能感受到的距離其實是青色矩形塊所表示的間距，他們遠比 8px 要大，而且各不相同。
我們的原子級控件、組件中，均以文字為主，包括了行高的考慮，所以在組件使用時，不是那么容易控制好間距的協調感。
如同下圖中 B 端常見的一些基礎的信息板塊，組件之間的拼裝，幾乎沒有見到有相關的指導。不同的設計師在頁面實施時可能把間距處理得不一樣，同一個設計師，在不同批次的設計當中也有可能不一樣，并且前端實現出來之后很難肉眼檢視是否 100%還原。
4. 間距與盒模型
為了一定程度上解決 B 端產品中常見的這個問題，也為了提高效率，減少設計師在這種間距審美上的糾結，同時也考慮到前端能更好的理解我們的設計，做到高度還原，我們需要理解前端經典的“盒模型”概念。
設計與前端在“盒模型”上達成一致，才能對應賦予盒子準確的內間距和外間距，才能保障設計的準確還原。當設計也把信息拆解成一個個的盒子時，就能記住相同層級的盒子應該賦予的間距。
在“盒模型”中，所有的內容之間只存在 2 種關系：包含和并列，我們界面中也是如此。
如下圖，頁面標題和它下方模塊中的內容屬于包含關系，下方模塊中，一級標題 1 和一級標題 2 屬于并列關系。
從開發的角度來看，所有界面內容都可以按這 2 種方式去實現：
①包含關系
開發通常按下圖的方式實現包含關系，內容從屬于標題，考慮到排版的整齊性，通常內容的 padding 距離要與標題的 padding 一致。
當然這里如果標題與內容板塊之間有明顯分隔，如下圖，標題盒模型就有另一種形態，此時標題文字到分隔區域之間多一個 padding 距離。
②并列關系
開發實現并列關系可以如下圖，兩塊內容并列，不做標題設定，則通常內容之間會采用 margin 處理距離，margin 值與其父級的 padding 值接近。
這兩種方式的設計與實現，都圍繞信息內容所占據的視覺區域，遵循間距與層級關系最基礎的原則，通過相對協調的間距來處理信息層級。整個產品界面的信息層級都能以這兩種關系進行相互嵌套實現。
1. 界面層級的梳理
在 UI 設計界面中每一個間距的設置是有邏輯的。首先我們需要了解內容是什么，他們之間的關系是什么，然后利用間距層級遞進的方式來規整頁面信息，從而得到有節奏感、有呼吸感、能讓用戶快速理解的頁面。
如下圖，根據內容的層級關系，最高層級的間距為 64，層級從大到小，間距也同時遞減，遵循了間距與層級關系的基本原理。
有關內容的層級關系，請參閱 http://www.hx168888.com/ui-cheat-sheet-spacing ，圖取自此文
所以我們在設計時需要優先梳理出界面的信息層級，才能相應設計不同的間距來引導用戶瀏覽界面。
2. 層級間距的基準設定
在 B 端設計中，我們通常定義最小單位為 4px 的網格系統，以 4 的倍數為基準來規范間距。一般我們以 14 號字為基礎正文字號，來定義按鈕、標簽、輸入框等原子組件，然后使用這些組件進行界面設計。
按照上文中“盒模型”的介紹，我們可以把界面中的元素都封裝到“盒子”當中，賦予他們 padding 和 margin 值來控制間距。
從圖中可以看出，在左邊包含關系中，內容盒模型內邊距 padding 跟標題的 padding 保持協調一致，而右邊并列關系中，兩個并列子級之間的外邊距 margin 與父級的內邊距 padding 保持協調一致。
所以不管包含還是并列關系，間距的控制都與父級的內邊距 padding 相關。而這個父級的內邊距由什么決定呢?
左圖中標題所處的層級是父級，它包含下面的內容子級。標題的 padding 大小其實由標題的文本高度決定（上文 2.2 和 2.3 中介紹的縱橫向間距的協調感與文字行高的關系），標題字號越大，對應標題盒子的 padding 值需要更大，標題字號越小，則 padding 值越小。
右圖中 margin 向 padding 看齊，而 padding 由其父級的 padding 決定，這就是嵌套（他總需要有一個父級包含著這個盒子）。
反過來，兩個并列的內容子級里也可以有包含關系的嵌套盒模型，如下圖。兩個或兩個以上包含關系的盒子并列時，其父級如果沒有標題，意味著這是一個空盒子，padding 為 0，那么理論上并列的子級之間的 margin 值應該也為 0，所以兩個并列內容之間的間距為 padding 值 x2。
當以 14 號基準字號的組件來進行設計時，我們發現最小的層級的 padding 為 20px 與組件的內間距設計最為協調。
當我們設計 14 號標題的上一層內容時，相當于在它的外層再套一層盒子，設定一個更大的字號 16 和更大的 padding24px。我們直接嵌套發現，出現兩層盒模型的 padding 值直接疊加，導致空間浪費，并且縮進后的文字排版并不美觀。
其實按照上文中“盒模型”的嵌套規則，16 號標題的內容子集 padding 值應該為 0，直接整個嵌套標題 14 號包含關系的整個盒模型。而直接這樣嵌套時發現兩級標題并沒有左對齊，此時需要將父級標題的 padding 調整為 20px。如下圖中的效果，通過標題字號也能區分出層級，節省了直接嵌套的空間浪費。
所以我們定義 14 號和 16 號的標題文字，都可以用 padding 為 20px 的間距來進行控制。
在反推過程中，我們發現兩個并列內容之間的間距為 padding 值 x2，即 20x2=40，這個間距過大，浪費了太多空間，適當的調整為 32px 后，顯得更為協調。所以當并列的兩個盒模型同時有 20px 的內間距留白時，并列盒子之間留白距離要適當縮減為 32px（20×2-8）。
在業務復雜的 B 端產品中，層級往往會超過 2 級，這時該怎么辦呢?
3. 盒模型嵌套底板空間循環
我們發現，當一個模塊空間中出現超過 3 個層級時，再用左對齊的方式，用戶的理解難度會變得很大（如下圖），雖然下圖中通過了多種方式來解釋層級關系，如分割線、不同大小的標題、嵌套框，但是整個看上去依然不太理想。
心理學家 SusanWeinschenk 說過：人在識別物體時會尋找規律。所以我們要盡量創建規律來幫助用戶快速解讀信息。
盒模型的嵌套其實就如同套娃，每層都具備自己一個獨立的空間，循環的嵌套。于是我們嘗試著采用了更換底板背景來區分嵌套的空間，并限制單個底板空間中出現的層級不超過 2 級，超出則更換嵌套底板，那么嵌套后間距及標題參數則可以重新循環。按照這種規律設計出的結果，非常富有簡單清晰的節奏感，用戶理解起來更加容易。
若嵌套后只有一層標題時，三級標題優先采用小號標題（14 號），因為它看起來更加協調。
當然這種嵌套也不是無限的，一個頁面中出現三個底板的嵌套基本上已經達到了極限，再多時就需要考慮從業務角度去梳理信息層級，通過頁面的層級來表達復雜的信息關系。
4. 豐富層級的靈活運用
通過盒模型嵌套底板空間循環的方式，我們可以使用相同的間距來解決信息層級區分設計，并且很容易的保障前端的高度還原。但是 B 端復雜的系統中，往往上述兩種標題不足以覆蓋全部的場景，我們通常用于包含關系中的標題層級，還有 Tab 選項卡，根據基準的 20px 間距，和 14、16 號兩種尺寸的標題字號，我們擴展出 3 種尺寸的標題（大、中、小）和 3 種 tabs（大尺寸線條型、中尺寸線條型、膠囊型）。設計使用時層級由高到低，依次使用，不允許跨級。
大標題（20 號）用于概括整體頁面，頁面中只會有一個，它的行高（32px）和視覺看到的字高（26px）相差了 6px，根據上方基準 padding 為 20px，那么橫縱向的間距會不太協調，我們將左右和下方的 padding 值微調成 24px 后不協調感得到改善。
注意：同一層級容器內，線條 Tab-Bar 不能出現 2 個，容器嵌套時允許出現 2 個
5. 總體規則導出
總結一下規則（以 14 號字為基準）：
- 梳理清晰全局的信息內容，統一遵循“盒模型”包含和并列關系，基準間距統一為 20px；
- 當并列的兩個盒模型同時有 20px 的內間距留白時，并列盒子之間留白距離要適當縮減為 32px（20×2-8）；
- 采用盒模型循環底板嵌套進行層級設計，單個底板只允許兩層層級，超出時采用嵌套更換底板。注意：若嵌套后只有一層層級時，三級標題優先采用小號標題（14 號）；
- 3 種標題與 3 種 Tab 根據層級由高到低，依次使用，不允許跨級。20 號大標題為頁面標題，它的子級左右下方的 padding 值為 24。
上述的方式是基于我們產品的特性分析得出的，它的目的是為了減輕設計師在設計過程中對間距的糾結，同時提升整體產品的可讀性和一致性，當然不能以一概全。
接下來我們會進一步地在更多的產品和場景中去驗證使用，并繼續深入研究其中的規律。
參考文章：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 白白