8年資深設(shè)計師間距不會調(diào)？掌握這一個點，從此不再迷茫！ ... ...

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

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

一、為什么要同一間距？

是否大家和其他設(shè)計師在合作過程中，經(jīng)常打開一個設(shè)計師源文件時候，發(fā)現(xiàn)各種間距大小，各種不同等地方，明明統(tǒng)一個網(wǎng)頁，已經(jīng)定義好規(guī)范，但是每小我使用的間距大小不同等?？赡苣銈円?guī)范已經(jīng)定義好了，最小單位是5，按照5的倍數(shù)去做設(shè)計，但是照舊會出現(xiàn)各種奇葩的間距，10，12，18等等。或者說有的設(shè)計師是按照5來說的，間距會出現(xiàn)10，15，20，25，30，很難詮釋清楚哪種場景下用什么樣間距規(guī)則。

不止是設(shè)計師，估計研發(fā)打開我們標注稿都是崩潰的。所以我們必要去同一間距規(guī)則，它的好處是能很好的讓設(shè)計師之間合理的了解我們間距體系規(guī)則，同時開發(fā)在做設(shè)計開發(fā)時候，不必要每次都重復開發(fā)不同間距，導致整個 APP 風格紊亂，那么我們?nèi)绾稳プ瞿兀?/p>

二、它的價值是什么？

對于設(shè)計師：服從上，削減決策和思考，當我做一個需求時候，我不必要考慮到底用多大間距，同時能保持元素之間的節(jié)奏。

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

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

三、站在巨人肩膀上思考

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

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

△ 在 Airbnb 的最新規(guī)范中，PC 和無線所有設(shè)計間距規(guī)范原則只定義了5種，8，16，24，48，64讓規(guī)則更加簡單，更好的同一了整個風格的同等性。

這些原則除了在元素和元素中運用，其實在按鈕中，在按鈕里面筆墨和上下左右的距離，都是有序的，我分外喜好一句話，設(shè)計語言只有在有序的遵循和重復使用下才有效。

四、怎么做？

1. 定最小原子單位

這個最小間距規(guī)則可以是3的倍數(shù)，像蘑菇街、豆瓣一樣，假如你盼望產(chǎn)品留白比較多，也可以是5的倍數(shù)，例如 pinterest、亞馬遜等，這個沒有絕對的，統(tǒng)統(tǒng)根據(jù)你們產(chǎn)品內(nèi)容雄厚程度決定。

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

2. 確認間距彈性

大家都買過衣服或者鞋子，一樣平常鞋子尺碼，只會有固定幾個（36，37，38，39，40，41，42，43）假如你必要的鞋子分外大，可能必要訂制，包括衣服也是同樣（XS,S.M.L.XL）。

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

之前在團隊做過一個調(diào)研，我們問了設(shè)計師，也看了許多設(shè)計源文件，包括國外也有一個類似調(diào)查，就是在用4作為設(shè)計原子間距做設(shè)計時候，設(shè)計師使用最多的間距有哪些？效果很故意思，使用16的占一半，8和32的占一半，所以定義太多間距其實毫偶然義，只會帶來設(shè)計時候的不確定元素。

3. 根據(jù)營業(yè)場景，定義間距

正如前面所說，過多間距規(guī)則，只會帶來設(shè)計師疑心，徒增界面復雜性，對開發(fā)，對設(shè)計師都是一種負擔，所以我們在定義間距時候，肯定要少，要讓我們間距原則覆蓋到絕大多數(shù)場景。可以從 XS，S，M，L，XL 為參考，小，中，大為緯度。

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

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

△ 那么界面中所有的間距地方，悉數(shù)運用8，16，20，40，60這幾個原則來做設(shè)計，保證網(wǎng)頁同一性。

△ 包括網(wǎng)頁中的元素高度，比如 banner 高度也是按照間距增量去設(shè)計高度，那么整個網(wǎng)頁就更加有體系性和科學性。

△ 這也是我們在做體系設(shè)計時候經(jīng)常用到的，通過增量來做設(shè)計。

△ 同理，在國外許多良好產(chǎn)品中，我們不難發(fā)現(xiàn)這種規(guī)律的使用，更好的提拔了設(shè)計服從。

總結(jié)

同一簡化間距規(guī)則，通過這些規(guī)則，構(gòu)建同等性界面，所有邊距，元素空間都遵循規(guī)則時候，對于視覺設(shè)計和開發(fā)人員來說，都能很好解決同等性和服從題目。

在我們剛開始設(shè)計時候，可能會覺得沒有真正的益處，但是當項目越來越復雜時候，團隊規(guī)模越來越大，天天處理各種設(shè)計原子和設(shè)計分子時候，你會發(fā)現(xiàn)，當你使用固定的間距，它會比之前隨意的間距規(guī)則有更好的結(jié)果。

迎接關(guān)注作者的微信公眾號：我們的設(shè)計日記，每周分享最新設(shè)計趨勢和設(shè)計經(jīng)驗，科學設(shè)計方法。

圖片素材作者：Laura Reen