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

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

一、移動(dòng)端的間距種類認(rèn)識(shí)

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

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

主要的間距類型：

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

1. 頁(yè)邊距

頁(yè)邊距就是畫(huà)布左右兩側(cè)的留白區(qū)域?qū)挾?，設(shè)計(jì)元素會(huì)以它們的邊緣為對(duì)齊標(biāo)準(zhǔn)進(jìn)行排版。

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

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

3. 模塊外間距

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

① 模塊間距和盒模型

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

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

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

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

4. 元素間距

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

5. 段間距

文本段落之間的間距。段間距可以單獨(dú)設(shè)定，而行與行直接的間距控制使用的是行高，UI 設(shè)計(jì)中沒(méi)有行間距這個(gè)設(shè)置選項(xiàng)。

6. 字間距

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

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

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

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

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

要點(diǎn) 1：區(qū)分自動(dòng)間距和手動(dòng)設(shè)置間距

UI 元素的尺寸包含了固定尺寸和適應(yīng)尺寸，如果父元素尺寸固定，子元素根據(jù)父元素對(duì)齊，那么元素就不需要考慮間距問(wèn)題，因?yàn)樗奈恢檬峭ㄟ^(guò)對(duì)齊實(shí)現(xiàn)的。

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

要點(diǎn) 2：以 4 的倍數(shù)為主但不強(qiáng)制

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

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

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

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

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

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

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

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

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

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

這是為了滿足四要素中的一致性，減少不同的間距數(shù)量可以提高頁(yè)面的整體性、美觀度。同時(shí)對(duì)于項(xiàng)目設(shè)計(jì)來(lái)說(shuō)，也可以提升設(shè)計(jì)效率，減少出錯(cuò)的概率。

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

要點(diǎn) 5：頁(yè)邊距的實(shí)戰(zhàn)定義邏輯

頁(yè)邊距是在真實(shí)項(xiàng)目中最特殊的間距類型，因?yàn)樗鼤?huì)受到很多因素的影響所以沒(méi)辦給出統(tǒng)一的標(biāo)準(zhǔn)。

首先就是官方的建議是頁(yè)邊距使用 16，但很多項(xiàng)目并沒(méi)有使用這個(gè)數(shù)值。留白多點(diǎn)的頁(yè)面甚至?xí)褂?24，而緊湊的頁(yè)面可能只用 2 或 4。

而在 1 套項(xiàng)目中，頁(yè)邊距也可能是不統(tǒng)一的，因?yàn)橛械捻?yè)面信息多有的頁(yè)面信息少，所以為了實(shí)用性就會(huì)在不同頁(yè)面中使用不同的頁(yè)邊距標(biāo)準(zhǔn)。

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

只在有足夠必要的因素影響下，才在一個(gè)項(xiàng)目?jī)?nèi)使用多種頁(yè)邊距。

結(jié)尾

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

作者：超人的電話亭