B端基础 | 栅格设计系统的由来和应用意义

缅怀、不管你们将来从事什么职业、有什么样的志向，一定要注意加强基础知识学习，打牢基本功和培育创新能力是并行不悖的，树高千尺，营养还在根部。

前面的话

雷军、干了三十多年，回头一望，全是漫长的挫折和煎熬，和大家一样，我也迷茫，我也曾经动摇甚至放弃过，我想跟大家说你们不要逃避，你经历的所有的挫折和失败，甚至那些看似毫无意义、消磨时间的事情都将成为你最重要的、最宝贵的财富。人生很长，永远相信美好的事情即将发生！

在过去工作的几个年头里，回头望。我也是一个碌碌无为的普通B端设计师。写这个系列的文章也是对我来说也是一个学习巩固总结沉淀的机会。希望能为你在前行的黑夜里点一盏灯。

栅格设计系统在我如何之前就接触过但是一直没有彻底的把他搞清楚。只是在现在的B端设计系统里开始使用所以这篇文章也是我自己学习的一个过程。旨在我自己学会而且让你们看懂。希望在你们之后的项目里可以用上来让自己的设计更加优秀和专业。

什么是栅格

界面栅格系统是从平面网格系统中发展而来，以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素，保证页面的每个区域能够稳健地排布起来。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。

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

20 世纪，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。

栅格的意义

栅格设计的意义是在多个方面的。用结构化、系统化的栅格手段进行设计，对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。下面我们从多个角度去说一下。栅格设计对于我们在设计和项目里所带来的价值。

总的来说，栅格对于UI设计具有重要的应用价值，它可以帮助设计师在保证设计美观的同时，提高设计的效率和逻辑性，增强用户体验和团队协作。

提供可靠的布局参考

栅格系统将页面水平和垂直方向划分为等宽的行和列，使得设计元素能够按照统一的尺寸和间距进行放置。这为UI设计者提供了一个可靠的参考框架，帮助他们快速调整页面布局，确保设计的整体均衡和一致性。

简化决策过程

在UI设计中，栅格系统可以减少决策时间，让设计师在细节处理上更高效、明确，有规范，减少不必要的时间成本。例如，避免设计师在间距应该是6像素还是8像素，按钮高度应该是32像素还是36像素等问题上产生纠结。

提升用户体验

运用栅格系统可以使UI设计更具有秩序和节奏感，这有助于提升用户体验。同时，一致性的设计也能使用户在与页面进行交互时感到更加流畅和舒适。

促进团队协作

栅格系统可以建立团队之间的默契。好的栅格系统不仅可以让设计师之间有统一的尺寸规范来约束，而且对于前端开发来说，也将更加的灵活与规范。这有助于提高团队协作的效率和质量。

增强设计的逻辑性

栅格系统使UI设计的过程更加清晰化和客观化，设计师可以以一种预见性的方式进行设计，这有助于增强设计的逻辑性。

适配高效

实现了前端适配方式基本就两种。自适应布局和响应式布局。这两个布局其实并不难理解。他们的区别就是在不同设备尺寸之间页面内容流传时比如。手机、平板、电脑等是设计一套布局、还是设计三套布局。（如果想详细的了解一下，自适应布局和响应式布局去网上搜，讲的挺清楚的。）

-自适应布局

自适应布局是网页内容根据设备的不同而进行适应，来判断当前访问的设备是 PC 端、平板还是手机，为不同终端分别提供独立的前端代码。自适应设计可以更好地适应用户在现场的各种需求，缺点是成本较高。自适应设计更合适，用户体验更好，如功能复杂、用户交互频繁的网站。

-响应式布局

页面功能不多，用户交互少，不需要经常升级，响应式设计从运营的难易和维护的便利性考虑会更好。响应式是通过一套代码，无缝匹配符合电脑、平板、手机效果的前端技术，开发成本更低，高适应性；设计成本更低，一套设计应对多端，最大化提升用户的操作体验；响应式不提供自适应性那么多的控制，多端同步生效，减少运营成本，保障业务效率。

