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

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

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

 

 

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為基準，也很高興把這個核心的Material Design設(shè)計方法應用到Design Inc的用戶界面上。上周在我們的UNDO周會上，一個叫Danaan Clarke的設(shè)計師問了有關(guān)8pt網(wǎng)格布局的問題，問我們是否已經(jīng)在這方面積累了經(jīng)驗。我總是打破結(jié)構(gòu)去支持設(shè)計，并認為分享幕后故事會帶來很多樂趣。

 

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

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

 

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

 

 

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

 

 

2. 層模板

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

 

 

下面介紹一個簡單的例子，

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

 

 

3. 圖標

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

 

 

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

 

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

 

 

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

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

 

 

 

文件大小: 39kb（sketch）