超全面！栅格系统在设计中的要点总结

一、栅格的来源

二、什么是栅格

三、为什么要用栅格

四、栅格涉及的基本词

五、栅格在设计中的应用

六、主流网站如何使用栅格系统

七、如何用栅格系统布局页面

一、栅格的来源

1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形

栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格

二、什么是栅格

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，在二战后大受欢迎，已成为今日出版物设计的主流风格之一

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

印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计

网页栅格：

包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布

三、为什么要使用栅格

设计师可以利用栅格让画面更有调性，让内容更具可读性；可以快速校准元素的位置，让画面更平衡；可以模块化地管理元素，让版面更有层次感

四、栅格涉及的基本词

最小单位

需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增

网页端最小单位：10

移动端最小单位：3、4、5

常用的计算方式

五、栅格在设计中的应用

960栅格系统

960栅格系统是在早期被运用的最广的栅格系统，栅格宽度为960px，12列，每列60px，水槽为20px，内容区域的总宽度为940px

8pt栅格系统

这个时候我们会好奇，为什么是8的倍数，而不是2、4、6、10、12？

第一：前端开源组件库基于8的原子单位来设计

开发工程师使用的前端开源组件库比如 Metronic、Antdesign 、padding、margin、sizing等都是基于任何都是8的倍数来还原的

因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们设计师的稿件

通俗来说就是8点栅格是基于前端开发组件来设计的，为了方便对接和提高效率，更高品质的还原我们的设计稿

所以我们在设计时使用8点栅格，基本的使用原则，设计师在设计中需要一致的的使用8倍数来定义元素尺寸，填充和边距

第二，现在的设备尺寸和分辨率很多，对于后期要保证各个屏幕的适配还要确保屏幕不会模糊、失真，以8为单位符合「偶数原则」。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现

第三，8作为最小单位，不会像2、4、6那样显得琐碎页面分割感强，也不会像10、12那样无法把握小细节，让元素与后期开发统一，大大提高开发效率

六、主流网站如何使用栅格系统

一起看一下两个主流电商如何使用栅格布局页面，进一步了解栅格系统的使用

左淘宝、右京东

淘宝布局

下图包含：完整内容展示布局、浏览器缩小时内容展示布局。

淘宝布局分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏

栅格布局

完整内容展示布局：网页总宽度为1200，列数为24，水槽为10

浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10

在浏览器缩小时的栅格布局里，隐藏4列，内容2宽度变窄占10列，其他内容不变

栅格布局设定后，可以很方便计算出每个模块内容的宽度

栅格的列数，根据具体内容设定。内容模块较多，建议等分列数多一些，容易布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以等分成24列，也可以等分成12列

栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样

京东布局

下图包含：完整内容展示布局、浏览器缩小时内容展示布局

京东布局和淘宝布局一样分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏

栅格布局

完整内容展示布局：网页总宽度为1200，列数为24，水槽为10

浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10

在浏览器缩小时的栅格布局里，隐藏4列，其他内容不变

京东栅格布局，每个模块内容的宽度如下图

再来强调一下：栅格的列数，根据具体内容设定，京东网页等分成24列，也可以等分成12列

栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样

七、如何用栅格系统布局页面

我们在设计稿中定义自己的栅格系统，首先要了解基本的这些词汇

当然这些不用我们去算，在这里我们只做了解，以sketch为例：

第一步：确定页面宽度，比如1920、1800、1600、1366、1280等等

第二步：分析内容等分的复杂度，如果内容简单只需要3、4等分，12列的栅格系统即可。如果有较多不等分的可能，还是建议采用24列的栅格系统，可灵活设置

第三步：根据内容布局页面，确定模块之间是否有“间隔”，间隔尺寸是多少，6px、8px、10px、12px、20px选一个方便计算、方便记忆和整除的数值即可。就像过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12，15，是不是突然发现设计其实是一道数学题

ps栅格设置：

今天你学会了吗？