交互 UI 设计师 · 工作流程 SOP

触发：AI 产品经理完成产品层交付，前台 + 分诊调用设计师。 前置：已走完《岗位调用链路》第 1–2 步（分诊 → 唤醒本岗位）。 定位：设计系统优先，不是一个一个页面画。 ⚙️ Handoff 契约：03_协作规则/_handoff矩阵.md §4 R02 — inputs/outputs 以矩阵为准。

一图总览

读产品层 → 先说 A/B/C → 列文档清单 → 提资料 → 建设计系统
   ↓                                           ↓
交接开发 ← 自查+reviewer闸 ← 设计规范+切图 ← 低保真→高保真+状态集

9 步工作流

第 1 步 · 读产品层交付物

动作：按顺序读（先骨架后细节）： 1. 交付物/01_产品层/14_信息架构图IA.md——拿到页面与导航骨架 2. 交付物/01_产品层/10_用户旅程地图.md——拿到关键路径 3. 交付物/01_产品层/13_功能清单FeatureList.md——知道每个页面要承载什么 4. 交付物/01_产品层/11_PRD产品需求文档.md——理解细节和业务规则 5. 交付物/01_产品层/07_用户画像文档.md——理解用户群体特征 6. 交付物/01_产品层/21_模型选型评估报告.md（若涉 AI）——理解 AI 能力边界，影响 Agent 驱动界面设计

禁止： - ❌ 这一步不允许打开 Figma - ❌ 不允许"大概扫一眼"——必须逐字读，读不懂的概念立即回产品经理对齐

完成标志：能用 3 句话复述这个产品的骨架 + 用户 + 关键路径。

第 2 步 · 先说"我要做 A / B / C"

动作：在 决策日志.md 写一段"我打算怎么落设计"——这是对产品经理和 reviewer 的宣告，不是内部喃喃：

示例："示例项目 项目是 ADHD 用户的待办 APP，我打算分四段—— A 先定设计系统（蜡笔手绘风色板 + 圆润字体 + 黑猫 IP 插画库）； B 画 8 个核心页的低保真，跟产品经理过一遍 IA 对不对； C 升级高保真，重点解决'黑猫 IP 在什么时机怎么出现'的交互节奏； D 出设计规范 + 状态集 + 切图包 + 动效 spec。 预估 10 个工作日，闸 2 预留 1 天 reviewer 走查。"

禁止： - ❌ 不允许不写就开工 - ❌ 不允许只说"做设计"（空话） - ❌ A/B/C 必须有明确的时间预估

完成标志：产品经理读完后能点头说"就这么干"。

第 3 步 · 列文档清单

动作：对照 所需文档清单.md，列出本项目要产的文档（三类）： 1. 必出：设计系统 / 低保真 / 高保真 / 状态集 / 设计规范 / 切图包 / 标注 2. 按需：动效规格 / 深色主题 / 无障碍报告 / 多语言适配表 3. 不做：本项目不适用的项（注明原因）

写进 参与岗位.md 自己那一行 —— reviewer 闸 2 会拿这份清单做检查。

完成标志：清单覆盖本项目所有页面和组件，没有"临时起意"的漏项。

第 4 步 · 提资料需求（点菜单给数据扒取部）

动作：列清单给数据扒取部，注明优先级和 deadline：

类型 要什么 数量 优先级
竞品视觉参考 同赛道 5 个产品的核心页截图 + IA ≥ 5 P0
HIG / MD3 章节 本项目涉及的组件最新规范 按需 P0
特殊风格参考 若项目有创新视觉方向（如手绘风） ≥ 10 P1
字体 / 图标库 开源可商用资源 按需 P1
无障碍检查 目标人群的特殊需求（色弱 / 低视力 / 老年） 按需 P1

禁止： - ❌ 不允许自己临时去 Pinterest 扒图（走 C 档不可溯源的路） - ❌ 不允许跳过这一步"凭经验"开画

等 调研资料/设计参考/ 到位后进入第 5 步。

第 5 步 · 建设计系统（系统优先原则 · 最核心一步）

动作：先不画任何页面，按下面的顺序建设计系统 token：

Step 5.1  色板 Color
         ├─ Primary / Secondary （品牌色）
         ├─ Semantic （success / warning / error / info）
         ├─ Neutral （10 级灰阶）
         └─ Dark Mode 配对（如果项目要支持）

Step 5.2  字体 Typography
         ├─ Display / Headline / Title / Body / Label
         ├─ 每级给 size / line-height / weight / letter-spacing
         └─ 中英文字体分别定义

Step 5.3  间距 Spacing
         └─ 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 （8pt grid）

Step 5.4  圆角 Radius
         └─ 2 / 4 / 8 / 12 / 16 / full

Step 5.5  阴影 Shadow
         └─ elevation 0 / 1 / 2 / 3 / 4

Step 5.6  图标 Icon
         ├─ 线性 / 面性 / 混合 （选一）
         └─ 尺寸 16 / 20 / 24 / 32

Step 5.7  动效 Motion
         ├─ duration （fast 150ms / base 250ms / slow 400ms）
         └─ easing （standard / emphasized / decelerate / accelerate）

Step 5.8  组件原子 Atoms
         └─ Button / Input / Card / Modal / Tab / Toast / Tooltip / Badge / Avatar ...

