栅格化设计

一、为什么要栅格系统

做了好几次规范设计了，每次都做的不是让自己很满意，所以值得自己好好反思一下了。我们在做设计的时候，有时候比较随意，尤其是产品从0-1的时候，由于前期的随意，就导致后面越来越不规范，不同页面有不同的尺寸规则。这时候应该好好想想，为什么我们的设计越来越杂乱？主要原因还是我们前期没有搭建好规范。比如栅格，就是我们设计的基石。

栅格系统让我们的页面设计变得有规律，提升了页面的一致性和复用性，也减少了设计、开发沟通成本。很多设计师对栅格只知道大致意思，但没有深入了解，所以今天我们就来深入探讨下栅格设计。

二、屏幕分布

我们讲栅格，主要讲pc的栅格设计，当然移动端也应该利用栅格设计。我们在做移动端的设计的时候，经常会抱怨某某某公司又出新手机了，我又要去适配它们了。移动端的屏幕分辨率是比较多样的，从iPhone的4到现在的iPhone XS Max，屏幕分辨率已经好几种了，再加上安卓系统，就更多了。我们在抱怨移动端的屏幕尺寸过多，适配难度大，那么，pc端又何尝不是呢。

首先来看看，目前pc端的屏幕尺寸占比

从图中我们可以看出，目前国内 PC端用户屏幕分辨率排名前三的分别是1920*1080、1366*768、1400*900；他们三者之和为60.96%，占了很大的比例。

如果我们是面向企业内部的设计，企业通常是批量采购，那我们就以主要屏幕尺寸为基础进行设计就行。如果企业使用的屏幕没有统一，使用比例和全国的分布差不多，那就应该按照整体屏幕分布来决定如何设计了。

根据比例来看，1440的尺寸处于中间位置，如果以它为基准设计，最终向上向下响应适配后，相对误差最小，从而较好的用户使用体验。目前，Ant design设计规范也采用1440作为基准尺寸（Ant design是蚂蚁金服开源的一套设计规范，做过规范的同学应该不陌生。其实很多时候，我们可以直接拿来用，没必要另外造车轮，还没别人做的好）。

三、建立你的原子单位

基准屏幕确定好后，那我们开始来确定下栅格的原子单位。从上面的屏幕分辨率可以看出，屏幕的尺寸都为偶数，为了保证我们的基本单元能够被整除，我们需要确定最小尺寸的单位，通常我们定为8。为什么是8，而不是4、6、10、12呢，我们可以看看下面的这张图。4和8在x轴整除率是一样大的，如果算上y轴，4的整除率是最高的。不过4太小，有时候区分不明显，设计需要反复修改，在这个过程中设计成本会很大。 

不仅设计如此，其实开发在设计的时候也是遵循偶数原则。前端开源组件库比如 Metronic、Antdesign 等也是基于8的原子单位来设计。这样能更好的还原我们的设计稿，降低开发成本。

如图所示，左边采用8为原子单位，所有的尺寸都是8的倍数，能很好的确定设计规律。右边的尺寸比较随意，没有规律所循，设计一致性比较难达到，若有新的组件，那尺寸该如何定呢，都是比较麻烦的事情。所以，确定好你的原子单位是很重要的，而通常我们就是采用8为原子单位。

四、栅格设计的几大要素

确定好基准屏幕、原子单位后，我们就要来了解栅格设计的一些基本要素了。

在做栅格的时候，我们需要明白几个关键词：屏幕分辨率、设计尺寸、内容宽度、水槽、列宽、页边距、留白

1、屏幕分辨率，我们上面也讲了，由于设备的不同，导致市场上使用着各种分辨率的尺寸，具体什么是分辨率就不讲了。只是我们在做设计之前，需要了解我们的用户屏幕分辨率的使用情况

2、设计尺寸，前面说了，根据用户的使用情况，选一个合适的设计尺寸，这个是随着用户的使用情况变化而变化的，通常设备更新没那么快，所以暂时建议采用比较通用的设计尺寸。1440x900

3、内容宽度，我们在设计的时候，并不是确定好设计尺寸了就在这个尺寸内铺满设计内容。毕竟我们的用户的屏幕分辨率各不相同，为了更好的满足绝大多数用户，我们要确定好设计的内容宽度。因为我们前面已经确定好基准设计尺寸了，那我们的内容宽度就根据这个基准尺寸来确定。具体的宽度需要根据各自业务来定。

