如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

之前一直覺(jué)得色彩，圖形，字體是 UI設(shè)計(jì)的三大構(gòu)成，任何設(shè)計(jì)都是從這三大元素開(kāi)始的，所有的 UI設(shè)計(jì)都是由這些構(gòu)成的，但是卻忽略了界面中空間的運(yùn)用，也就是我們常說(shuō)的間距。今天我想分享下幾年前從 Google 的 Material Design 以及 8 pt grid 中學(xué)到的關(guān)于間距相關(guān)的教程，這篇分享有助于我們處理好界面間距一致性問(wèn)題，讓設(shè)計(jì)更加統(tǒng)一，同時(shí)定義規(guī)范里面的原子設(shè)計(jì)方法，能完美融合。

間距無(wú)處不在，界面中的邊距，距離上邊，左邊，右邊，頂部等各種屬性。因此作為一名設(shè)計(jì)師，我們需要很好的掌握各種間距規(guī)律，通過(guò)間距規(guī)律很好的組織好內(nèi)容。

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

是否大家和其他設(shè)計(jì)師在合作過(guò)程中，經(jīng)常打開(kāi)一個(gè)設(shè)計(jì)師源文件時(shí)候，發(fā)現(xiàn)各種間距大小，各種不一致地方，明明同一個(gè)頁(yè)面，已經(jīng)定義好規(guī)范，但是每個(gè)人使用的間距大小不一致。可能你們規(guī)范已經(jīng)定義好了，最小單位是5，按照5的倍數(shù)去做設(shè)計(jì)，但是還是會(huì)出現(xiàn)各種奇葩的間距，10，12，18等等。或者說(shuō)有的設(shè)計(jì)師是按照5來(lái)說(shuō)的，間距會(huì)出現(xiàn)10，15，20，25，30，很難解釋清楚哪種場(chǎng)景下用什么樣間距規(guī)則。

不止是設(shè)計(jì)師，估計(jì)研發(fā)打開(kāi)我們標(biāo)注稿都是崩潰的。所以我們需要去統(tǒng)一間距規(guī)則，它的優(yōu)點(diǎn)是能很好的讓設(shè)計(jì)師之間合理的了解我們間距系統(tǒng)規(guī)則，同時(shí)開(kāi)發(fā)在做設(shè)計(jì)開(kāi)發(fā)時(shí)候，不需要每次都重復(fù)開(kāi)發(fā)不同間距，導(dǎo)致整個(gè) APP 風(fēng)格混亂，那么我們?nèi)绾稳プ瞿兀?

二、它的價(jià)值是什么？

對(duì)于設(shè)計(jì)師：效率上，減少?zèng)Q策和思考，當(dāng)我做一個(gè)需求時(shí)候，我不需要考慮到底用多大間距，同時(shí)能保持元素之間的節(jié)奏。

對(duì)于團(tuán)隊(duì)：設(shè)計(jì)師和開(kāi)發(fā)之間溝通更加簡(jiǎn)單，開(kāi)發(fā)人員能很好的按照最小單位按照增量遞增去寫(xiě)間距，而不必每次都進(jìn)行測(cè)量。

對(duì)于用戶：他們信任的品牌有一致性的美感，在設(shè)備上沒(méi)有模糊的像素偏移等，就和微信一樣，說(shuō)不出哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有講過(guò)，他們的間距，所有間距規(guī)則都是在8的倍數(shù)上進(jìn)行遞增，而且并不是毫無(wú)頭緒的遞增，只定義了幾種增量關(guān)系，克制的有序的間距彈性，最小的是8，16，24，32，48，56，72。

△ 同樣在 iPad端，間距規(guī)則也是有序的，克制的間距彈性，而不會(huì)出現(xiàn)我們?nèi)粘ＴO(shè)計(jì)中經(jīng)常間距隨意任選的使用，毫無(wú)規(guī)則亂用。

△ 在 Airbnb 的規(guī)范中，PC 和無(wú)線所有設(shè)計(jì)間距規(guī)范原則只定義了5種，8，16，24，48，64讓規(guī)則更加簡(jiǎn)單，更好的統(tǒng)一了整個(gè)風(fēng)格的一致性。

這些原則除了在元素和元素中運(yùn)用，其實(shí)在按鈕中，在按鈕里面文字和上下左右的距離，都是有序的，我特別喜歡一句話，設(shè)計(jì)語(yǔ)言只有在有序的遵循和重復(fù)使用下才有用。

四、怎么做？

1. 定最小原子單位

