2018-7-31 資深UI設計者
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前一直覺得色彩,圖形,字體是 UI設計的三大構成,任何設計都是從這三大元素開始的,所有的 UI設計都是由這些構成的,但是卻忽略了界面中空間的運用,也就是我們常說的間距。今天我想分享下幾年前從 Google 的 Material Design 以及 8 pt grid 中學到的關于間距相關的教程,這篇分享有助于我們處理好界面間距一致性問題,讓設計更加統一,同時定義規范里面的原子設計方法,能完美融合。
間距無處不在,界面中的邊距,距離上邊,左邊,右邊,頂部等各種屬性。因此作為一名設計師,我們需要很好的掌握各種間距規律,通過間距規律很好的組織好內容。
是否大家和其他設計師在合作過程中,經常打開一個設計師源文件時候,發現各種間距大小,各種不一致地方,明明同一個頁面,已經定義好規范,但是每個人使用的間距大小不一致。可能你們規范已經定義好了,最小單位是5,按照5的倍數去做設計,但是還是會出現各種奇葩的間距,10,12,18等等。或者說有的設計師是按照5來說的,間距會出現10,15,20,25,30,很難解釋清楚哪種場景下用什么樣間距規則。
不止是設計師,估計研發打開我們標注稿都是崩潰的。所以我們需要去統一間距規則,它的優點是能很好的讓設計師之間合理的了解我們間距系統規則,同時開發在做設計開發時候,不需要每次都重復開發不同間距,導致整個 APP 風格混亂,那么我們如何去做呢?
對于設計師:效率上,減少決策和思考,當我做一個需求時候,我不需要考慮到底用多大間距,同時能保持元素之間的節奏。
對于團隊:設計師和開發之間溝通更加簡單,開發人員能很好的按照最小單位按照增量遞增去寫間距,而不必每次都進行測量。
對于用戶:他們信任的品牌有一致性的美感,在設備上沒有模糊的像素偏移等,就和微信一樣,說不出哪里好,但就是最好的。
△ Material Design 在他的布局中有講過,他們的間距,所有間距規則都是在8的倍數上進行遞增,而且并不是毫無頭緒的遞增,只定義了幾種增量關系,克制的有序的間距彈性,最小的是8,16,24,32,48,56,72。
△ 同樣在 iPad端,間距規則也是有序的,克制的間距彈性,而不會出現我們日常設計中經常間距隨意任選的使用,毫無規則亂用。
△ 在 Airbnb 的規范中,PC 和無線所有設計間距規范原則只定義了5種,8,16,24,48,64讓規則更加簡單,更好的統一了整個風格的一致性。
這些原則除了在元素和元素中運用,其實在按鈕中,在按鈕里面文字和上下左右的距離,都是有序的,我特別喜歡一句話,設計語言只有在有序的遵循和重復使用下才有用。
1. 定最小原子單位
這個最小間距規則可以是3的倍數,像蘑菇街、豆瓣一樣,如果你希望產品留白比較多,也可以是5的倍數,例如 pinterest、亞馬遜等,這個沒有絕對的,一切根據你們產品內容豐富程度決定。
△ 亞馬遜和 AliExpress 都是按照5為倍數來做間距增量
2. 確認間距彈性
大家都買過衣服或者鞋子,一般鞋子尺碼,只會有固定幾個(36,37,38,39,40,41,42,43)如果你需要的鞋子特別大,可能需要訂制,包括衣服也是同樣(XS,S.M.L.XL)。
在定義間距上同理,以往做設計規范的經驗,在上一步定義好最小單位就完啦,然后設計師按照增量去設計就 ok,這樣只是完成一半,如果按照4的增量(4,8,12,16,20,24,28,32,36,40….)這種帶來問題就是任何間距都不可預測,提供的選擇過于接近了,在什么情況下使用24,什么情況下使用28,我們很難去決策,如何去做。
之前在團隊做過一個調研,我們問了設計師,也看了很多設計源文件,包括國外也有一個類似調查,就是在用4作為設計原子間距做設計時候,設計師使用最多的間距有哪些?結果很有意思,使用16的占一半,8和32的占一半,所以定義太多間距其實毫無意義,只會帶來設計時候的不確定元素。
3. 根據業務場景,定義間距
正如前面所說,過多間距規則,只會帶來設計師困惑,徒增界面復雜性,對開發,對設計師都是一種負擔,所以我們在定義間距時候,一定要少,要讓我們間距原則覆蓋到絕大多數場景。可以從 XS,S,M,L,XL 為參考,小,中,大為緯度。
△ Airbnb 的間距規則 XS,S,M,L,XL 是最小為8,常用8,16,24,48,64,Airbnb 則更加克制,給設計師選擇更少,反而更能保持設計次序。
△ quickbooks 的間距規則 XS,S,M,L,XL 是最小為4,常用8,16,20,40,60能很好滿足各種業務場景,包括各種的間距場景都是在此基礎上去拓展。
△ 那么界面中所有的間距地方,全部運用8,16,20,40,60這幾個原則來做設計,保證頁面統一性。
△ 包括頁面中的元素高度,比如 banner 高度也是按照間距增量去設計高度,那么整個頁面就更加有系統性和科學性。
△ 這也是我們在做系統設計時候經常用到的,通過增量來做設計。
△ 同理,在國外很多優秀產品中,我們不難發現這種規律的使用,更好的提升了設計效率。
統一簡化間距規則,通過這些規則,構建一致性界面,所有邊距,元素空間都遵循規則時候,對于視覺設計和開發人員來說,都能很好解決一致性和效率問題。
在我們剛開始設計時候,可能會覺得沒有真正的好處,但是當項目越來越復雜時候,團隊規模越來越大,每天處理各種設計原子和設計分子時候,你會發現,當你使用固定的間距,它會比之前隨意的間距規則有更好的效果。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。