搭建栅格

在我们搭建栅格之前、首先我们要了解一下栅格都包含哪些东西。在Ant Design里采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

网格基数

网格基数是栅格系统中的基本网格单位。栅格化之前先定义网格基数尤其重要，一方面规范设计，指导版式设计与内容布局，辅助规范页面元素对齐和间距设定；另一方面节省设计开发沟通的时间。目前栅格系统中以 8 点为网格基数，粒度大小合适，且能够匹配多数主流屏幕。

确定界面尺寸

为了减少布局设定时的沟通与拆分计算成本，基于主流屏幕尺寸，一般会定一个标准画板宽度定为 1440px 或 1920px。因为我现在的项目是使用的ant design的语言框架。所以在制定栅格时，采用蚂蚁中台设计团队统一的画板尺寸为1440px。

确定栅格区域

首先确定你界面的的布局，一般在B端设计里布局也就那几种。侧边导航布局、顶部导航布局、混合导航布局、

确定栅格内容

栅格常用的有12栅格和24栅格。我们可以根据自己的因为区选定一个栅格列数就可以了。确定列间距与大边距、列间距与大边距选择 8(最小单位)的倍数，网格将更加一致。可以将间距值把常用的数值整理成号码表，间距复用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等...这样一来，保持一致性更加容易，更加合乎逻辑，并且开发人员也会高兴，因为他们可以根据屏幕元素之间的关系安全地假定间距。

不过在栅格里也不是完全需要是8的倍数这样的。也不一定分要是整数。当然要尽量是8的倍数和整数。

设计工具

在基本的助力设计软件里都是可以通过设置自动生成栅格设计系统来辅助你做设计的。这部分内容引用：万字干货！从4个方面完整解析栅格设计；https://www.uisdc.com/grid-design-analysis

sketch

有三种栅格可供选择，栅格系统统一使用和隐藏。Sketch 里自适应功能不能隐藏某对象占位，而 figma 可以，当位置隐藏后，布局就会进行调整。

sketch 使用栅格设计需先设置一个总宽度尺寸，点击左下角默认设置还可以将自定义的栅格系统设置为默认，方便以后重复调用，但 sketch 只能储存一组栅格系统的数值。

figma

figma 有三种不同形式的栅格可供选择：统一网格，列和行。支持单个画板栅格系统的使用和隐藏。

-嵌套栅格

与其他工具不同，figma 不会在内容层只局限一个栅格，可以建立多层栅格嵌套。可以利用这一点，在盒子内部设计时，再用栅格用作视觉辅助，可以通过颜色和不透明度来区分不同栅格。

figma 可以通过相对调整画布大小，同步拉伸栅格系统。

-内容自适应

当我们拖动窗口的宽度，模块会发生自动布局。定义下级元素针对父模块的响应，做到模块变化的同时下级元素的显示也是合理的。比如相对内容左右间距一致、对齐方向一致、尺寸固定等设置。这就是 Sketch/Figma/XD 中的自适应功能。

-共享样式

在创建栅格系统时，可能需要对不同设备尺寸或其他常见用例上的布局进行不同的更改。为了更轻松地将这些栅格应用于框架，文件和项目，可以将其中的几个合并为一个栅格样式(相当于组件)，然后可以从团队库中共享该样式或者自己复用，简单快捷。

最后说几句

现在网上其实有很多写栅格话设计系统的。栅格话设计在我开始做设计的时候我就知道。但是在之前的项目里一直没有使用过。就现在做的B端项目为了解决界面统一的问题。就用上了。那结果就立杆见影的好了起来。

写这一篇文章也是我自己从新学习的一个过程。其中在网上看了很多关于栅格方面的文章和资料。文章中也借鉴了很多其他优秀设计师的设计想法。在这里先给你们磕一个，感谢你们让我理解了栅格系统。

真心希望这骗文章可以帮助你们理解栅格系统。并用起来。我们下篇文章见