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