如何在APP设计中运用网格系统？

如何在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快捷键切换布局的显示，提高设计效率。
另外有几点需要注意：

1. 总宽=屏幕总宽度-外边距x2；
2. 偏移=外边距；

3. 3“装订线在外部”不要勾选。
   
   第5步：实际设计运用
   这里我们以网易漫画APP的首页为例，利用8px、12列网格系统来一次设计实战。
   在首页设计的初期，还没有运用完整的网格系统进行规范，组件之间的间距规律基本以10px、20px、30px为主，各个布局模块之间没有形成内在关联的位置关系，视觉的节奏感不流畅，样式不统一。
   下面两个页面中，大部分元素都没有与网格贴合，布局无规律，没有一个客观的参考。

   
   现在我们开始统一使用8px、12列网格系统，对首页进行一次布局优化。在下面三张图中我们看到，无论是顶部图标、入口图标、竖版封面还是横版封面，都由网格系统整体串联起来了，不再是凌乱独立的个体，阅读起来更顺畅。横向的间距也都开始使用8px的整数倍，给用户带来更有节奏的浏览体验。

   

标签：单元格,APP,布局,网格,8px,运用,页面
来源： https://blog.51cto.com/14224647/2373970