移動端界面設(shè)計中，間距的控制是最重要的技巧之一，所以我在演示課程中會一直按 Alt 鍵測量間距，并頻繁地調(diào)整來獲得合理的結(jié)果。

今天這篇分享，就是集中在間距控制的相關(guān)技巧，對移動端間距應(yīng)用做一個簡單但是全面的總結(jié)。

一、移動端的間距種類認識

看過前面移動端適配的分享以后，就可以認識到移動端界面設(shè)計中，確定尺寸的元素其實并不多，多數(shù)設(shè)計元素的尺寸是通過間距+內(nèi)容適應(yīng)出來的。

很多人對間距設(shè)置感到苦惱，覺得頁面元素和間距的數(shù)量太多，設(shè)置起來很混亂找不到要點。要解決這個問題首先要做的就是理解間距的總類，雖然界面中間距應(yīng)用的總數(shù)很驚人，但它們的類型只有固定的幾種，每個類型都有自己的間距規(guī)律可以總結(jié)。

主要的間距類型：

1. 頁邊距
2. 模塊內(nèi)間距
3. 模塊外間距
4. 元素間距
5. 段間距
6. 字間距

1. 頁邊距

頁邊距就是畫布左右兩側(cè)的留白區(qū)域?qū)挾?，設(shè)計元素會以它們的邊緣為對齊標準進行排版。

2. 模塊內(nèi)間距

模塊是一個廣義的總稱，即包含了多個設(shè)計元素的控件或組件。這類模塊通常會有一個完整的背景區(qū)域，而模塊內(nèi)間距就是以背景區(qū)域向內(nèi)收縮的間距，包含了上、下、左、右四個方向的設(shè)置。模塊內(nèi)的元素以這個間距的邊緣為準進行排版。

3. 模塊外間距

模塊的外間距即模塊和模塊之間的間距，同樣包含上、下、左、右四個方向的設(shè)置。在常規(guī)的設(shè)計和開發(fā)邏輯中，模塊間的間距主要由其中一個模塊的外間距數(shù)值構(gòu)成，比如下間距或者右間距。

① 模塊間距和盒模型

在網(wǎng)頁端有個著名的排版概念，叫盒模型 (Box Model) ，它包含的內(nèi)容如下圖所示：

可以把網(wǎng)頁中的任何可視元素作為一個盒子，而這個盒子的實際尺寸，就是由這 4 個元素組成。當進行前端排版時，是以它的總尺寸進行排版而不是以內(nèi)容的尺寸，這是網(wǎng)頁設(shè)計和前端最基本的知識點。移動端的排版和它類似，Margin 對應(yīng)模塊外間距，Padding 對應(yīng)模塊內(nèi)間距。

而描邊 Border 在移動端是個例外，網(wǎng)頁中的 Border 是個實體，假設(shè)一個方形按鈕主體是 20px 寬和高，加上 2 像素描邊，它就是 24 像素寬和高。但是在 UI 軟件和移動端開發(fā)過程中，描邊只是覆蓋在畫面上的圖形，它的大小不被計入真實尺寸且不影響間距。

PS：CSS 中使用的描邊通常是實體外描邊，而移動端開發(fā)使用的是內(nèi)描邊，這是前端實現(xiàn)過程中產(chǎn)生偏差的重要原因之一。

4. 元素間距

即不同基礎(chǔ)設(shè)計元素之間的間距，比如文本、圖標、標簽、圖片等，通過間距的控制增加留白，提升可讀性。

5. 段間距

文本段落之間的間距。段間距可以單獨設(shè)定，而行與行直接的間距控制使用的是行高，UI 設(shè)計中沒有行間距這個設(shè)置選項。

6. 字間距

字間距是同行文字之間的左右距離。這個參數(shù)主要應(yīng)用在英文環(huán)境，英文字母的字寬不同，需要在不同的字號下應(yīng)用不同的字間距提升可讀性。但中文字寬一致，所以正常情況下不做改變。

以上就是移動端界面設(shè)計中需要關(guān)注的主要間距類型，想要提升界面的設(shè)計水平，必然要充分掌握它們的使用規(guī)則和邏輯。

二、移動端間距應(yīng)用的說明

間距的設(shè)置本身也是尺寸設(shè)置的一部分，間距的控制要遵循以下的要點：

