設計稿總是亂亂的？別忘了調間距！

標準字距怎麼設定

視覺me社群

-帶你看最前沿的設計

關注

轉載自SFUED

公眾號ID：SF_UED

筆者最近在參與元件庫的設計工作中，發現了一個很有趣的現象：諸多設計師都會以

8

畫素為基數

設立間距規範

，將其運用在介面和元素中去。

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

規範

。

間距在設計中極容易被遺漏，但又是不可缺少的基礎部分。間距是什麼？它為何如此重要？實際案例中又是如何運用間距的呢？本文我們就來探究一下關於間距的兩三事。

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

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

圖一

筆者將兩圖中文字與圖片的間距標註出來，一起看一下差異：

圖二

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

使用者很可能會誤以為最後一排文字是下一幅圖片的資訊，真是讓人困惑！

圖三

如圖三的標註可以看出，

間距將介面中的資訊劃分出不同的層級，極大地增強了介面的可讀性

。這就是間距這一細節對整個介面帶來的變化！

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

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

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

展開這個問題前，先來聊聊我們為何做設計規範？設計規範是建立一種規矩，無論專案如何更替，視覺風格依然能夠保持一致性，這不僅提升了設計師的產出效率，使設計與研發間的溝通變得更加簡單高效，也讓使用者透過一致的視覺風格來識別品牌。

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

如何定間距其實取決於間距規範的最小單位，

統一間距並不意味著所有間距都要遵循8的倍數。

正如前文提到，這個數沒有一個絕對的標準。

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

iOS規範（圖片來自網路）

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

雖然大間距可以清楚地區分資訊層級，但依然要謹慎使用。因為大量留白會讓使用者覺得頁面太空、太長。所以，設計師在考慮介面美感的同時要兼顧使用者的體驗。

在做設計規範時，除了顏色、字型、圖示等常見的設計元素以外，大家一定要謹記間距這個元素！通常它決定了介面規整與否、資訊清晰與否。

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

同時，我們制定規範雖有助於專案的高效運轉，

但它不是限制設計師思考和發揮的緊箍咒。

間距也好、元素也好，設計師依然要從使用者場景和實際情況出發，多去考量所設定的規範是否恰當、合理。

- END -

根 據 你 的 喜 好

還 有 這 些 精 彩

關注我，我們一起設計

點選下方藍字“

閱讀原文

”，瞭解更多的！