如果你看了我專欄上一篇實戰篇：手把手教你用 Sketch 開始應用設計項目 （好吧，我知道你沒看），就會發現在網格設計里面，作者提到了 8 這個數字在設計中的重要性。在這一篇里，谷歌安卓首席設計師 Joel Beukelman** 分享了一些他設計流程中的方法，最重要的是，還免費把他用的這些資源分享給大家免費下載，感人至深。再次提醒，別忘了 8 的重要性。
8，16，24... （我寫不下去了，你們自己乘吧），這些都是整夜縈繞在我腦中的數字。自從我做安卓開發以來，就喜歡基于 8 倍像素進行設計。同時我也受益于 Design Inc** 的 Material Design 的核心原則。有人問到我 8 倍像素的設計網格，那么我就把我設計流程背后的故事分享給大家好了。
1. 基準線網格
首先，最重要的一點就是確立你文件網格的核心結構。你可以通過（在Sketch 里）View>Canvas>Grid Settings 來定義網格的值。
谷歌的 Material Design 定義了基準線如何影響其他 UI 元素的方法，都很贊。我在這里也加了一些自己的想法進去，但是 Material Design 的原則不要輕易打破。
2. 布局模板
下一步是定義不同尺寸屏幕的列系統，我在畫布大小上比較保守，但一定要記得遵循 8 的倍數這個原則。4,8,16 等等像素的列加上 8 像素的槽線。高度我簡單定義為 48 像素，你可以在 View>Canvas>Layout Settings 里面定義布局的值。
下圖是一個我平衡了列值 （8 列，16pt），基準線( 8 pt) 和高度 (48pt) 之后的布局樣例。取自我們本周即將上線的一個UI 樣例。
3. 圖標
圖標對于用戶界面上保證基準線有效具有重大意義。要達到完美，似乎需要很多詭異的數學計算。不過如果用好了的話，圖標可以在不同分辨率的屏幕上保持一致 （如 Retina）。做到這點的關鍵是要保證所有的形狀，筆觸和邊緣都是均勻的 （2,4,6,8......) 這樣你就可以得到一個在 24px * 24px 區域內居中的圖標，并且可以被整倍數（(x2, x3, x4) 放大或縮小。
有很多現成的適應 8pt 基準的圖標，Material Design 就有很多這樣的資源。參考Icons - Style - Material design guidelines 。當然你也可以自己設計。下圖是我為我們的核心 GUI 模板做的圖標索引。
- GUI 結構
其實并沒有什么現成的規定來約束創造這些指導。但這些東西會讓我安心。我們的目標是在一個文檔里面擁有核心元素的「完美像素 」藍圖。這樣就不用給每個頁面重新繪制了。網上有很多可以參考的模板和資源，不過如果你想從零開始自己制作的話，也可以參考我自己已經定義好網格的基礎文件。
下載地址：
鏈接: https://pan.baidu.com/s/1jIyqmqi 密碼: s77s
歡迎關注：
