线框图到高保真工作流
渐进保真阶段、验证门与设计探索工具链。
设计系统入门
为什么
直接跳到高保真会在验证流程和信息架构前锁定布局决策。渐进保真 — 草图 → 线框 → 模拟图 → 原型 — 让你在纸上便宜失败，在像素打磨前用用户验证。
根据 2024 Spark 设计系统调查，78% 拥有设计系统的组织报告产品交付更快。JavaScript is used by 62% of developers per the Stack Overflow 2024 survey，与设计令牌对齐的组件库将交接时间缩短 60%。
何时使用
用于新功能、重大重设计或不熟悉领域。设计已验证的琐碎变更（按钮文案、颜色微调）跳过。
如何做
1. 草图（纸/数字）— 30 分钟内 5-8 变体，无颜色，广泛探索布局
2. 线框（低保真）— 选 1-2 方向，Figma 中用灰块排布内容
3. 验证流程 — 可点击线框原型，3-5 用户测试，记录卡壳处
4. 模拟图（高保真）— 对验证线框应用设计系统令牌、真实文案、真实图像
5. 原型交互 — Figma Smart Animate 或 ProtoPie 做动效，5 用户测试
6. 开发交付 — 规格文档 + Figma Dev Mode，从 Linear/Jira 工单链接
7. 构建 + 评审 — 实现，设计评审 staging，迭代差异
示例
# 工作流门 — 每阶段完成定义
## 阶段 1：草图（限时 30 分钟）
- 目标：5+ 不同布局方向
- 工具：纸、Excalidraw、tldraw
- 门：团队选前 2 推进
## 阶段 2：线框（限时 2h）
- 目标：2 方向的可点击低保真原型
- 工具：Figma，无颜色/图像，灰块 + 真实文本
- 门：3 用户测试，流程完成率 > 80%
## 阶段 3：模拟图（限时 4h）
- 目标：1 套高保真屏，用设计系统
- 工具：Figma，应用令牌，内容团队真实文案
- 门：设计评审通过，a11y 检查（对比、焦点）
## 阶段 4：原型（限时 2h）
- 目标：含动效的交互原型
- 工具：Figma Smart Animate / ProtoPie
- 门：5 用户测试，SUS 分 > 75
## 阶段 5：交付
- 产物：Figma 画板 + spec.md + Linear 工单链接
- 门：开发估时，设计在构建期可答疑
常见问题
- ⚠跳过线框 — 直接到高保真，布局争论时像素已打磨
- ⚠无时间盒 — 探索阶段跑 3 周，无决策门，错过截止
- ⚠测试太晚 — 首次用户测试在高保真原型，基础流程缺陷昂贵发现
- ⚠真实文案太晚 — lorem ipsum 隐藏溢出，真实文案构建时破坏布局
最佳实践
- ✓每阶段时间盒 — 强制决策而非无尽探索，如草图最多 30 分钟
- ✓用线框测试，非高保真 — 流程问题便宜时发现
- ✓阶段 2 起用真实文案 — 早期暴露溢出和内容层级
- ✓每阶段定义“门”— 明确推进标准，非“感觉差不多了”
常见问题解答
为什么先线框再高保真？
线框便宜地验证流程和信息架构。跳到高保真会在测试流程是否可行前，用打磨的像素锁定布局决策。
每个设计阶段应多久？
时间盒：草图 30 分钟、线框 2h、模拟图 4h、原型 2h。时间盒强制决策而非无尽探索——没有它，探索跑 3 周。
何时用真实文案而非 lorem ipsum？
线框阶段（阶段 2）起。lorem ipsum 隐藏溢出和层级问题，只在构建时真实文案才暴露。
线框测试需要多少用户？
流程测试 3-5 人——Nielsen 研究表明 5 用户发现 85% 可用性问题。测线框非高保真，修复便宜。
阶段间的“门”是什么？
推进的明确标准：草图门=团队选前 2；线框门=3 用户测试通过；模拟图门=设计评审 + a11y 检查。无“感觉差不多了”。