如果你看了我專欄上一篇實戰(zhàn)篇：手把手教你用 Sketch 開始應用設計項目 （好吧夕吻，我知道你沒看），就會發(fā)現(xiàn)在網(wǎng)格設計里面，作者提到了 8 這個數(shù)字在設計中的重要性。在這一篇里幕屹，谷歌安卓首席設計師 Joel Beukelman** 分享了一些他設計流程中的方法，最重要的是级遭，還免費把他用的這些資源分享給大家免費下載望拖，感人至深。再次提醒挫鸽，別忘了 8 的重要性说敏。
8，16丢郊，24... （我寫不下去了盔沫，你們自己乘吧）医咨，這些都是整夜縈繞在我腦中的數(shù)字。自從我做安卓開發(fā)以來架诞，就喜歡基于 8 倍像素進行設計腋逆。同時我也受益于 Design Inc** 的 Material Design 的核心原則。有人問到我 8 倍像素的設計網(wǎng)格侈贷，那么我就把我設計流程背后的故事分享給大家好了。
1. 基準線網(wǎng)格
首先等脂，最重要的一點就是確立你文件網(wǎng)格的核心結(jié)構(gòu)俏蛮。你可以通過（在Sketch 里）View>Canvas>Grid Settings 來定義網(wǎng)格的值。
谷歌的 Material Design 定義了基準線如何影響其他 UI 元素的方法上遥，都很贊搏屑。我在這里也加了一些自己的想法進去，但是 Material Design 的原則不要輕易打破粉楚。
2. 布局模板
下一步是定義不同尺寸屏幕的列系統(tǒng)辣恋，我在畫布大小上比較保守，但一定要記得遵循 8 的倍數(shù)這個原則模软。4,8,16 等等像素的列加上 8 像素的槽線伟骨。高度我簡單定義為 48 像素，你可以在 View>Canvas>Layout Settings 里面定義布局的值燃异。
下圖是一個我平衡了列值 （8 列携狭，16pt），基準線( 8 pt) 和高度 (48pt) 之后的布局樣例回俐。取自我們本周即將上線的一個UI 樣例逛腿。
3. 圖標
圖標對于用戶界面上保證基準線有效具有重大意義。要達到完美仅颇，似乎需要很多詭異的數(shù)學計算单默。不過如果用好了的話，圖標可以在不同分辨率的屏幕上保持一致 （如 Retina）忘瓦。做到這點的關(guān)鍵是要保證所有的形狀搁廓，筆觸和邊緣都是均勻的 （2,4,6,8......) 這樣你就可以得到一個在 24px * 24px 區(qū)域內(nèi)居中的圖標，并且可以被整倍數(shù)（(x2, x3, x4) 放大或縮小政冻。
有很多現(xiàn)成的適應 8pt 基準的圖標枚抵，Material Design 就有很多這樣的資源。參考Icons - Style - Material design guidelines 明场。當然你也可以自己設計汽摹。下圖是我為我們的核心 GUI 模板做的圖標索引。
- GUI 結(jié)構(gòu)
其實并沒有什么現(xiàn)成的規(guī)定來約束創(chuàng)造這些指導苦锨。但這些東西會讓我安心逼泣。我們的目標是在一個文檔里面擁有核心元素的「完美像素 」藍圖趴泌。這樣就不用給每個頁面重新繪制了。網(wǎng)上有很多可以參考的模板和資源拉庶，不過如果你想從零開始自己制作的話嗜憔，也可以參考我自己已經(jīng)定義好網(wǎng)格的基礎文件。
下載地址：
鏈接: https://pan.baidu.com/s/1jIyqmqi 密碼: s77s
歡迎關(guān)注：
