第3章 画板与基础形状工具：设备适配、画板尺寸、基本图形绘制

3.1 用户场景：从设备碎片化到画板决策

产品设计团队在日常工作中频繁遇到以下场景：

• 场景A：移动端优先 — 产品经理要求先出 iPhone 15 Pro Max 原型，再适配 Android 端和折叠屏；设计师需要在同一文件内管理三种画板。
• 场景B：响应式 Web 设计 — 运营后台需要同时输出 1440px 桌面端、768px 平板端和 375px 手机端三套视图，且要保持组件一致性。
• 场景C：图标与插画绘制 — 新人设计师使用基础形状拼凑复杂图标时，经常因画板原点偏移、形状未闭合导致开发测量不准。
• 场景D：交接规范缺失 — 开发人员拿到原型后，发现画板尺寸不标准、形状图层未命名，需要反复沟通确认设计意图。

3.2 业务问题：三个层面的适配断裂

通过整理上述场景，我们归纳出三类业务问题：

3.3 用户访谈：来自一线设计师的真实反馈

我们访谈了 8 位分别来自移动端、Web 端和设计系统团队的设计师，以下为关键记录：

• 陈工（移动端，3 年经验）：“我最怕拿到别人的文件，画板尺寸五花八门，有的用 iPhone 12，有的用 iPhone 14 Pro Max，我每次都要重新建画板再复制粘贴。”
• 李工（设计系统，5 年经验）：“基础形状本身没问题，但很多人不知道用‘布尔运算’合并路径，直接堆叠形状就标注重叠区域，开发根本没法算间距。”
• 王工（Web 端，2 年经验）：“Figma 的‘设备帧’预设确实方便，但我们后台产品需要非标准尺寸（如 1280×800），新手不会自定义，经常用错。”
• 赵工（全栈设计师，4 年经验）：“如果画板原点不统一（有人用绝对原点，有人用相对原点），导出切图时坐标全部偏移，前端要手动修正。”

3.4 需求拆解：从访谈中提取四项核心需求

将访谈内容转化为可执行的需求项：

1. 需求 R1（设备预设标准化） — 提供覆盖 iOS、Android、Web 主流设备的画板尺寸清单，支持一键创建，并允许团队自定义预设。
2. 需求 R2（画板原点与栅格对齐） — 强制画板原点对齐到 8px 网格，避免坐标偏移；导出时支持原点归零。
3. 需求 R3（基础形状绘制规范） — 规定形状必须闭合、布尔运算必须合并、图层必须命名；提供“形状健康度”自动检查插件。
4. 需求 R4（设备适配模板包） — 生成包含“手机 / 平板 / 桌面”三件套的模板文件，内置栅格、安全区域和状态栏高度。

3.5 方案表达：Figma 画板与形状工具的最佳实践

针对上述需求，我们设计了以下四步操作方案，配合 Figma 原生功能实现。

3.5.1 标准化画板创建流程

使用 Figma 的“Frame”工具（快捷键 F），并在右侧属性面板选择设备预设：

操作步骤：
1. 选中 Frame 工具，或按 F 键
2. 在右侧 Design 面板点击 "Device" 下拉菜单
3. 选择预设：iPhone 15 Pro Max (430×932) / iPad Pro 12.9 (1024×1366) / Web 1440 (1440×900)
4. 勾选 "Clip content" 防止内容溢出
5. 开启 "Layout grid" — 选择 8px 网格 + 12列栅格

3.5.2 基础形状绘制与布尔运算规范

形状工具（Rectangle / Ellipse / Line / Arrow / Star）必须遵循以下规则：

3.5.3 设备适配三件套模板

创建一个包含三个画板的 .fig 模板文件：

模板结构：
📁 项目名称.fig
 ┣ 📄 画板 1：移动端 — 390×844 (iPhone 15)
 ┃  ┣ 安全区域：status bar 54px + bottom 34px
 ┃  ┗ 栅格：8px 网格, 4列栅格, 间距 16px
 ┣ 📄 画板 2：平板端 — 1024×1366 (iPad Pro)
 ┃  ┣ 安全区域：status bar 24px + bottom 20px
 ┃  ┗ 栅格：8px 网格, 12列栅格, 间距 24px
 ┗ 📄 画板 3：桌面端 — 1440×900 (Web)
    ┣ 安全区域：无(status bar 隐藏)
    ┗ 栅格：8px 网格, 12列栅格, 间距 32px

3.5.4 形状健康度自动检查清单

团队在交付前须逐项确认：

1. 所有画板原点 X=0, Y=0（相对坐标）
2. 形状图层已命名，非 "Rectangle 1" / "Ellipse 2"
3. 布尔运算已扁平化（Flatten）
4. 路径已闭合（钢笔工具绘制的图形）
5. 画板安全区域与内容区域无重叠

3.6 指标验证：如何衡量方案有效

在团队内推行上述规范后，通过以下指标验证效果：

3.7 验收标准：交付物必须满足的硬性条件

每个交付的原型文件必须通过以下检查项：

• AC1：画板尺寸与项目立项时确定的设备清单完全一致，不得出现未定义的尺寸。
• AC2：所有形状图层（矩形、椭圆、路径、布尔组合）均已命名为有业务含义的名称，如 "btn_primary_bg"、"icon_arrow_right"。
• AC3：布尔运算组件必须执行 "Flatten" 操作，不可保留多层嵌套的布尔组。
• AC4：画板原点坐标强制归零（X=0, Y=0），不得存在负坐标或偏移。
• AC5：模板文件必须包含“移动端 / 平板端 / 桌面端”三套画板，且每套画板均已配置安全区域和栅格系统。

3.8 交付物模板：标准画板与形状包

本章交付物为以下三项：

以下为设备画板预设清单的示例数据（CSV 格式）：

设备类别,设备名称,画板宽(px),画板高(px),状态栏高(px),底部安全区域(px),栅格列数,栅格间距(px)
移动端,iPhone 15 Pro Max,430,932,54,34,4,16
移动端,iPhone 15,390,844,54,34,4,16
移动端,Samsung Galaxy S24,412,915,48,32,4,16
平板端,iPad Pro 12.9,1024,1366,24,20,12,24
桌面端,Web 标准,1440,900,0,0,12,32