這個(gè)最小間距規(guī)則可以是3的倍數(shù)，像蘑菇街、豆瓣一樣，如果你希望產(chǎn)品留白比較多，也可以是5的倍數(shù)，例如 pinterest、亞馬遜等，這個(gè)沒(méi)有絕對(duì)的，一切根據(jù)你們產(chǎn)品內(nèi)容豐富程度決定。

△ 亞馬遜和 AliExpress 都是按照5為倍數(shù)來(lái)做間距增量

2. 確認(rèn)間距彈性

大家都買(mǎi)過(guò)衣服或者鞋子，一般鞋子尺碼，只會(huì)有固定幾個(gè)（36，37，38，39，40，41，42，43）如果你需要的鞋子特別大，可能需要訂制，包括衣服也是同樣（XS,S.M.L.XL）。

在定義間距上同理，以往做設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)，在上一步定義好最小單位就完啦，然后設(shè)計(jì)師按照增量去設(shè)計(jì)就 ok，這樣只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）這種帶來(lái)問(wèn)題就是任何間距都不可預(yù)測(cè)，提供的選擇過(guò)于接近了，在什么情況下使用24，什么情況下使用28，我們很難去決策，如何去做。

之前在團(tuán)隊(duì)做過(guò)一個(gè)調(diào)研，我們問(wèn)了設(shè)計(jì)師，也看了很多設(shè)計(jì)源文件，包括國(guó)外也有一個(gè)類(lèi)似調(diào)查，就是在用4作為設(shè)計(jì)原子間距做設(shè)計(jì)時(shí)候，設(shè)計(jì)師使用最多的間距有哪些？結(jié)果很有意思，使用16的占一半，8和32的占一半，所以定義太多間距其實(shí)毫無(wú)意義，只會(huì)帶來(lái)設(shè)計(jì)時(shí)候的不確定元素。

3. 根據(jù)業(yè)務(wù)場(chǎng)景，定義間距

正如前面所說(shuō)，過(guò)多間距規(guī)則，只會(huì)帶來(lái)設(shè)計(jì)師困惑，徒增界面復(fù)雜性，對(duì)開(kāi)發(fā)，對(duì)設(shè)計(jì)師都是一種負(fù)擔(dān)，所以我們?cè)诙x間距時(shí)候，一定要少，要讓我們間距原則覆蓋到絕大多數(shù)場(chǎng)景。可以從 XS，S，M，L，XL 為參考，小，中，大為緯度。

△ Airbnb 的間距規(guī)則 XS，S，M，L，XL 是最小為8，常用8，16，24，48，64，Airbnb 則更加克制，給設(shè)計(jì)師選擇更少，反而更能保持設(shè)計(jì)次序。

△ quickbooks 的間距規(guī)則 XS，S，M，L，XL 是最小為4，常用8，16，20，40，60能很好滿足各種業(yè)務(wù)場(chǎng)景，包括各種的間距場(chǎng)景都是在此基礎(chǔ)上去拓展。

△ 那么界面中所有的間距地方，全部運(yùn)用8，16，20，40，60這幾個(gè)原則來(lái)做設(shè)計(jì)，保證頁(yè)面統(tǒng)一性。

△ 包括頁(yè)面中的元素高度，比如 banner 高度也是按照間距增量去設(shè)計(jì)高度，那么整個(gè)頁(yè)面就更加有系統(tǒng)性和科學(xué)性。

△ 這也是我們?cè)谧鱿到y(tǒng)設(shè)計(jì)時(shí)候經(jīng)常用到的，通過(guò)增量來(lái)做設(shè)計(jì)。

△ 同理，在國(guó)外很多優(yōu)秀產(chǎn)品中，我們不難發(fā)現(xiàn)這種規(guī)律的使用，更好的提升了設(shè)計(jì)效率。

總結(jié)

統(tǒng)一簡(jiǎn)化間距規(guī)則，通過(guò)這些規(guī)則，構(gòu)建一致性界面，所有邊距，元素空間都遵循規(guī)則時(shí)候，對(duì)于視覺(jué)設(shè)計(jì)和開(kāi)發(fā)人員來(lái)說(shuō)，都能很好解決一致性和效率問(wèn)題。

在我們剛開(kāi)始設(shè)計(jì)時(shí)候，可能會(huì)覺(jué)得沒(méi)有真正的好處，但是當(dāng)項(xiàng)目越來(lái)越復(fù)雜時(shí)候，團(tuán)隊(duì)規(guī)模越來(lái)越大，每天處理各種設(shè)計(jì)原子和設(shè)計(jì)分子時(shí)候，你會(huì)發(fā)現(xiàn)，當(dāng)你使用固定的間距，它會(huì)比之前隨意的間距規(guī)則有更好的效果。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。