如何建立栅格系统

在UI设计中，我们把宽度为“W”的页面分割成n个小列“a”，每个小列与小列之间的水槽设为“b”,此时我们把“a+b”定义为“c”。

它们之间的关系为：W =c*n-b+2d

按照这个逻辑思路用以下几个步骤建立栅格系统。

1、首先设置栅格的最小单位

最小单位是需要优先定好的，因为后面的所有规则都基于它来设计的，使用的是网格设置，pc端常用最小单位是10，移动端常用最小单位是3、4、5，不过这些也不是固定的，主要还是视实际情况而定。如下图：

2、设置屏幕总宽度

做界面设计前会先设置一个个尺寸，宽度是固定的，因为内容不定所以高度也是情况而定，使用布局设置，sketch中默认屏幕内容宽度是960，是现在最常用的一个网页宽度。

3、设置列数

就是纵向分栏数量，sketch默认分为12列，也可以分为24列，这是网页端的常用分法，移动端一般是6列。

4、 设置列宽

当960宽度的界面被纵向12等分后，1列宽度是80，而这80的宽度其实又包含两个内容，一个是小列，一个是水槽，如下图：

5.、设置水槽（间隔）

布局设置中间距宽度就是水槽，红色区域宽度就是水槽（间隔），水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。水槽可以将内容更规范的区分开来。

6、 sketch默认安全边距

界面左右保证可读性和美观度的合适的空隙就是安全边距，在sketch中已经默认做出了安全边距，Sketch里设置水槽后，安全边距是水槽的0.5倍，如果有特殊需求，想扩大安全边距，可以通过减小总宽度来实现安全边距的增大。

7、总结

建立栅格系统可以帮助我们更好的做设计，让界面更加有条理性，让内容可读性变高，快速校准元素在界面内的位置，让界面更加稳定平衡，让版面更加有层次感、模块化的管理元素，既要利用好栅格系统又不能被其规范所束缚，让设计自由灵活，科学规范。

Powered by Froala Editor