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

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

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

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

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

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

一、間距是什么？

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

二、為什么要使用間距？

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

圖一

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

圖二

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

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

圖三

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

三、實際案例

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

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

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

四、為什么要統(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ù)沒有一個絕對的標(biāo)準(zhǔn)。

一般頁面會使用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ū)分信息層級，但依然要謹(jǐn)慎使用。因為大量留白會讓用戶覺得頁面太空、太長。

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

七、結(jié)語

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

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

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

作者：SF_UED，順豐科技用戶體驗設(shè)計部，簡稱SFUED （SF. Tech User Experience Design）是順豐科技的核心設(shè)計團隊，負責(zé)順豐相關(guān)產(chǎn)品的用戶體驗設(shè)計與研究。微信公眾號：SFUED

本文由 @SF_UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。