筆者最近在參與組件庫的設(shè)計工作中，發(fā)現(xiàn)了一個很有趣的現(xiàn)象：諸多設(shè)計師都會以8像素為基數(shù)設(shè)立間距規(guī)范，將其運用在界面和元素中去。

這引發(fā)了我的思考：有時精心設(shè)計的作品看著卻亂亂的，究其原因其實是字體、圖形等元素的間距沒有設(shè)定合理的規(guī)范。

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

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

本文我們就來探究一下關(guān)于間距的兩三事。

一、間距是什么？

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

二、為什么要使用間距？

來看下面這個例子，左右兩圖最大的不同在哪里呢？

△ 圖一

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

△ 圖二

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

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

△ 圖三

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

三、實際案例

來看看實際設(shè)計中，如何規(guī)范和運用間距？

在 Material Design 的規(guī)范中，柵格系統(tǒng)的最小單位是8dp，所有距離、尺寸都是8dp的整數(shù)倍，如下圖所示，屏幕左右間距為16dp，文字距左側(cè)屏幕為72dp。

△ Material Design規(guī)范（圖片來自網(wǎng)絡(luò)）

如果不熟悉Material Design，看這篇：《如果你不熟悉Material Design，請一口吃下這篇干貨！》

四、為什么要統(tǒng)一間距？

展開這個問題前，先來聊聊我們?yōu)楹巫鲈O(shè)計規(guī)范？

設(shè)計規(guī)范是建立一種規(guī)矩，無論項目如何更替，視覺風(fēng)格依然能夠保持一致性，這不僅提升了設(shè)計師的產(chǎn)出效率，使設(shè)計與研發(fā)間的溝通變得更加簡單高效，也讓用戶通過一致的視覺風(fēng)格來識別品牌。

同理，間距作為設(shè)計規(guī)范中最小的單元，稍小的偏差或不規(guī)律的間距都會影響到整體界面的排版和布局，可見間距的統(tǒng)一有多么重要。

五、如何定間距

如何定間距其實取決于間距規(guī)范的最小單位，統(tǒng)一間距并不意味著所有間距都要遵循8的倍數(shù)。正如前文提到，這個數(shù)沒有一個絕對的標準。

一般頁面會使用2px/4px/8px作為最小單位，甚至還有以5px為單位的。這個要根據(jù)自身的產(chǎn)品定位和內(nèi)容組織形式來設(shè)定，如 iOS 的界面邊距是30px，并非為8的倍數(shù)。

△ iOS規(guī)范（圖片來自網(wǎng)絡(luò)）

基數(shù)越小，頁面越細碎；基數(shù)越大，頁面的留白越多。在實際設(shè)計時，我們按照間距規(guī)范合理設(shè)定即可。

六、間距越大越好嗎？

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

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

七、結(jié)語

在做設(shè)計規(guī)范時，除了顏色、字體、圖標等常見的設(shè)計元素以外，大家一定要謹記間距這個元素，通常它決定了界面規(guī)整與否、信息清晰與否。

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

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

歡迎關(guān)注順豐科技用戶體驗設(shè)計部公眾號：「SFUED」

圖片素材作者：Pank

「讓設(shè)計更規(guī)整的技巧」

• 《8年資深設(shè)計師：間距不會調(diào)？掌握這一個點，從此不再迷茫！》
• 《新手科普文！每個設(shè)計師都該懂的柵格系統(tǒng)基礎(chǔ)六要素》
• 《超全面！柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用總結(jié)》