有時精心設計的作品看着卻亂亂的，究其原因其實是字體、圖形等元素的間距沒有設定合理的規範。所以如果改來改去還覺得亂亂的？就再細緻地看一遍間距吧！

筆者最近在參與組件庫的設計工作中，發現了一個很有趣的現象：諸多設計師都會以8像素為基數設立間距規範，将其運用在界面和元素中去。

這引發了我的思考：有時精心設計的作品看着卻亂亂的，究其原因其實是字體、圖形等元素的間距沒有設定合理的規範。

間距在設計中極容易被遺漏，但又是不可缺少的基礎部分。

間距是什麼？它為何如此重要？實際案例中又是如何運用間距的呢？

本文我們就來探究一下關于間距的兩三事。

一、間距是什麼？

所謂間距，即彼此相隔的距離。在界面中，間距指元素間的距離，例如按鈕與按鈕文字間的邊距、文字的字間距與行間距等。

二、為什麼要使用間距？

來看下面這個例子，左右兩圖最大的不同在哪裡呢？（來找茬~）

圖一

筆者将兩圖中文字與圖片的間距标注出來，一起看一下差異：

圖二

揭曉答案：左圖的描述文字與下一模塊圖片之間的間距是最大的。如果把所有元素之間的距離排為均等（如右圖），我們就看不出内容的層級關系了。

用戶很可能會誤以為最後一排文字是下一幅圖片的信息，真是讓人困惑！

圖三

如圖三的标注可以看出，間距将界面中的信息劃分出不同的層級，極大地增強了界面的可讀性。這就是間距這一細節對整個界面帶來的變化！

三、實際案例

來看看實際設計中，如何規範和運用間距？

在Material Design的規範中，栅格系統的最小單位是8dp，所有距離、尺寸都是8dp的整數倍，如下圖所示，屏幕左右間距為16dp，文字距左側屏幕為72dp。

Material Design規範（圖片來自網絡）

四、為什麼要統一間距？

展開這個問題前，先來聊聊我們為何做設計規範？

設計規範是建立一種規矩，無論項目如何更替，視覺風格依然能夠保持一緻性，這不僅提升了設計師的産出效率，使設計與研發間的溝通變得更加簡單高效，也讓用戶通過一緻的視覺風格來識别品牌。

同理，間距作為設計規範中最小的單元，稍小的偏差或不規律的間距都會影響到整體界面的排版和布局，可見間距的統一有多麼重要！

五、如何定間距

如何定間距其實取決于間距規範的最小單位，統一間距并不意味着所有間距都要遵循8的倍數。正如前文提到，這個數沒有一個絕對的标準。

一般頁面會使用2px/4px/8px作為最小單位，甚至還有以5px為單位的。這個要根據自身的産品定位和内容組織形式來設定，如iOS的界面邊距是30px，并非為8的倍數。

iOS規範（圖片來自網絡）

基數越小，頁面越細碎；基數越大，頁面的留白越多。在實際設計時，我們按照間距規範合理設定即可。

六、間距越大越好嗎？

雖然大間距可以清楚地區分信息層級，但依然要謹慎使用。因為大量留白會讓用戶覺得頁面太空、太長。

所以，設計師在考慮界面美感的同時要兼顧用戶的體驗。

七、結語

在做設計規範時，除了顔色、字體、圖标等常見的設計元素以外，大家一定要謹記間距這個元素！通常它決定了界面規整與否、信息清晰與否。

如果改來改去還覺得亂亂的？就再細緻地看一遍間距吧！

同時，我們制定規範雖有助于項目的高效運轉，但它不是限制設計師思考和發揮的緊箍咒。間距也好、元素也好，設計師依然要從用戶場景和實際情況出發，多去考量所設定的規範是否恰當、合理。

作者：SF_UED，順豐科技用戶體驗設計部，簡稱SFUED （SF. Tech User Experience Design）是順豐科技的核心設計團隊，負責順豐相關産品的用戶體驗設計與研究。SFUED

本文由 @SF_UED 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,