如何构建一套 B 端栅格体系？我总结了五个方面！

前言

随着硬件技术和互联网的不断发展，市面上出现了更多的设备尺寸，这就要求我们设计的产品要适配到更多尺寸，而通过栅格系统可以跨屏幕的适配到不同的设备，极大提升设计效率。

主流的企业级系统中都应用了栅格系统，但只重应用轻解释，很多时候在直接面对结论和各家不同的名词时，一时不知道如何下手。

本文旨在通过查漏补缺的形式讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。

什么是栅格系统

1. 栅格系统的由来

栅格系统 “grid systems” 也称之为网格系统，是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。

2. 栅格系统的定义

网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。

栅格系统的好处

1. 加强设计一致

从页面美观的角度，栅格可以有效地保证设计的一致性、让页面富有节奏和韵律。

2. 增加决策效率

对于较大的团队，在日常工作中常常需要多个设计师协作完成，这时候就需要一套统一的标准来对设计师进行约束和高效协同，通过栅格系统不仅可以提高设计师的决策效率，亦可以规范设计质量。

3. 降低解释成本

和前端伙伴进行协作的过程中，我们发现通过一致的有迹可循的设计规律，比如有规律的间距和布局可以极大的提高前端伙伴的开发效率。通过栅格系统可以加强协作效率，降低解释成本。

如何在 B 端产品中创建栅格

1. 选择画布尺寸

目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的设备尺寸为 1920X1080，但并不意味着我们要以此为设计尺寸。

我们认为，如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。

作为 B 端设计师，我们的受众相对比较固定，比如企业内部员工会统一派发笔记本；学校等事业单位也会统一采买设备。通常我们可以对内部设备进行调研，选择现有用户使用较多的设备进行设计。这样可以更加接近用户真实的使用场景。对于 SaaS 类产品而言，其用户设备比较广泛，我们也可以选择 Ant Design 推荐的设计尺寸 1440X900（近些年来随着屏幕尺寸的增加，Ant Design 也将设计尺寸改为 1440X900，同时主字号调整为 14PX ）。

我们根据公司内部的调研选择了 1280X720 为基础设计尺寸，同时选择 12PX 的字体 ，最接近用户的真实使用场景。

2. 确定栅格区域

我们将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。

3. 网格设置

我们发现现在主流的网格单元的尺寸为 8 PX， 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。

但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4PX 作为最小的网格单位。

4. 栅格计算

PC 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。

• 12 栅格

将页面分为 12 份，在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。

• 24 栅格

将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。

通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。

• column

column（小列）以 24 栅格为例就有 24 个 column，它可以随着屏幕尺寸的不同，在一定的范围内进行动态变化。

• gutter

gutter（水渠）以 24 栅格为例就有 23 个 gutter，水渠的大小我们设置为固定数值 16PX，这里需要注意 gutter 值可以根据项目需要的视觉节奏而定。

栅格大小

栅格大小为 24 个 column + 23 个 gutter，以 1280X720 PX 的设计尺寸为例，左侧的导航固定尺寸为 208PX，我们减去 2 个页边距 2 X( 16X2 ）PX，减去 23 个 gutter （23X16) PX，再除以 24，最后我们得到了一个 column 的宽度为 26PX。

小困惑：这个时候你可能会发现这个数字除不尽，个人建议这块有两个解决方案，1. 建议这边用刚才算出来的数字取一个整数去倒推我们的唯一变量左边导航的大小。2. 栅格的目的是为了让我们的设计更加合理便于和前端合作，直接取整数个人来说是可以接受的。

注意事项

1. 尽量保证偶数思维

尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。

2. 字段元素的起始点必须落在 column 上

字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。

3. 可以让父级容器对齐栅格，子元素可以不落在栅格上

很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。

栅格的应用

关于栅格的适配和应用是通过对栅格制定不同的响应策略，来更好的支持和适配业务场景。通常有三种适配策略：固定栅格、动态栅格和混合栅格。

1. 固定栅格

固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。以内容区域展示卡片为例，首先我们会根据主流屏幕尺寸和业务呈现需求，确定设置几个断点值，随着设备尺寸的变化，展示卡片数量也随之变化，但卡片的尺寸是固定不变的。

固定栅格很明确的缺点是它在未到达断点的临界值时，页面会出现空白，视觉呈现上，可能会显得不协调。

比较常见的应用是对于筛选模块的响应，以拼多多商户后台为例，将输入框设定为固定大小，然后设置 1612px 为断点值，当小于设备屏幕宽度小于 1612px 时则显示 3 列输入框，当屏幕宽度大于 1612px 时则显示 4 列输入框。（因为业务需求拼多多屏幕设置最小值，即小于固定尺寸出现横线滚动条，所以我们能看到拼多多的筛选模块有 3 - 4 列输入框）。

拼多多固定栅格的适配展示

2. 流动栅格

流动栅格和固定栅格的区别是它的元素大小会发生变化。以内容区域展示卡片为例，随着设备屏幕的大小变化，展示卡片数量也随之变化，但在未到达下一个断点之前，卡片会通过百分比缩放填充屏幕。

流动栅格的优势在于它可以在屏幕上填充屏幕，拥有较好的显示效果，适用于仪表盘、视频列表和以卡片形式展示的图片、文字等。

以 YouTube 的展示为例，视频列数会随着屏幕尺寸的变化而变化，当未到达断点值时，视频卡片的大小会发生变化并始终填充满屏幕。

YouTube 流动栅格的适配展示

3. 混合栅格

混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。

总结

1. 有理可依

了解基础的栅格知识可以帮助我们更加规范的展开设计工作，让设计更加有理有据。

2. 充分沟通

栅格系统需要和前端伙伴协作，在开展新的设计工作时可以和前端伙伴进行沟通，如果是一个已有的系统，可能已经有比较成熟的栅格解决方案，就不必耗费资源去重新设置。如果是一个全新的系统，可以根据业务场景制定栅格规则，通过和前端沟通可以了解当前的技术资源情况，选择合适的解决方案。

对于商业设计而言，不应该一味的追求美，也不应该一味的追求商业，应该懂得平衡两者之间的关系。在做设计执行的时候，需要思考企业利益和设计体验的关系。注意活学活用最重要的是解决实际问题，同时也要把实现成本、技术资源等考虑进去。

感谢你的阅读。

参考：

• https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01
• https://arco.design/docs/spec/grid

欢迎关注作者微信公众号：「求职帮er」