UI设计师必学栅格设计原理和技巧

　　2. 确定关键数据：列的数量、水槽的宽度

　　常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。

　　栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。

　　△ 槽的数值越大，页面留白越多

　　需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。

　　计算公式

　　我们假设内容区宽度为W(Weight)，列宽为C(Column)，列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。

　　举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16;那么可以得出列宽60，栏为48。

　　内容区应从水槽开始到水槽结束：

　　附：sketch 栅格工具

　　目前，很多软件提供自动栅格设置功能，sketch也提供这样的功能：Layout Settings。

　　Total Width：相当于 Container，是内容区的宽度。

　　Offset：表示栅格的偏移量，表示栅格从哪里开始。

　　Number of Columns：表示栅格的数量。

　　Gutter on outside：记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。

　　Gutter Width：槽的值，通常是定值，控制页面留白间隙。

　　Column Width：列的值(栏+槽)，也就是栅格单个内容区的宽度。

　　欢迎关注「宜信大数据用户体验设计部」公众号：