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

　　颜色、图形、排版、网格等是组成体系四年夜视觉言语的根底本子单元，明天去道下网格体系正在产物设想中的使用及界说办法。

　　初识网格

　　Pinterest

　　便如上图所示，我们设想产物界里中离没有开网格，网格让界里愈加有节拍且疑息层级更明晰，使我们可以温馨的浏览及很好利用产物。

　　蹩脚的网格体系是无划定规矩，无节拍感可行，给用户显现出一种劣量的产物

　　今朝产物界里设想的近况

　　各人做仄里设想的时分该当听过 Gird System即网格体系，那末我们正在 APP 设想中怎样准确利用

　　看个例子：

　　右边战左边各人以为谁人间距好些?细看假如没有仔细的同窗看没有太出多年夜的区分，那末我们看下他们的网格是怎样的(基于750设想)

　　许多刚进止做设想的同窗设想的界里便好像右边那样毫无纪律可行，以至有些事情几年的设想师也会呈现一样的成绩，出有科教的来界说体系间距，招致界里设想品格感低，无纪律的来利用间距，怎样才气进步产物品格?

　　怎样科教的界说 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的删量持续删减间距，灵敏使用便可。

　　其他组件拓展利用演示

　　上里的案例减上办法真战各人皆分明了么，上里案例的间距均去自我前期界说好的，实在很简朴，办法要灵敏使用，假如间距不敷能够恰当删减的，牢记勿治用间距。

　　总结

　　正在界说间距历程中需求留意的面：

　　最小本子单元其实不是随便界说的，保举以下;

　　间距界说以某一最小本子的删量来界说;

　　牢记勿治用间距，间距利用得有纪律战节拍。

　　做者：TONY，UX视觉设想师，喜好探究统统新颖事物，爱分享，写文章。

　　本文由 @TONY 本创公布。已经答应，制止转载。

　　题图去自 Unsplash，基于 CC0 和谈