设计稿栅格系统怎么建立

本文目录导读：

1. 第一步：确定基础参数
2. 第二步：在Figma/Sketch/Adobe XD中绘制（实操）
3. 第三步：定义组件尺寸规则
4. 第四步：自适应与断点（Responsive Breakpoints）
5. 总结：给设计师的“三句黄金口诀”
6. 快速工具推荐：

建立一套科学、可复用的栅格系统是前端和UI设计师高效协作的基础，它能让页面布局变得规范、整齐且富有节奏感。

以下是建立设计稿栅格系统的标准流程和关键参数，主要分为分析、定参、绘制、命名四个步骤。

第一步：确定基础参数

在动手画框框之前，需要先确定几个核心数字，栅格系统本质上是对“宽度、列数、间距”的数学组合。

画布宽度

• Web端（最常见）： 1440px（Mac大屏） 或 1920px（高清屏）。
• 移动端： 375px（iOS标准，对应iPhone 6/7/8/SE） 或 360px（Android标准）。
• 内容安全区： 不是所有宽度都放内容，例如画布1440px，内容区域通常设为 1200px 或 1140px,两边留白。

列数

• 12列（最通用，推荐）： 因为12能被2、3、4、6整除，灵活性最高，几乎能拼出任何常见布局（如1/2、1/3、1/4、1/6）。
• 24列： 对精细度要求更高,适合复杂的数据仪表盘或电商大促页面。
• 8列或6列： 常用于移动端或结构较简单的页面。

槽宽

• 指列与列之间的间隔。
• Web端： 常见 24px 或 32px（Figma、Ant Design、Element UI 默认推荐24px）。
• 移动端： 常用 16px 或 12px。
• 建议： 固定在一个值，24px，槽宽不单独存在,它是水平间距的标准。

页边距区到画布边缘的距离。

• Web端： 跟随布局自动响应，或者固定为 大屏（比如每边200px）、中屏（16px）。
• 移动端： 通常是 16px（两边共32px留给安全区域）。
• 简单公式（12列为例）：

  内容区宽度 = （列宽 × 12） + （槽宽 × 11）

---

第二步：在Figma/Sketch/Adobe XD中绘制（实操）

以 Figma 为例（Sketch/Xd类似）：

1. 创建Frame： 1440 x 800（或更高）。

2. 添加布局网格：

   • 点击右侧面板的 号，在 Layout Grid 下选择 Grid。
   • Count： 12
   • Type： Stretch（拉伸，列宽自适应）—— 这是目前最主流、最省事的方式。
   • Gutter： 24px
   • Margin： 这个通常不用Grid控制，而是用Frame的Padding（内边距）控制，把Frame的左右Padding设为 auto 或具体数值（如160px）。
   • 效果： 此时你会看到12个等宽的列，中间有24px的间隙,左右距离边缘有160px。

3. 可选：添加控制行高（垂直节奏）

   • 新建另一组 Layout Grid，Type选 Rows。
   • Count： 8
   • Height： 8px（奇偶组合，8px作为基础单元）。
   • Gutter： 8px
   • 这个可以帮助你对齐文字和按钮的高度，让页面不“飘”。

---

第三步：定义组件尺寸规则

栅格不是限制，而是帮你快速决策，建立一套基于栅格的布局命名规则，

• 1/2布局（两栏）：左右各占6列（6 + gutter + 6）。
• 1/3布局（三栏）：各占4列（4 + gutter + 4 + gutter + 4）。
• “黄金”双栏（侧边栏+主内容）：左占2列（或3列），右占10列（或9列）。
• 卡片列表： 想要一行4个卡片？
  • 每个卡片占3列宽（12 / 4 = 3）。
  • 卡片内部的左右边距可以自定义，但卡片间的间距由gutter（24px）决定。

让设计师形成肌肉记忆： 当你摆放一个按钮或卡片时，它的左右边界必须吸附到列线上，上下边界跟从行高（8px倍数）,这就是栅格系统的意义。

---

第四步：自适应与断点（Responsive Breakpoints）

一套优秀的栅格系统必须考虑不同分辨率，结合Bootstrap等成熟方案,建议如下断点：

屏幕尺寸	断点名称	建议列数	内容区宽度	页边距
≥ 1200px	XL (大屏)	12	1140px	自动居中
992px - 1199px	L (中屏)	12	960px	自动居中
768px - 991px	M (平板)	8	720px	24px
576px - 767px	S (大手机/小平板)	4 或 6	100% - 32px	16px
< 576px	XS (小手机)	4	100% - 32px	16px

设计时：你的1440px设计稿就是XL断点，M断点可能需要另起一页或使用Auto Layout的约束来修改列数。

---

给设计师的“三句黄金口诀”

1. 首尾一致： 所有内容（文字、图片、按钮）的左边框必须对齐列线，不要“悬空”在槽里。
2. 保持倍数关系： 上下间距（Margin/Padding）和高度通常用 8px 或 4px 的倍数（8, 16, 24, 32, 40, 48...）。
3. 遵守但不被束缚： 栅格是“辅具”不是“刑具”，视觉上需要打破栅格（如全屏Banner、弹出层）时，大胆做，但要让这种打破成为有意识的、少数的设计决策。

快速工具推荐：

如果你用的是 Figma,可以直接搜索安装插件：

• Auto Layout（自动布局）
• Grid Styles（网格样式，把上面的12列存为一个样式,一键复用）
• To Desktop（一键生成各断点视图）

标签： 栅格系统 设计规范