资讯详情
作为设计师，相信没有不知道栅格系统的。但是如果去问是否会用，得到的答案大多都是否定的。之前也听很多前辈说，栅格系统并没有什么用，但是我在学习了之后，将其用在项目界面上，页面更加规整清晰了，做起来也轻松很多。
我也是前段时间才想要去深入了解一下栅格系统，于是查阅了很多资料并进行学习总结。主要从以下四个方面入手：
1、什么是栅格系统
2、如何设定栅格
3、栅格使用原则
4、实例分析
栅格系统，又叫网格系统。顾名思义，就是用多条横竖交叉的线来组成规律的网格，或者是只有竖线组成的列阵。用以规范版面布局以及信息分布。最初用来辅助平面设计工作，它的出现对设计界有着深远的影响，现在被广泛应用在各种介质上，包括书籍设计、网页设计、以及移动端设计。我今天分析的主要是网页中的栅格系统。
栅格的使用对于作品来说，能让信息排布统一，有秩序美感，并提高内容的可读性；对于设计者来说，能够提高效率，降低斟酌犹豫的成本；并且，在网页设计中，使用网格系统对于前端开发来说也能更加的灵活规范。
栅格的好处我们都知道，但是要怎么用呢？一个完整的栅格系统包含什么元素？栅格的大小间距是固定还是可以自己设定的？以及如何去设置？带着这些问题往下看。栅格是由列、水槽构成。可以做成只有列阵的网格系统，也可以做成横竖交叉的网格系统。先来说只有列阵的网格。
由图片可知：版面宽度=（列宽+水槽宽）*列数知道了列宽、列数、水槽、版面的关系，再来看看如何设定数值：列数的设定：我们可以根据版面的需求设定列数。比如页面中多是大块的内容，我们就可以把列数设置的少一些，而如果是比较复杂的页面，或者是希望页面更加灵活，就可以适当增加列数。一般情况下，列数都是用2、4、6、12、24这样的偶数。水槽宽度：
水槽的宽度也不是固定不变，同样是根据版面的需求来设定。比如说追求版面利用率的产品，水槽宽度就可以小一点，而轻量简洁的页面，水槽宽度就可以设置大一些，增强呼吸感。基本上可以设置为8、10、12、16、20、24这样的数值。
计算列宽：
比如说要在网页上画一组栅格，版心设定为1200px。假定我们使用列数为12，水槽的宽度为20px，那么套用上面的公式计算出列宽：
（列宽+20px）*12=1200
得出：列宽=80px
复杂的页面我们还可以画横竖交叉的网格系统来指导排版。
我用的方法就是绘制好列阵网格之后，直接打组，复制之后90度旋转，然后再稍作调整，就完成了横竖交叉型网格绘制。
我们在做界面的时候，可以自己绘制网格，也可以借助一些工具。比如说用sketch做设计的话，就可以用它里面自带的网格工具。要确定版面、水槽、列宽和列数。同时也可以增加横列。
绘制好栅格之后，在排版的时候就要尽量按照栅格的布局走。要注意两个基本的原则：
放置内容时，要贴齐列，从列开始到列结束，保证内容占整数列，且不会流于水槽之外。至于要占几列可以根据自己的内容灵活决定。
图片中可以看到右侧案例是贴齐水槽的，这样并不规整。也就失去了栅格存在的意义。
我们在排版的时候要把内容看成是多个模块，不可能任何元素都能对齐网格。因此模块内的内容可以不用限制。
很多成熟的产品都有用网格系统来规范版面。下面我以京东商城和虾米音乐两个案例来分析网格系统的实际运用。