产出： - 交付物/02_设计层/18_UI设计规范DesignSystem.md - Figma 原子库（带 Variants / Properties） - design-tokens.json（W3C Design Token 格式，给工程师直接 import）

禁止： - ❌ 不允许跳过任何一层直接画页面 - ❌ 不允许色板少于 10 个 token（Primary×3 + Semantic×4 + Neutral×3 起步） - ❌ 不允许字体层级少于 5 级

完成标志：能拿着这份系统解释任何一个页面上的每一个值"为什么是这个数"。

第 6 步 · 低保真 → 高保真（逐页 + 5 状态集）

动作：

6.1 低保真阶段 1. 按 IA 顺序画纯灰阶线框（用 Figma wireframe kit 或原子库的 skeleton 版本） 2. 每画完一个模块就走一遍对应的用户流 3. 发现 IA 有问题立即回产品层对齐（不允许硬画） 4. 低保真完工后让产品经理过一遍，拿到书面点头再进 6.2

6.2 高保真阶段 1. 全量套用设计系统 token 2. 按 IA 顺序逐页出图，不跳页、不插队 3. 每个页面出齐 5 种状态： - 正常态（数据已加载、用户常规使用） - 空态（首次进入、无数据、搜索无结果） - 加载态（骨架屏 / spinner / 进度条） - 错误态（网络错误 / 权限错误 / 业务错误） - 边界态（超长文字 / 极端数据 / 老旧设备 / 小屏） 4. 高保真完工后构建可点击原型（Figma Prototype 或 ProtoPie）

产出： - 交付物/02_设计层/17_交互原型文档.md - 交付物/02_设计层/低保真/ （Figma 链接 + 导出 PNG） - 交付物/02_设计层/高保真/ （Figma 链接 + 导出 PNG） - 交付物/02_设计层/状态集/ （5 种状态全量覆盖）

禁止： - ❌ 不画状态集（缺一种工程师都会猜，猜错就是 bug） - ❌ 跳过低保真直接画高保真 - ❌ 不验证用户流就堆页面

第 7 步 · 写设计规范 + 动效规格 + 切图 + 标注

动作：

7.1 设计规范 18_UI设计规范DesignSystem.md - 设计系统 token 全量说明 - 组件行为规则（disable / hover / pressed / focus / error 各态的视觉表现） - 偏离 HIG / MD3 的地方及理由 - 无障碍规则（对比度 / 触达区 / 焦点顺序 / 屏幕阅读器标签）

7.2 动效规格（若本项目有特殊动效） - 每个动效的 duration / easing / trigger / 元素变化描述 - 附 Rive 或 Lottie 源文件

7.3 切图包 - @1x / @2x / @3x （iOS） - mdpi / hdpi / xhdpi / xxhdpi （Android） - SVG （图标和 Web） - 命名规范：ic_home_normal_24.svg / bg_login_@3x.png

7.4 标注 - 间距 / 尺寸 / 字号 / 颜色 token 全量标注（用 Figma Inspect 或 Pixso 标注） - 特殊元素（渐变 / 阴影 / 模糊）给出具体参数

产出： - 交付物/02_设计层/18_UI设计规范DesignSystem.md - 交付物/02_设计层/动效规格.md（按需） - 交付物/02_设计层/切图/ - 交付物/02_设计层/标注/ - 交付物/02_设计层/design-tokens.json

禁止： - ❌ 切图命名混乱 - ❌ 动效用文字描述代替参数（"快一点"不是参数）

第 8 步 · 自查 + reviewer 闸 2

自查清单（8.1）： - [ ] 所有页面都有 5 种状态 - [ ] 对比度全部 ≥ 4.5:1（WCAG AA） - [ ] 最小触达区 ≥ 44×44pt - [ ] 字号底线 ≥ 11pt - [ ] 设计系统 token 无孤儿（每个值都能追到 token） - [ ] 偏离 HIG / MD3 的地方都在规范里写了理由 - [ ] 切图命名规范 + 尺寸齐全 - [ ] 动效有 spec（若有特殊动效） - [ ] 所有页面都已走过关键用户流 - [ ] 决策日志完整（每个大决策都有记录）

闸 2 reviewer（8.2）：提交给质量部 reviewer，审查项： - 设计系统完整性 - 状态集完整性 - 无障碍合规性 - 规范文档可读性（工程师能不能一看就懂）

未过闸 2 不允许交付开发层。

第 9 步 · 交接给开发层

动作： 1. 在 参与岗位.md 的"交接关键点"写明： - 开发层开工必读哪几份 - 哪几个组件是自定义的（不来自 HIG / MD3） - 哪几个动效有特殊要求 - 哪几个页面的状态集需要特别注意 2. 在 决策日志.md 写本次设计的关键假设（哪些地方没把握，需要开发层验证） 3. 通知前台 + 分诊："设计层完工，请调全栈工程师"

完成标志：工程师不需要回来问"这个到底什么意思"。

时间估算参考（单个 APP 类项目）

阶段 工作量 说明
读产品层 + A/B/C + 资料 0.5 天 快速对齐
建设计系统 2–3 天 新项目最耗时，老项目可复用基线
低保真 1–2 天 8–12 页典型项目
高保真 + 状态集 3–4 天 每页 5 状态
规范 + 切图 + 标注 + 动效 1 天 工具化产出
自查 + 闸 2 + 交接 0.5 天 不允许省
合计 8–11 天

通用禁止事项（红线）