每个设计师都该懂的栅格系统基础六要素

正文

请到「今天看啥」查看全文

栅格有了规则，也就形成了我们所说的栅格系统。

所以今天的重点来了，栅格系统（规则）到底包含哪些内容呢？

我通过研究sketch软件的一些栅格设置选项来反推栅格系统包含的内容，得到栅格系统基础六要素，大纲如下：

1. 栅格的最小单位

2. 屏幕总宽度

3. 列数

4. 列宽

5. 水槽

6. 安全边距

1. 栅格的最小单位

最小单位是需要优先定好的，因为后面的所有规则都基于它来制定。

下图就是在sketch设置栅格大小的页面：

如果你用sketch却不知道上面这个界面是哪里调出来了，请出门左拐去百度一下！

这里再简单介绍一下：pc端常用最小单位是10，移动端常用最小单位是3、4、5，不过这些也不是固定的，还是那句话，能解决工作上的实际问题就是正确的。

2. 屏幕总宽度

做界面设计会先依附于一个尺寸，由于内容的多少是不确定的，所以高度我们没有办法定死，但内容区的宽度是可以定的，sketch给我们的默认屏幕宽度是960，网页设计中最受欢迎的一个尺寸：

请到「今天看啥」查看全文