前言

栏式网格是UI常用的一种网格，没有精确设置，是根据自己产品设计风格定义的，留白大水槽可以大些，留白小水槽可以小些。

下面是两款网格设计相对明显的App，我从淘宝和站酷中截取的页面，从中算出他们的网格系统，可以看出它们的最小原子分别可以定义为，淘宝3，站酷10。

电商App：运营模块较多，功能较多，希望可以将各重要内容多展示给用户，因而内容相对紧凑一些，从而留白小，水槽和最小原子小。

设计类App：多以展示用户图片为主，整体设计越简洁越可凸显用户设计图，因而留白大，水槽和最小原子都交大。

一、如何建立UI中的网格系统

网格系统只是辅助我们的骨骼框架，是为了让我们的设计更加的规范，而不是死守每一个像素，必须对齐网格规范，具体根据实际设计风格而定，偶尔有“出格”也是情理中的。

1、设定最小原子

原子（atom）是化学反应不可再分的基本微粒，是构成一般事物的最小单位。在UI设计中我们需要根据产品和设计风格确定最小原子数，也就是UI设计的倍数，这样在做设计时，我们可以已最小倍数为基础进行设计。

现在常用的原子有3（淘宝、天猫等电商类App）、4（Pinterest）、5、8，具体看产品的风格和定位。现在的设计趋势中，多以留白为主，所以最小原子微大，这里我以8定位最小原子（最小单位）。

2、设定边距和水槽

边距和水槽是由最小原子决定，我们设定最小原子为8，那边距和水槽就是8的倍数，假如我们设定产品风格以微留白设计为主，左右两边距设为16px，间距也设为16px，即可得出单元栏大小。

已知：边距16px，栏间距（水槽）16px

得出：单元栏 = (375-16×2-16×5 ) ÷ 6= 43.8333px ≈ 44px

设定的栅格为：边距16，水槽16，单元栏44

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

自己常用的一些网格系统分享

二、如何建立网格中的横向间距

UI设计中间距的重要性能够更好的进行信息的主次传递，栅格与间距也是息息相关的，统一的横向间距设计也是有一定规律所寻的。上面我们定义最小原子为8，那么在间距中，可以采用倍数递增原理来设定间距大小，每个元素之间的间距都是8的倍数，这样整个界面设计就不会参差不齐，就会有规律的上下进行排布，让设计更富有节奏感。

那么以8为倍数的数据有如下间距系统：

1、8、16、24、32、40、48、56、64、72、80、88、96、104、112......

这里我们用到万物皆可的费波那契数列，又称为黄金比数列。简单易懂的说就是由0和1开始，之前的两数相加而得出费波那契系数。

那么从以8为倍数的数据中得出费波那契数列如下图所示

横向间距设计实例：

我们在设定横向间距，间距数不要过多，太多会导致页面较乱。

三、费波那契数列重要性

费波那契数列又称为黄金比数列。它在数学以及自然界中都非常有用。简单易懂的说就是由0和1开始，之前的两数相加而得出费波那契系数。首几个费波那契系数是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233……

1、与黄金比关系

由通用公式，求相邻两项的商的极限，结果是黄金比，所以费波那契数列又称为黄金比数列。

2、与自然界关系

科学家发现，一些植物花瓣、果实的数目排列的方式都有一个神奇的规律，是非常符合费波那契数列，例如菊花、向日葵、松果、菠萝等都是按这种方式生长的，一般会出现34、55、89、144这几个数字。

3、与波浪关系

详细了解费波那契数列网址：

https://www.zhihu.com/question/28062458/answer/39763094

4、UI网格布局

网格设计只是帮助我们的设计更加规范，而不是精确到一个像素，参考网格设计出符合需要的设计，而不是完全对齐网格，在设计时候要保证每个设计的元素在我们的框架内，水槽不要放置内容，如果放置，尽量以组的形式展现。

设计实例：