4、水槽（Gutter），水槽就是列和行的分割间距，水槽越大页面布局间距就越大，水槽越小页面就越紧凑。水槽的宽度是8n，也就是水槽可以以8为基本单位去增加或减小。为了减少设计决策成本，我们会事先设定好一系列水槽宽度，并定义好每个宽度对应的使用场景，然后根据每个场景使用对应数值就可以了。比如8、16、 24、32 、40。根据实践经验，正常情况下，两个模块间距（水槽）的值为24时，视觉上是最为舒适。比如Ant design中的设计水槽就是24px

5、列宽，目前有两种比较主流的等分方式是12等分与24等分。列是栅格系统纵向排布依据，列数越多纵向排布内容就可以越细致，但是版面内容就会变的更稠密，内容更碎。

6、页边距，就是设计内容到边框的间距，也可以理解为到屏幕边框的间距

7、留白，留白的目的是让我们的设计有一定的呼吸韵律，不能过于紧凑。当然，我们可以把所有空白的地方都统称为留白，但是我们这里就简单的描述为具体内容到模块之间的距离。

说了这么多，我们来看看图

看了这么多是不是有点懵逼，那我们继续简化下，因为有的时候页边距和留白是合二为一的，主要还是根据你们自己设计的风格来定。

由于a+i=A，

可得：W=(A×n) – i

网格宽度=（一个栅格单元宽度xn）-水槽

比如，本设计尺寸以1440px为基础，那么两边间距设为24，从而得出W=1440 - 24 - 24 = 1392，水槽宽度也定为i=24=8x3，设置为12列：

W=（A x 12）-24

A=（1392+24）÷ 12 = 118

a= 118 - 24 =94

五、栅格的应用

现在，我们公式算法搞清楚后，我们就来进行排版设计。以12栅格系统为例，一个12栅格系统可以根据业务需要被等分或者不等分，比如，1：1：1、1：2：1、2：5：5、3：4：5、1：1：1：1，具体采用哪种比例的组合需要我们根据自己业务需求来定，我们此处所说的比例实际上就是具体内容的宽度。当然，如果你栅格是24，那么你的比例会更加细致，排布也更多变

前面我们看了顶部导航的设置方式，侧边导航也是一样的，原理懂了就好办了。比如，我们以Ant design的设计为参考样式

六、工具介绍

看了这些，那我们来介绍下工具，在sketch中，我们有2个方法可以使用。

第1种，是采用sketch自带的工具，在显示-画布-布局设置，找到布局设置界面，可以根据自己的需要设置。但是有个缺点，就是这个布局是该页面全局的，不能针对某一块设定。如下图 

第2种，我们可以采用插件，BootstrapGrid-maste，这个插件比较方便，可以设置多个，选择好你的内容，就可以根据内容设置栅格了。但是，有个缺点，目前最大只能设置12栅格。下载地址：https://www.cr173.com/mac/811601.html

Ps中，在视图-新建参考线版面中，打开这个面板后，可以自己设定栅格系统，在预设这里可以看到 Ps 已经预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面上参考线的变化。预设中「装订线」的宽度即栅格系统中水槽的宽度。默认为20px，我们可以根据之前讨论的8的倍数原则，将其手动更改为24。

另外，PS插件Assistor Ps 的参考线功能也比较好用，推荐下，还有就是GuideGuide虽然插件多种多样，大家的使用的软件也各不相同，万变不离其宗，我们掌握好原理了，这些就能很好的被我们使用，提升我们的工作效率和设计质量了。

最后，其实我还想深入了解下移动端的栅格设计，其实发现移动端的界面比较小，大家在实际情况中偶尔会使用一些，尤其是视觉设计的时候。但其实原理都一样，也就不再啰嗦了。以上内容也是我在阅读大量文章后，根据自己的一些理解写的，我写文章只是让自己更好的系统理解设计原理，形成自己的系统知识，若有的同学还是比较迷茫，感觉自己的知识还是很散，也可以采用这种方法，读书也一样。后续还有更多的自我总结，仅此自勉。