如何使用8pt柵格化系統(tǒng)，附sketch模板下載

原文地址：https://medium.com/@_bklmn/8pt-gui-templates-ed8798badab3

譯文作者：愛設(shè)計(jì)的狐貍

 

 

https://www.youtube.com/watch?time_continue=587&v=qxuu5CwGTlM

 

8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96，這些數(shù)字整晚都在我腦海中回蕩。從我加入Android Auto以來，我一直使用8pt為基準(zhǔn)，也很高興把這個(gè)核心的Material Design設(shè)計(jì)方法應(yīng)用到Design Inc的用戶界面上。上周在我們的UNDO周會(huì)上，一個(gè)叫Danaan Clarke的設(shè)計(jì)師問了有關(guān)8pt網(wǎng)格布局的問題，問我們是否已經(jīng)在這方面積累了經(jīng)驗(yàn)。我總是打破結(jié)構(gòu)去支持設(shè)計(jì)，并認(rèn)為分享幕后故事會(huì)帶來很多樂趣。

 

1. 網(wǎng)格設(shè)計(jì)基礎(chǔ)

第一步也是最重要的一步就是確保網(wǎng)格的核心結(jié)構(gòu)。你可以通過navigatingView>Canvas>Grid Settings來定義網(wǎng)格。

 

Material design設(shè)計(jì)團(tuán)隊(duì)在定義此基礎(chǔ)如何影響其他核心用戶界面的類型元素值上做得很好。導(dǎo)航欄、排版、參考線、間距和動(dòng)作的最小目標(biāo)尺寸都是圍繞這個(gè)核心基準(zhǔn)建立的。我在這會(huì)增加更多東西，但還是以這個(gè)指南為基礎(chǔ)。如果它沒有被打破，就不要修復(fù)它。

 

 

資源: Google Material Design: https://material.io/guidelines/ 

 

 

2. 層模板

下一步就是要為跨界面的層定義列系統(tǒng)。在canvas尺寸上，我試著采取保守做法，總嘗試用留著8pt間隙的4,8或16列的柵格。至于垂直方向，我采用了48pt的網(wǎng)格。你可以通過navigatingView>Canvas>Layout Settings定義層的值。

 

 

下面介紹一個(gè)簡(jiǎn)單的例子，

關(guān)于我如何運(yùn)用柵格系統(tǒng)（8列，16pt間隔）在一個(gè)新的本周受到認(rèn)可的UI上new testimonial UI?；镜臉?biāo)準(zhǔn)是8pt，垂直方向是48pt。

 

 

3. 圖標(biāo)

圖標(biāo)是用戶界面的一個(gè)很重要的組成部分。為了讓圖標(biāo)設(shè)計(jì)得更完美，有很多難應(yīng)付的數(shù)學(xué)問題，但是如果能讓你的圖標(biāo)表現(xiàn)出正確的完整性，將會(huì)保持屏幕密度上的光譜。（Retina, 1x, 2x, MDPI到XXXHDPI）查看相關(guān)。以這種方式畫圖標(biāo)的關(guān)鍵是確保所有的形狀、筆畫和邊距都是偶數(shù)（(2, 4, 6, 8)，這樣你可以把一個(gè)中心圖標(biāo)放在24 x 24pt的區(qū)域，然后也能被擴(kuò)大到2倍、3倍、4倍。

 

 

https://material.io/guidelines/style/icons.html#icons-system-icons

 

還有很多免費(fèi)的圖標(biāo)集以8pt為基準(zhǔn)被設(shè)計(jì)出來。在這方面Material Design也有一些很棒的資源。不過你可以設(shè)計(jì)你自己喜歡的圖標(biāo)。下面是一個(gè)截圖，關(guān)于如何在我們核心的GUI模板中索引所有圖標(biāo)。

 

 

4. GUI結(jié)構(gòu)

關(guān)于如何創(chuàng)造這些指南，真沒有特定的規(guī)則，但是這些文檔是真理的來源，給了我安全感。我們的目標(biāo)是有一個(gè)像素完美的版本，所有核心組件都在一個(gè)文檔，這樣就不需要為產(chǎn)品繪制每個(gè)界面和狀態(tài)。網(wǎng)上有大量?jī)?yōu)秀的例子和資源可以參考，但如果你想要從零開始，你可以下載我定義的網(wǎng)格和列結(jié)構(gòu)基礎(chǔ)文件。

 

 

 

文件大小: 39kb（sketch）