1. 區(qū)分自動間距和手動設(shè)置間距
2. 以 4 的倍數(shù)為主但不強制
3. 理解親密性并用間距表現(xiàn)
4. 復(fù)用同類間距的數(shù)值
5. 頁邊距的實戰(zhàn)定義邏輯

要點 1：區(qū)分自動間距和手動設(shè)置間距

UI 元素的尺寸包含了固定尺寸和適應(yīng)尺寸，如果父元素尺寸固定，子元素根據(jù)父元素對齊，那么元素就不需要考慮間距問題，因為它的位置是通過對齊實現(xiàn)的。

如果無法使用對齊的方式，或者元素本身的尺寸不能提前設(shè)置，那就要自己定義間距，來得到最終的結(jié)果。

要點 2：以 4 的倍數(shù)為主但不強制

4 是 UI 設(shè)計常用的倍數(shù)依據(jù)，不僅尺寸設(shè)置使用 4 的倍數(shù)，間距也盡量使用 4 的倍數(shù)進行統(tǒng)一。

在較大的間距（大于 16）中貫徹這個做法沒有問題，但在較小的間距設(shè)置中 4 的跨度太大，往往很難獲得理想的效果。比如在一個卡片內(nèi)添加大量字段，必然要求元素以相對緊湊的布局進行排版，那么就無法只用 4 的倍數(shù)來完成。

如果無法使用 4，盡量使用偶數(shù)或 5 的倍數(shù)，避免 3 或 7 這類難以記憶缺乏規(guī)律的奇數(shù)或質(zhì)數(shù)。

要點 3：理解親密性并用間距表現(xiàn)

單獨兩個設(shè)計元素之間的間距制定，取決于設(shè)計風格的要求。但數(shù)十個元素之間的間距設(shè)置，就具備潛在的相互影響和規(guī)則 —— 親密性。

平面四要素之一的親密性原則，總結(jié)了關(guān)系越緊密的元素相互之間的距離就要越小，越不相關(guān)的則越遠，這有助于我們快速檢索視覺信息。

在 UI 設(shè)計中，界面元素都具有包含和被包含的關(guān)系，是一個金字塔型的框架結(jié)構(gòu)。

在這個結(jié)構(gòu)中，層級越高的元素間距越大，層級越低的元素則越小，我們通過間距的大小來反映元素的親密性，這就需要我們理解清楚元素結(jié)構(gòu)關(guān)系。

要點 4：復(fù)用同類間距的數(shù)值

在上面的結(jié)構(gòu)中，任意元素都有自己的上下級關(guān)系。但是元素和元素之間，也有同級關(guān)系，而同級的元素間距是可以盡量統(tǒng)一的。·

這是為了滿足四要素中的一致性，減少不同的間距數(shù)量可以提高頁面的整體性、美觀度。同時對于項目設(shè)計來說，也可以提升設(shè)計效率，減少出錯的概率。

所以在進行設(shè)計規(guī)范的定義中，可以將間距作為規(guī)范的一部分進行總結(jié)，并確保后續(xù)項目設(shè)計和開發(fā)中延用。

要點 5：頁邊距的實戰(zhàn)定義邏輯

頁邊距是在真實項目中最特殊的間距類型，因為它會受到很多因素的影響所以沒辦給出統(tǒng)一的標準。

首先就是官方的建議是頁邊距使用 16，但很多項目并沒有使用這個數(shù)值。留白多點的頁面甚至會使用 24，而緊湊的頁面可能只用 2 或 4。

而在 1 套項目中，頁邊距也可能是不統(tǒng)一的，因為有的頁面信息多有的頁面信息少，所以為了實用性就會在不同頁面中使用不同的頁邊距標準。

在前期學習過程中，可以使用標準的 16 頁邊距。但在真實項目中，要分析頁面的內(nèi)容數(shù)量，如果信息過多，使用 4-12 的間距（盡量別超），如果信息少又想做寬松的設(shè)計，那么可以使用 20 左右的頁邊距。

只在有足夠必要的因素影響下，才在一個項目內(nèi)使用多種頁邊距。

結(jié)尾

對于上面提到的邊距類型和應(yīng)用知識點，大家可以結(jié)合最近的臨摹課程進行復(fù)習，無論你們練習多少次投入多少時間都不過分，這些基礎(chǔ)不掌握是沒辦法進階的。

作者：超人的電話亭