EOIT论坛

标题: 浅析栅格系统的基础六要素 [打印本页]

作者: 丘丘    时间: 2018-11-20 16:31
标题: 浅析栅格系统的基础六要素
本帖最后由 丘丘 于 2018-11-20 16:54 编辑

首先我们必须要对栅格系统有一个基本的认知,我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。

关于栅格:

栅格是由网格演变而来的另一种说法,都是一个意思——格子,所以不要觉得栅格有多高深复杂,如果把他描述成格子,你还觉得它有多难理解吗?

其实我们都是栅格专家,因为在我们几岁的时候,就已经接触了很多栅格,比如方格本:
(, 下载次数: 12)
关于系统:

我个人理解,系统就是规则,例如ios系统,它有它的规则:屏幕尺寸规则,代码语言规则等等,想在它的系统里做app,就需要遵循的它的规则。

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

所以今天的重点来了,栅格系统(规则)到底包含哪些内容呢?

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

栅格的最小单位
屏幕总宽度
列数
列宽
水槽
安全边距
1. 栅格的最小单位
最小单位是需要优先定好的,因为后面的所有规则都基于它来制定。

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

(, 下载次数: 13)