如何用「8点网格」来规范你的设计？看这篇好文！

3. 多平台的响应式设计

基本的主流屏幕尺寸都至少在横竖一个轴的维度上能被 8 整除，很多时候两个轴的未读都可以。甚至，有些平台的设计规范（比如Material Deisgn）会特别要求建立4pt或8pt为基准的网格，这样整套系统就能自然的符合这一规则。

△ 当前主流屏幕的解决方案，可以看到基本上都能被 8 整除

有些屏幕会很难调整适应这个系统，比如iPhone6 开始的375× 667 的尺寸，但是解决方法也很简单。保持填充和空隙（padding & margin）的尺寸统一遵循规则，剩余的空间可以用块状的元素来填充。有一些元素的尺寸是奇数的也没关系，只要他们能让整体遵守这套规则就好。

记住你的用户永远不会看到你实际使用的尺寸。

比如Material Design没有限制元素的高度一定符合 8 的倍数，但是让元素的点击范围遵守 8 点网格的规则。

所以说，这套系统更多的是用来规范自己的设计和开发，节省开发和设计沟通的时间，提高设计统一性，对用户来说可能感知不大。

执行这套方案的技巧

1. 建立网格并对齐网格

几乎所有设计软件都有「对齐到网格」的选项。如果你的设计绝对符合这套系统的话，设置好相应的网格选项并对齐绝对会给你很大的帮助。所以，你要先确保你打开了「对齐到网格」选项。

△ Sketch中设置8px为基准的网格

2. 确定你自己的增量习惯

大多数设计软件都可以调整移动增量值，我喜欢把我的大增加值（按住command移动的增量）从默认的 10 调整到8，这会方便很多。

△ 在sketch中调整键盘增量

3. 快捷键

很多应用程序都有快捷键，可以让你在设计时快速移动元素、调整大小。记住这些快捷键，配合网格使用可以大大提高你的效率。

4. 建立icon的框架

△ Material Design icon的框架

图标通常需要不同的大小以保持相同的视觉重量。用框架来设计图标，这是保持尺寸一致性的简单方法。同时，框架能有效保证图标的大小符合网格的规范。同样记得把图标的框架大小设置成 8 的倍数，并从大的图标开始设计，缩放后记得对细节做调整。

5. 放大、缩小

（编辑：牡丹江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!