如何用网格系统设计出大师般的APP界面(2)

如何科学的定义 UI 的中网格系统

定义 UI 网格系统方法很多，如运用 8 点网格系统、斐波那契数列、某最小原子单位的增量、从底层系统参数化定义间距等，本次就讲某最小原子单位的增量去定义网格系统

（1） 首先确定基础间距原子单位，比如这里我定义最小数值为 6，那么以 6 为基准的去延展系统间距，得到如下间距系统

1、2、6、12、18、24、30、36、42、48、54、60、66、72……、96、 192 等，这里都是 6 的倍数或能被 6 整除

（2）继续优化梳理间距得到如下，为何要梳理？如果间距多，过于细碎也会导致画间距比较乱（以 6 为基准，前面个数是后面个数的 2 倍递增）

1、2、6、12、24、48、96、112

（3） 实战演示

如右图所示我界面设计中所用到的间距参数都是前期定义好的间距，然后设计时候就使用定义好的间距，不要在随意的去增加间距，如果间距不够用，可以在继续以 6 的增量继续增加间距，灵活运用即可。

其他组件拓展使用演示

上面的案例加上方法实战大家都清楚了么，上面案例的间距均来自我前期定义好的，其实很简单，方法要灵活运用，如果间距不够可以适当增加的，切记勿乱用间距。

总结

在定义间距过程中需要注意的点：

1. 最小原子单位并不是随意定义的，推荐以下；

2. 间距定义以某一最小原子的增量去定义；

3. 切记勿乱用间距，间距使用得有规律和节奏。

作者：TONY，UX视觉设计师，喜欢探索一切新鲜事物，爱分享，写文章。

（编辑：ASP站长网）