UX 与原型

PM 不必画高保真 UI，但必须 理解用户路径、推动可用性验证。UX 与原型是 PRD 的「可视化附录」，减少工程返工。与 /roadmaps/product-manager UX 节点对齐。

学习目标

• 掌握线框图、用户流程图、原型 fidelity 选择
• 理解 Design Thinking 五阶段在产品中的应用
• 组织轻量可用性测试并迭代

核心概念

保真度选择

阶段	工具	目的
概念	纸笔 / 白板	快速对齐主路径
线框	Figma / Balsamiq	信息架构、布局、文案
可点击原型	Figma Prototype	走查流程、Stakeholder 评审
高保真	设计系统组件	开发前视觉与交互定稿

先流程后像素：CodeRoadMap 新功能先画「从首页到完课」流程，再讨论按钮颜色。

Design Thinking 简版

Empathize — 访谈、观察（Discovery 延续）
Define — 问题陈述：「小李无法在 5 分钟内找到合适 track」
Ideate — 头脑风暴，暂不评判
Prototype — 最小原型验证假设
Test — 5 用户即可发现 80% 明显问题

用户流程图要素

• 入口：搜索、推荐、外链
• 决策点：登录墙、付费墙、空状态
• 异常路径：网络失败、无权限、无数据
• 成功标准：用户完成什么动作算成功

首页 → Track 列表 → Track 详情 → Lesson 阅读 → 练习提交 → 进度更新
         ↓ 空结果          ↓ 未登录              ↓ 提交失败 → 重试提示

可用性测试

• 任务式：「请找到 Java 入门 track 并完成第一课练习」
• 观察 完成率、耗时、困惑点（用户在哪停顿、点错）
• 不问「你喜欢吗？」——问「你期望这里发生什么？」

PM 与设计师分工：设计师主导视觉与交互规范；PM 保证 流程覆盖 PRD 场景与业务规则。

练习

• 为「track 详情 + 继续学习」画 ASCII 或工具线框（3 屏）
• 写 1 条可用性测试任务 + 3 个观察指标
• 列出 2 个必须设计的空状态（如无进度、无搜索结果）

小结

原型是最便宜的错误；先验证流程，再投入开发。 下一课进入敏捷与 Scrum。