如何在APP设计中运用网格系统?
--安阳师范学院互联网+应用技术学院UI设计方向讲师 黄艳芳
第1步:定义最小单元格
最小单元格的数值,大多数APP会选择4-10这个范围内一个偶数。那么选用哪个值最为合适呢?
这需要从两方面考虑:
? 一方面是该数值是否能被大多数手机屏幕的宽度整除,即广泛的适用性;
? 另一方面是在具体使用时是否具有一定的灵活性。
在适用性方面,4、6、8、10这四个数值都是基本可以满足的,在灵活性方面,4px表现最佳,但是页面就会被分割的非常细碎,在设计时比较难于把控。
因此我们需要根据APP的实际情况选择合适的数值,4px或6px单元格比较适合页面内容信息较多,布局排版比较复杂的产品,例如:淘宝、考拉等电商类APP;而8px单元格对一般的设计场景都可以很好的满足,比较适合大多数的APP产品,因此是比较推荐使用的。
第2步:确定组件间距的增量关系
既然确定了最小单元格的数值,那么页面里所有的间距(包括水槽、外边距、横向间距等)、组件尺寸等都需要是最小单位的整数倍,以达到统一视觉节奏的目的。例如单元格选择为8px,那么所有用到的间距尺寸将会是8px、16px、24px、32px、40px……
第3步:确定列的数量
我们在设计APP页面时,用到的最多的布局方式就是等分布局,即页面内容区域被N等分,每一份的宽度则根据屏幕宽度自适应调整。那么就从这个角度出发,思考一下页面的网格应该设置为多少列,才能最大程度的满足各种等分布局的需要。
以下列举了几种典型情况(4列、10列、16列等大家有兴趣的话可以自己尝试一下,这里就不一一列举了),我们发现12列和24列除了5等分外,其他情况都可以满足,6列相对稍微差了一点,即结果为:12列=24列>6列>8列。不过其中24列显然将有限的手机屏幕分割的太碎了,因此在实际使用中还是以12列和6列为主。
第4步:sketch布局设置
利用sketch的布局设置功能,即可快速搭建出网格系统的参考布局,在平时做设计的过程中,可以经常使用Ctrl+L快捷键切换布局的显示,提高设计效率。
另外有几点需要注意:
- 总宽=屏幕总宽度-外边距x2;
- 偏移=外边距;
- 3“装订线在外部”不要勾选。
第5步:实际设计运用
这里我们以网易漫画APP的首页为例,利用8px、12列网格系统来一次设计实战。
在首页设计的初期,还没有运用完整的网格系统进行规范,组件之间的间距规律基本以10px、20px、30px为主,各个布局模块之间没有形成内在关联的位置关系,视觉的节奏感不流畅,样式不统一。
下面两个页面中,大部分元素都没有与网格贴合,布局无规律,没有一个客观的参考。
现在我们开始统一使用8px、12列网格系统,对首页进行一次布局优化。在下面三张图中我们看到,无论是顶部图标、入口图标、竖版封面还是横版封面,都由网格系统整体串联起来了,不再是凌乱独立的个体,阅读起来更顺畅。横向的间距也都开始使用8px的整数倍,给用户带来更有节奏的浏览体验。
原文地址:https://blog.51cto.com/14224647/2373970