做 UI 的时候，你有没有遇到过这种场景：设计师扔来一套图标，开发切图时发现大小不一、对齐飘忽、放大后边缘发虚？或者自己画图标，明明按 24×24 画的，放到按钮里却总感觉‘矮了一截’？问题八成出在——没用对栅格系统。
栅格不是玄学，是图标呼吸的空间
图标不是塞进方框就行的像素块。它需要留白、需要视觉重心、需要在不同尺寸下保持识别度。栅格系统就是给这些‘需要’划出明确边界。常见做法是以 16×16、24×24 或 32×32 为基准画布，再内部划分更细的网格（比如 1px 或 0.5px 步进），约束线条粗细、圆角半径、端点位置。
举个实在例子：一个 24×24 的搜索图标，如果把放大镜圈画在 22×22 范围内，手柄末端刚好落在第 2 行和第 23 行网格线上，整个图标在小尺寸下依然清晰；要是随手一拉，圈撑满画布，缩到 16px 就糊成一团灰点。
主流规范怎么定？别硬套，先看场景
Material Design 推荐 24×24 画布，内部用 1px 网格，关键元素（如线条、间隙）必须落在整数像素上；Apple SF Symbols 强制使用 72×72 画布，但导出时自动适配各尺寸，背后靠的是矢量锚点+语义化命名；国内不少团队直接沿用 Ant Design 的 14×14 / 16×16 / 20×20 三档，每档都预留 2px 内边距（即内容区 12×12 / 14×14 / 18×18）。
别光抄数字——你的图标用在 App 启动页？还是后台表格操作栏？前者可能要兼顾暗色模式下的反白细节，后者更看重多图并排时的视觉节奏。画布大小、线宽、圆角，得跟着实际使用密度调。
动手前，三句口诀记牢
① 画布定死，内容居中：24×24 就是 24×24，别让图标外扩或内缩，所有描边、填充严格框在画布内；
② 线宽守整数，最小不破 1px：1.5px 在 @1x 屏会模糊，优先选 1px / 2px / 3px；
③ 关键点踩网格，别凭眼估：打开设计工具的像素网格（Figma 开启 Pixel Grid，Sketch 打开 Snap to Pixels），让锚点、端点、交点都落在格子交点上。
附：Figma 中快速启用图标栅格的设置
1. 画布设为 24×24 px
2. View → Canvas → Show Pixel Grid ✔️
3. View → Canvas → Snap to Pixel Grid ✔️
4. Layout Grid → Add → Type: Vertical/Horizontal, Count: 24, Gutter: 0做完图标导出前，放大到 400% 看一眼：边缘是否锐利？转角有没有多出半像素？两个同级图标并排放，底部基线是不是齐平？这些细节，才是栅格系统真正起作用的地方。