栅格化系统设计

Seem_

杭州/UI设计师/6年前/5591浏览

版权

栅格化系统设计

Seem_

栅格系统Grid Systems，也有翻译为网格系统。

定义：运用固定的格子遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则

栅格化设计（grid-design）主要是为了提高网页的规范性。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。栅格系统让我们的页面设计变得有规律，提升了页面的一致性和复用性，也减少了设计、开发沟通成本。很多设计师对栅格只知道大致意思，但没有深入了解，所以今天我们就深入探讨下栅格设计对于网页设计中的运用和布局。

做了好几个网站设计了，每次都做的不是让自己很满意，所以值得自己好好反思一下了。所以这篇文章即是个人反思沉淀也是把过去实践中的经验分享下，部分内容资料来源网络整理和其他文章平台，侵权必删！。

我们在做设计的时候，有时候比较随意，尤其是产品从0-1的时候，由于前期的随意，就导致后面越来越不规范，不同页面有不同的尺寸规则。这时候应该好好想想，为什么我们的设计越来越杂乱？主要原因还是我们前期没有搭建好规范。比如栅格，就是我们设计的基石。

一、常见的栅格化设计

首先来认识栅格系统。关于栅格化设计，方案非常多，来看下面几个案例，我们都称之为栅格化设计。

无间距的单元格

有间距的单元格

二、栅格-你需要了解的数据

首先来看看，2018pc端的屏幕尺寸占比（虽然已经过去两年了，但大体环境差别不是很多，未来屏幕分辨率只会向着更高的分辨率前进）。

从图中可以看出，目前国内 PC端用户屏幕分辨率排名前三的分别是19201080、1366768、1400*900；他们三者之和为60.96%，占了很大的比例。低分辨率的PC基本都是传统企业采购的老师台式机显示器。除此之外个人电脑，互联网企业电脑最高分辨率都在1920X1080以上。当然在实际当中我们依然要根据我们网站的目标用户群体和网站的定位来确定我们设计的版心宽度多少较为合适。通常为960px/1200px/1440px。少数特殊尺寸1500px或通栏

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

三、设计前的确认

拿到一个网站的设计需求时，先确定是不是要单独开发移动版网站，因为响应式布局固然兼顾了手机端，但受加载速度、手机浏览器、自由度等等的影响，如综合电商之类页面复杂的网站如果不做单独的移动站，单纯依靠响应式布局，在手机端的表现很不理想，所以，如果会开发移动版网站的话，恭喜设计师，你需要的只是栅格化设计，也就是广义上的栅格系统。绝大多数的工作流程是设计师把方案交付给前端，前端再考虑实现方法。现在，这种工作流程需要优化一下，即在开始设计前与开发人员的一次深度沟通。提前沟通的好处在于，你了解他们的工作方式，而通过沟通，设计师需要获得的更重要的一点信息是，网站是不是需要做成响应式，这是后面建立栅格系统的关键。

响应式设计只是网页设计的一个折中方案，依赖于项目实际情况进行选择。对于设计师来说，如果没有必须的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。

对于是否采用栅格化设计，采用下面几个案例说明一下：

1、企业产品类，单一的介绍几种产品为主

2、功能型网站

3、不拘泥形式的设计

针对这三个具有代表性的案例，栅格化设计是没有必要的。理由很简单，栅格的优点也是缺点，规范意味着统一，也意味着限制。在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是需要设计感的。

但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。

三、定义栅格规范

建立你的原子单位

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

不仅设计如此，其实开发在设计的时候也是遵循偶数原则。

前端开源组件库比如 Metronic、Antdesign 等也是基于8的原子单位来设计。这样能更好的还原我们的设计稿，降低开发成本。

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

四、栅格设计的几大要素

确定好基准屏幕、原子单位后，我们就要来了解栅格设计的一些基本要素了。在做栅格的时候，我们需要明白几个关键词：屏幕分辨率、设计尺寸、内容宽度、水槽、列宽、页边距、留白

我们来看看图

1、屏幕分辨率，我们上面也讲了，由于设备的不同，导致市场上使用着各种分辨率的尺寸，具体什么是分辨率就不讲了。只是我们在做设计之前，需要了解我们的用户屏幕分辨率的使用情况
2、设计尺寸，前面说了，根据用户的使用情况，选一个合适的设计尺寸，这个是随着用户的使用情况变化而变化的，通常设备更新没那么快，所以暂时建议采用比较通用的设计尺寸。1920*1080
3、内容宽度，我们在设计的时候，并不是确定好设计尺寸了就在这个尺寸内铺满设计内容。毕竟我们的用户的屏幕分辨率各不相同，为了更好的满足绝大多数用户，我们要确定好设计的内容宽度。因为我们前面已经确定好基准设计尺寸了，那我们的内容宽度就根据这个基准尺寸来确定。具体的宽度需要根据各自业务来定。一般内容宽度1200px/1440px
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

小结

栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格，而不要被栅格所束缚。

在 Sketch 里设置栅格，定义好3个数值即可，总宽度、列数和水槽，这三个内容定义好数值后，其他内容就会自动计算，一个栅格就生成了。

五、栅格的应用

现在，我们公式算法搞清楚后，我们就来进行排版设计。以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虽然插件多种多样，大家的使用的软件也各不相同，万变不离其宗，我们掌握好原理了，这些就能很好的被我们使用，提升我们的工作效率和设计质量了。

目前ToB的网站可能还需要兼顾部分分辨率不高的用户会采用960 gird栅格系统，对于大多数的网站考虑到宽屏的设计（需要舍弃一部分分辨率不高的用户）可以把栅格化系统的宽度建为960以上。但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在sketch文档中，你的内容部分是950px，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。