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

三、怎么样建立网页栅格

1. 确定屏幕尺寸，确定安全范围

当我们开始着手做一个项目时，首先应考虑在多大的尺寸范围内做设计，也就是确定栅格区域的宽度范围。

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：列的值(栏+槽)，也就是栅格单个内容区的宽度。

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