如果你看了我专栏上一篇实战篇：手把手教你用 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
欢迎关注：
