起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識忽略了間距，設計稿怎么改都覺得亂亂的！
有時精心設計的作品看著卻亂亂的，究其原因其實是字體、圖形等元素的間距沒有設定合理的規范。所以如果改來改去還覺得亂亂的？就再細致地看一遍間距吧！
筆者最近在參與組件庫的設計工作中，發現了一個很有趣的現象：諸多設計師都會以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 協議。
如果您這邊對出版交互設計的選題圖書有想法的話，可以聯系我的微信，我的微信號是：yoyoooO-123
您好，我是出版社的編輯，我社想邀請您出版關于交互設計的選題圖書，圖書會在京東當當以及實體書店進行銷售，不知道您這邊是否有意愿或者想法呢？