如何用「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. 放大、缩小

（编辑：湖南网）

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