什么是网格？

网格是一种对齐工具，由一些横向和纵向的色条或线条组成。主要用于对齐一些文字、图片、图形，建立这些内容的秩序和规则，用更科学的方法去排版。保证设计一致性的一个基础框架。当然，也只有设计师能看得见。

网格的基本元素

网格主要由边距、单元栏、栏间距（也叫水槽）组成。

边距：定义页面整体内容区域

水槽：主要用于在设计中间隔内容

单元栏：主要用于在设计中填充内容

怎么定义网格？

1、了解你的设计主张

关于怎么设置网格，我们要知道网格不是固定的，是可以变化的。

首先我们得弄清楚这个设计，你需要传递的设计主张是什么，是高端还是热闹的，还是冷静的，设计调性前期需要根据产品背景，用户人群去了解清楚。每个产品不同，运用场景，用户人群，都各不相同，只有我们多试，找到合适的那个就是最好的。

有一个简单的原理就是：网格越多列数越多，布局越灵活。

如果是给超市海报做设计，那么你的设计主张是热闹的。那么网格系统一定要紧凑一些，提现出热闹。

如果是给高端服饰品牌做设计，那设计主张是高端的。那么网格系统需要留白很多，呼吸感很强的。

2、科学定义UI中的网格系统

网格不是固定的，是可以去变化的，有一个简单的原理就是：网格越多列数越多，布局越灵活。

每个产品不同，运用场景，用户人群，都各不相同，没有一个标准参数，只有我们多试，找到合适的那个就是最好的。

定义UI网格系统的方法有很多，如运用8点网格系统、裴波那契数列、最小原子单位的增量、从底层系统参数化定义间距等。

拿最小原子单位的增量来举例

1、首先确定基础原子单位

在化学理论有最小单位原子，原子可以组成分子，分子可以组成更多的化学元素，在UI系统里也一样，我们首先要保证你这个世界里面元素是有个基础的。常用的原子单位有3、4、5、6、8。

比如这里我定最小原子单位为6

那么以6为基准的去延展系统间距，得到如下系统

1、2、3、6、12、18、24、38、36、42、48……，这里都是6的倍数或能被6整除

继续优化梳理间距得到如下（为何要梳理，因为间距过多、过于细碎也会导致间距比较乱）以6为基准，前面个数是后面个数的两倍递增

1、2、6、12、24、48、96、112

如图所示我界面设计中所用到的间距参数都是提前定义好的间距，然后设计中就用定义好的间距，不要在随意的去增加间距，如果不够用，继续以6的增量继续增加间距，灵活运用即可。

2、定边距和水槽大小

前面说过，先定最小单位，假如我们最小单位是4，总宽是375（sketch1倍设计尺寸），我左右边距是12，中间内容和内容之间留8，这里注意，单位一定是前面我们定的4的倍数

掏出计算器：

（375-边距左右两边24- 水槽五个40 ） ➗  6（移动端大多是6）= 51(四舍五入) 

必然会出现除不尽的情况这个避免不了，取整数，必然有个内容区域面积会少1个px，这个没关系

这就是我们定的我们栅格，我们的系统骨架，设计时候必须保证每个设计元素，在我们框架内，保持规则，边距不要出现内容，水槽如果放置内容，尽量以组的形式

3、定横向间距

虽然大多数在定骨架时候可以忽略横向，但是在我们UI系统设计中还是需要对横向的设计间距进行统一，我们需要保证横向的所有设计师产品的横向间距是有规律的。

这里可以用到费波那契数列:

又译为费波拿契数、斐波那契数列、费氏数列、黄金分割数列。在数学上，费波那契数列是以递增的方法来定义：

用文字来说，就是费波那契数列由0和1开始，之后的费波那契系数就是由之前的两数相加而得出。首几个费波那契系数是：

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

还是以4位原子单位举例：1、2、4、8、12、20、32、52、84

当然这个间距只是一个运用费波那契数列的一个参考，如果在运用过程中如果觉得间距不够用，完全可以去添加或者调整，但是一定要在系统的原则基础上加有规律的间距

看看别人是怎么用的

网格在国内普及的少，但是在国外网格在他们设计中至关重要。

上面页面是Pinterest上截图的，然后从中算出他们网格布局，可以看出他们是6列网格布局。所有图片占3列，按钮占6列，文字信息和图标都紧贴网格边界，每个页面的左右边距相同。通过这种形式来保持页面统一。

airbnb设计和体验都非常棒，他们的设计很有秩序感。

从图片上可以看到Airbnb采用的左右边距24，中间12的网格系统，可以看出这套栅格系统留白会比较多，所以我们在浏览AAirbnb的设计时候会发现他们页面会非常舒服，很好的提现出呼吸感。

网格中的布局

看到这里可能细心的同学会疑惑，你看顶部两个按钮，还有下面的文字按钮都没有贴齐网格

其实这里有个很重要的知识点就是网格布局，我们需要把页面中常用的布局划分出来

当你的内容占着水槽的时候，是连着列一起用的。

其实我们的网格建立只是第一步，更多我们是运用布局的组合在设计中运用，当你的内容需要占住水槽的时候，是连着列一起用的。一个完整的网格系统是由网格和布局组成的