筆者最近在參與組件庫的設計工作中，發現了一個很有趣的現象：諸多設計師都會以8像素為基數設立間距規范，將其運用在界面和元素中去。
這引發了我的思考：有時精心設計的作品看著卻亂亂的，究其原因其實是字體、圖形等元素的間距沒有設定合理的規范。
間距在設計中極容易被遺漏，但又是不可缺少的基礎部分。
間距是什么？它為何如此重要？實際案例中又是如何運用間距的呢？
本文我們就來探究一下關于間距的兩三事。
一、間距是什么？
所謂間距，即彼此相隔的距離。在界面中，間距指元素間的距離，例如按鈕與按鈕文字間的邊距、文字的字間距與行間距等。
二、為什么要使用間距？
來看下面這個例子，左右兩圖最大的不同在哪里呢？
△ 圖一
筆者將兩圖中文字與圖片的間距標注出來，一起看一下差異：
△ 圖二
揭曉答案：左圖的描述文字與下一模塊圖片之間的間距是最大的。如果把所有元素之間的距離排為均等（如右圖），我們就看不出內容的層級關系了。
用戶很可能會誤以為最后一排文字是下一幅圖片的信息，真是讓人困惑。
△ 圖三
如圖三的標注可以看出，間距將界面中的信息劃分出不同的層級，極大地增強了界面的可讀性。這就是間距這一細節對整個界面帶來的變化。
三、實際案例
來看看實際設計中，如何規范和運用間距？
在 Material Design 的規范中，柵格系統的最小單位是8dp，所有距離、尺寸都是8dp的整數倍，如下圖所示，屏幕左右間距為16dp，文字距左側屏幕為72dp。
△ Material Design規范（圖片來自網絡）
如果不熟悉Material Design，看這篇：《如果你不熟悉Material Design，請一口吃下這篇干貨！》
四、為什么要統一間距？
展開這個問題前，先來聊聊我們為何做設計規范？
設計規范是建立一種規矩，無論項目如何更替，視覺風格依然能夠保持一致性，這不僅提升了設計師的產出效率，使設計與研發間的溝通變得更加簡單高效，也讓用戶通過一致的視覺風格來識別品牌。
同理，間距作為設計規范中最小的單元，稍小的偏差或不規律的間距都會影響到整體界面的排版和布局，可見間距的統一有多么重要。
五、如何定間距
如何定間距其實取決于間距規范的最小單位，統一間距并不意味著所有間距都要遵循8的倍數。正如前文提到，這個數沒有一個絕對的標準。
一般頁面會使用2px/4px/8px作為最小單位，甚至還有以5px為單位的。這個要根據自身的產品定位和內容組織形式來設定，如 iOS 的界面邊距是30px，并非為8的倍數。
△ iOS規范（圖片來自網絡）
基數越小，頁面越細碎；基數越大，頁面的留白越多。在實際設計時，我們按照間距規范合理設定即可。
六、間距越大越好嗎？
雖然大間距可以清楚地區分信息層級，但依然要謹慎使用。因為大量留白會讓用戶覺得頁面太空、太長。
所以，設計師在考慮界面美感的同時要兼顧用戶的體驗。
七、結語
在做設計規范時，除了顏色、字體、圖標等常見的設計元素以外，大家一定要謹記間距這個元素，通常它決定了界面規整與否、信息清晰與否。
如果改來改去還覺得亂亂的？就再細致地看一遍間距吧。
同時，我們制定規范雖有助于項目的高效運轉，但它不是限制設計師思考和發揮的緊箍咒。間距也好、元素也好，設計師依然要從用戶場景和實際情況出發，多去考量所設定的規范是否恰當、合理。
歡迎關注順豐科技用戶體驗設計部公眾號：「SFUED」
圖片素材作者：Pank
「讓設計更規整的技巧」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 10 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