设计基础（3）：重新认识栅格系统

子牧UXD

B端主要是PC端产品，大部分应用在浏览器中。而PC显示器的分辨率多种多样，并且跨度还很大，主流的包括1366、1440、1920等。如何保证不同分辨率下界面良好的展示效果呢？这里就要应用到“栅格”和“布局”了。

简单地说，栅格是一种页面空间的划分方式，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

本文包括栅格系统的构成、基础原理以及简单的应用等分析。文章为基础扫盲，高手请多指教....

#01 栅格系统的好处

栅格系统是设计规范的一部分，好处也跟设计规范差不多。主要有3个方面：

1）保证一致性

B端产品页面具有很大的相似性，主要是“搜索条件+表格”或者表单详情页面。制定了栅格后，页面内容可以按照统一的规则布局，包括起始位置、留白间距等，保证了页面的一致性，避免设计的随意性。

2）提高效率

根据栅格系统，设计师可以将内容直接放置在对应的栅格中即可，减少了位置调整、空间计算等重复性基础操作，可以快速搭建界面，提高工作效率。

▲图片来自AcroDesign 设计规范

3）满足多分辨率的要求

在不同的屏幕分辨率下，根据栅格系统可以制定响应式设计的策略，与前端开发可以做好对接沟通，保证内容展示的效率和界面秩序，同时减少了设计还原度验证的成本。

#02 栅格系统的构成

栅格系统包括边距（Margins）、列(Columns)、水槽 (Gutters)3个构成元素。

▲栅格系统（抱歉，指示线标注有误）

边距（Margins）

边距是内容与左右边缘的空间。因此有左边距和右边距。通常是固定值，一般是24px，或者8的倍数。主要是用来增加留白，让页面有呼吸感，避免内容过于紧凑。

列（Columns）

栅格中列是个常量，例如12列或者24列。每一列的宽度相同，会根据屏幕大小进行自适应调整。

水槽（Gutters）

水槽是列与列之间的空隙。后台管理系统的水槽使用网格单位 8 的倍数，一般采用 16/24px。根据亲密性关系，水槽越大，内容元素关系越弱。反之，关系则更紧密。

搞清楚了基本构成元素后，还需要明确2个关键的数值，网格单位和列的数量n。

网格单位

上文提到了8的倍数。8就是栅格系统的网格单位，就像Logo网格图的基础单位一样。

网格单位可以让栅格系统更加规范和标准，同时也是设定页面元素对齐和间距的基础标准。有了网格单位后，可以有效节省设计开发沟通成本。

网格单位的选择要考虑与主流屏幕分辨率的适配，大多数主流的分辨率都可以被8整除。同时也要考虑设计的兼容性，满足大多数场景下的间距需要。因此网格单位不宜过小，也不宜过大。

能被8整除，也能够被4和16整除，为什么不选择这两个数值呢？

如果选用4px，会导致页面分割太碎（倍数关系值太多，应用性不强，例如12、20、28等不常用），页面元素尺寸计算也比较麻烦，不方便记忆。例如64px，就是4的16倍，在实际使用中较为繁琐。

如果选用16px作为网格单位，兼容性不足，例如4px和8px的场景，则是16的0.25倍和0.5倍，造成n不能取整。同时跨度太大，不具备普适性。（以上是个人理解）

现在主流的设计规范，例如Ant Design、TDesign、ArcoDeisgn中网格单位选择的都是8px。

列数

列数决定了页面划分的精细程度。目前有两种比较主流的方式，12列与24列。相较12列栅格系统，24列栅格系统变化更加灵活，更适合内容比较多样的复杂场景设计。

为什么这么说呢？

12列可以2等分、3等分、4等分、6等分、12等分。而24列格栅可以兼容12列的等分方式，还扩充了8等分、24等分，从而产生更多的组合方式。例如3:5、1:4:3、1:5:2、1:6:1、2:3:3、1:1:3:3等。

▲12列栅格比例划分（部分）

▲24列栅格独有的比例划分（部分）

12列栅格适用于业务信息分组较少（因为产生的元素比例组合相对较少），单个盒子内信息体积较大的中后台页面设计（内容不需要划分很碎，例如数据概览卡片页面）。

24列栅格适用于业务信息量较大，信息分组较多（需要更多的比例组合）、单个盒子内信息体积较小的中后台页面设计（组合比例多了，内容必然会比较碎。例如搜索条件、按钮等）；

在大厂规范中，Ant Deisgn采用 24 栅格，TDesign 采用12栅格。确定了栅格列的数量n后，水槽的数值（n-1）也就确定了。

所以栅格系统的总宽度：

W=2*边距宽+n*列宽+（n-1）*水槽宽。

