對(duì)于我們而言，了解一名 UI 設(shè)計(jì)師，最好的方法就是看他是怎么使用間距的。配色、字體、排版、圖像通常在品牌設(shè)計(jì)指南當(dāng)中，有非常具體的指引，但是間距的使用才更能考驗(yàn)設(shè)計(jì)師的技能。
我想通過(guò)這份備忘錄來(lái)幫助大家更好地掌控「間距」這種元素，這些實(shí)用的設(shè)計(jì)技巧或者說(shuō)規(guī)則，能夠告訴很多學(xué)習(xí)中的設(shè)計(jì)師以更符合邏輯的方式，來(lái)看待間距。
這份清單當(dāng)中，將會(huì)包含：
1、為什么間距很重要
2、網(wǎng)格的介紹
3、間隔的「友誼邏輯」
4、間距的「3C原則」
5、結(jié)語(yǔ)
6、延伸閱讀
當(dāng)我完成第一份產(chǎn)品設(shè)計(jì)工作的時(shí)候，我還是一名大三的學(xué)生。當(dāng)時(shí)我第一次完成了一次產(chǎn)品的UI設(shè)計(jì)，并且感到非常自豪。當(dāng)時(shí)，我把它交給一位我所認(rèn)識(shí)的資深設(shè)計(jì)師過(guò)目，這位前輩當(dāng)時(shí)被我們親切地稱(chēng)為 Pixel-Perfect-Piet？墒，當(dāng)我的作品在他手里轉(zhuǎn)了一圈，我再看到的時(shí)候，大受震撼，完全相同的元素，但是視覺(jué)效果、體驗(yàn)、邏輯得到了全方位的提升。而他在這個(gè)過(guò)程中，通過(guò)簡(jiǎn)單地改進(jìn)我所設(shè)計(jì)的 UI 界面當(dāng)中的間距，讓整體的設(shè)計(jì)更加富有條理，更干凈，也更加富有凝聚力。
Piet 使用了一種我剛剛開(kāi)始理解的新魔法。
當(dāng)你調(diào)整好了間距之后，會(huì)出現(xiàn)這樣的情況：
- 用戶(hù)更容易理解內(nèi)容
- 創(chuàng)建出清晰的信息層次結(jié)構(gòu)，并且告訴用戶(hù)哪些信息更重要
- 讓你的設(shè)計(jì)有更強(qiáng)的一致性
- 它在視覺(jué)上也更加好看了
和絕大多數(shù)的 UI 設(shè)計(jì)師一樣，我的職業(yè)生涯是從平面設(shè)計(jì)開(kāi)始的。我不騙你，剛剛開(kāi)始的做平面印刷的版式類(lèi)物料的時(shí)候，我的老師教導(dǎo)我使用小方塊來(lái)測(cè)量不同元素之間的距離，借此來(lái)保證整體的一致性。
這種方式在數(shù)字產(chǎn)品設(shè)計(jì)當(dāng)中是一定行不通的，它太粗糙原始了。
在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，對(duì)于元素和元素之間的間距，設(shè)計(jì)師更傾向于使用更加有意義的數(shù)據(jù)。那么問(wèn)題來(lái)來(lái)了，這些間距具體要怎么控制？具體的元素之間，間隔多少才合適？作為習(xí)慣了10進(jìn)制的人類(lèi)，使用10pt 來(lái)作為間隔的基礎(chǔ)單位似乎是一個(gè)很自然的選擇，但是在很多界面當(dāng)中，使用 10 pt 太大了，而且要在復(fù)雜的布局中經(jīng)常很難整除。
但是 8 pt 網(wǎng)格就會(huì)好很多，采用 0、8、16、32、64這樣整倍的間距，不僅靈活，而且易于換算。
不過(guò)現(xiàn)在很多人認(rèn)為，8pt 網(wǎng)格系統(tǒng)已經(jīng)被淘汰了，4pt 網(wǎng)格也確實(shí)是更多設(shè)計(jì)師的選擇。同樣是 2 的倍數(shù)，4pt 網(wǎng)格可選的間距包括 4、8、12、24、32、64、72 pt，這意味著設(shè)計(jì)師可以對(duì)界面的間距可以有更加細(xì)致入微的控制。來(lái)自 Deloitte Digital 的 UI 設(shè)計(jì)師 Dries De Schepper 在他的文章當(dāng)中就提到過(guò)這件事情，4pt 網(wǎng)格能夠讓界面間距控制更加靈活，因?yàn)樵诖酥埃? pt 和 16 pt 之間的巨大差異在很多微妙的場(chǎng)合難以取舍，但是 4pt 網(wǎng)格當(dāng)中加入 12 pt 間距之后，就很好解決了這個(gè)問(wèn)題。
8 pt 網(wǎng)格足夠簡(jiǎn)單，更容易讓界面整體顯得整齊劃一，相反 4pt 網(wǎng)格的好處是能夠處理更多變化和需求，兼容多變的控件，更容易創(chuàng)建緊湊的設(shè)計(jì)。
在說(shuō) UI 或者平面設(shè)計(jì)之前，我們先說(shuō)說(shuō)「友誼邏輯」這件事情。
通常在一個(gè)班級(jí)當(dāng)中，通常會(huì)出現(xiàn)好幾波小團(tuán)體，每一波都是關(guān)系比較親密的朋友，相互之間有著更為親密的關(guān)系。有的時(shí)候，這些小團(tuán)體之間還會(huì)有重疊，并且構(gòu)成更大的團(tuán)體。也就是說(shuō)，每個(gè)人和其他人之間，都有著不同的親疏關(guān)系，有著不同的間隔。
那么在 UI 當(dāng)中，元素之間的「友誼」又是怎么呈現(xiàn)的呢？
不同的 UI 元素是作為不同的「人」，相互之間關(guān)系有親有疏，關(guān)系親密的更靠近，反之距離就越遠(yuǎn)。
對(duì)比一下下面的2張圖吧，左邊這張當(dāng)中，所有的元素之間都使用了 16pt 的間距，右邊則根據(jù)「友誼邏輯」來(lái)重新規(guī)劃間距，重新規(guī)劃整個(gè)容器元素的尺寸，將文字元素、圖標(biāo)、按鈕的空間范疇重新調(diào)整，整體顯得更加協(xié)調(diào)。
你能看到出來(lái)左邊的 UI 看起來(lái)虛浮而凌亂，相對(duì)而言右邊會(huì)更加平衡、富有呼吸感嘛？
你再看看下面的案例，你會(huì)意識(shí)到這種視覺(jué)上的美感在「友誼邏輯」之下，每一個(gè)間距的設(shè)置都是有邏輯的：
正如同你在上圖中所看到的，不同的元素被劃分成為不同的「朋友圈子」，你可以根據(jù)元素的相關(guān)程度來(lái)決定彼此之間的「友好程度」。比如上圖當(dāng)中，標(biāo)題和正文之間的關(guān)系會(huì)比正文和按鈕之間的關(guān)系更親密，所以距離會(huì)更近一點(diǎn)。但是圖形、按鈕和文本本身都是高度相關(guān)的，因此仍然讓它們組合在一起。
那么完整的布局呢？同樣遵循這個(gè)邏輯，只是需要更加深入的拆解層次關(guān)系。
如果類(lèi)似上面的一個(gè)組件算是一個(gè)「小團(tuán)體」的話(huà)，那么下面的一個(gè)頁(yè)面就是一個(gè)「班級(jí)」。每個(gè)「人」都在一個(gè)版面上，但是只有一部分人是朋友。在下面的實(shí)例當(dāng)中，你可以看到我使用的設(shè)計(jì)邏輯，和上面設(shè)計(jì)小組件的原理是一樣的：
就像上圖所示，將元素制作成不同的分組，有助于創(chuàng)造出一致的層次結(jié)構(gòu)。也許「友誼邏輯」 并不是一個(gè)完美的類(lèi)比，但是它總體上比較形象地幫助大家來(lái)理解這個(gè)概念。此外，有時(shí)候還是會(huì)出現(xiàn)一些例外。
Facebook Design System 的產(chǎn)品設(shè)計(jì)師 Priyanka Godbole 有一個(gè)類(lèi)似的結(jié)構(gòu)化間距的設(shè)計(jì)方法，不過(guò)她將元素主要分為3個(gè)不同的類(lèi)別：容器、內(nèi)容和組件。對(duì)于這三種不同的類(lèi)別，她分別設(shè)置了相對(duì)固定的3種不同的間距，因?yàn)檫@三個(gè)詞在英文中分別對(duì)應(yīng) Containers、Content、Components，所以這個(gè)又被稱(chēng)為「3C原則」。
- 容器（包括卡片、模態(tài)、頁(yè)面等）類(lèi)的元素之間應(yīng)該有著最大的間距，比如 Godbole 就是用的 16pt 作為她的最大間距。
- 內(nèi)容（包括標(biāo)題、段落、表格等）類(lèi)的元素間距邏輯遵循的是文本排版的規(guī)則，圍繞著標(biāo)題和文本段落，所有的文本元素之間的間距都應(yīng)該結(jié)合實(shí)際情況進(jìn)行靈活的排布，而不是使用簡(jiǎn)單固定的間距邏輯。
- 組件（包括按鈕、輸入字段、圖標(biāo)等）類(lèi)的元素通常是在容器之內(nèi)的，它們之間的間距通常相對(duì)較小，比如按鈕內(nèi)文本和按鈕邊緣之間的距離，按鈕和周?chē)刂g的間距，都算在其中。
控制間距本質(zhì)上是一種非常重要的設(shè)計(jì)練習(xí)，對(duì)于 UI 設(shè)計(jì)尤其重要，想要做好可能需要數(shù)年時(shí)間的微調(diào)和練習(xí)，任何時(shí)候開(kāi)始都不晚。
不過(guò)總體上，我還是希望在設(shè)計(jì)的時(shí)候，能夠?qū)㈤g距這一元素是作為「朋友」，因?yàn)樗偰芨玫貛湍銓⒃O(shè)計(jì)的邏輯凸顯出來(lái)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。