延伸：关于信息盒子

上面提到的“盒子”指的是容纳页面元素的容器。由3部分构成构成，分别是Content（内容）、Padding（内边距）和Margin（外边距）。

▲盒子空间

Content可以是一个按钮、一段文本、一张图片或者一个表格等等。

Padding是主体内容距离盒子外侧的距离。

Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小。

可以看出来，栅格系统中“盒子”的概念与前端开发是保持一致的。

#03 栅格系统的应用

栅格系统不是独立存在的，而是与系统的布局息息相关。由于屏幕在纵向上可以无限延伸，因此栅格系统主要考虑横向空间的适配。

笼统地讲，后台管理系统可以分为上下布局和左右布局2种形式。

1、上下布局

这种布局包含顶部区域和内容区域，横向空间的展示效率很高，但损失了左侧导航空间，顶部导航默认只能展示一级菜单，从而降低了导航的操作效率。适用于页面主要操作在内容区域内，对页面导航效率要求不高的页面。

【适配方式】
这类页面有2种适配方式。

定宽静态页面

这种形式主要用于信息简单的表单页面，例如电商平台Web端、各个资讯门户网站等，可以更好地保证页面信息的稳定性。当浏览器宽度大于内容区时，两侧采用留白的方式处理。当浏览器宽度小于内容区时，页面内容会被遮蔽，出现横向滚动条。

这类页面基本上采用的是960栅格。页面宽度为960px，12列，每列60px，水槽20px。

动态适配页面

后台管理系统需要更高的显示效率，留白太大，明显会浪费屏幕空间。因此内容区是随着屏幕分辨率动态变化，例如系统工作台或者首页等。

2、左右布局

左右布局将页面划分为了左侧导航和内容区。该布局下，页面间切换的操作效率较高，但压缩了内容区域的横向空间。适用于导航层级较深（具有很好的扩展性，可以容纳多级导航菜单），导航效率要求较高（可以默认平铺展开）的页面。

【适配方式】

一般情况下，左侧导航尺寸是固定的，不会随着屏幕尺寸而变化。

但是随着界面设计的精细化，左侧导航会根据不同的屏幕分辨率范围设定几种模式，兼顾展示效率和页面视觉平衡。

内容区布局会根据屏幕分辨率，按照栅格系统的规则发生变化。其中栅格系统包括固定栅格和流式栅格。

3、栅格行为

1）固定栅格

固定栅格具有固定列宽、固定槽宽和固定边距。在特定的断点范围内，内容宽度保持固定，不发生变化（见下图）。

2）流式栅格

流式栅格具有流式列宽、固定槽宽和固定边距。流式栅格具有弹性的内容宽度，其宽度将随着浏览器宽度的变化相应地增大或缩小。

4、栅格应用的注意事项

1）内容元素要从 column 开始到 column 结束

内容元素应对齐栅格而非水槽，但是盒子内部的元素可以不与栅格对齐，内部元素也可以有自己的栅格系统。

▲盒子空间

2）根据实际场景选择性使用栅格系统

一个产品并不是所有的页面都必须应用栅格系统。对于非常规设计，可以根据实际业务场景自行修订。

总结

各个大厂的设计体系中都提出了自己的栅格方法，大家可以参考学习。在实际的项目中灵活运用就可以了。另外栅格系统既要从设计侧进行细节思考，也要与前端开发紧密配合，才能更好地保证设计落地。

参考文献：

《Ant Design设计规范》

《TDesign 设计规范》

《ArcoDesign 设计规范》

— END —

— THE END —

🌈🌈🌈 粉丝福利：

福利1

关注【子牧UXD】公众号，点个“在看”，可获得”读者大礼包“

回复数字【01】，获取100+“行业报告”

回复数字【02】，获取“大厂设计规范”

回复数字【04】，获取“作品集包装攻略”

回复数字【06】，获取“笔试面试技巧”

回复数字【07】，获取“设计知识分享”

回复数字【08】，获取“精选样机合集”

此外还可领取“大厂原型文件”、“设计师简历样本”、“App设计参考作品”等高价值资料

福利2

我们组织了专业的产品/交互/UI设计交流群，群内有来自多位华为、阿里、百度、拼多多、腾讯、快手、美团等一线大厂的设计专家，欢迎入群一起交流成长。

扫描下方二维码添加小编微信，即可拉你进群。

与「10000+」读者共同成长

阅读推荐》》

6个降低B端产品的「认知负荷」的方法

想要做好「竞品分析」，可能没你想象的那么简单

设计基础（2）：换个角度看尼尔森10大设计原则

结合案例，谈谈我对B端产品C端化的理解