第 7 课：用可视化表达需求

模块二：需求定义与文档 | 第 7 课

课前思考

小李把 PRD 写好了：用户是谁、要解决什么问题、核心功能有哪些——都写得很清楚。

但 AI 生成的页面还是不太对。界面布局和想象的不一样，操作流程也有偏差。小李反复修改了好几次，总觉得沟通效率不高。

问题出在哪？文字描述在传达空间关系和流程逻辑时有天然局限。 这一课要解决的是：如何用可视化的方式，让 AI 更准确地理解你的需求。

为什么文字不够用

人类的语言擅长表达"是什么"和"为什么"，但在表达"先做什么后做什么"、"页面长什么样"时，很容易产生歧义。

举个例子："用户输入任务，点击添加按钮，任务出现在列表里。"

这句话看起来没问题，但它没有说明：

输入框和按钮是什么位置关系？（上下？左右？）
新任务是出现在列表顶部还是底部？
列表为空时显示什么？
如果有 100 个任务，列表怎么处理？

一张流程图或页面草图能瞬间回答这些问题。可视化不是锦上添花，而是消除歧义的有效手段。

工具一：Mermaid 流程图

Mermaid 是一种用文本画图的语言。最大的好处是：你不需要学画图软件，写文字就能生成图表。而且 AI 能直接"读懂" Mermaid。

基础语法

mermaid

graph TD
    A[开始] --> B{判断条件}
    B -- 是 --> C[执行操作A]
    B -- 否 --> D[执行操作B]
    C --> E[结束]
    D --> E

graph TD 表示从上到下的流程图
A[文字] 定义一个节点
A --> B 表示从 A 指向 B
B{文字} 表示一个判断节点（菱形）
-- 标签 --> 在连线上加说明文字

实际案例：待办清单的核心流程

mermaid

graph TD
    A[用户打开页面] --> B{本地有历史数据?}
    B -- 有 --> C[加载并显示任务列表]
    B -- 无 --> D[显示空状态提示]
    C --> E[用户输入任务]
    D --> E
    E --> F[点击添加/按回车]
    F --> G{内容是否为空?}
    G -- 为空 --> H[显示请输入内容提示]
    G -- 不为空 --> I[任务添加到列表顶部]
    I --> J{用户点击勾选框}
    J --> K[任务标记为完成，显示删除线]
    I --> L{用户点击删除}
    L --> M[任务从列表中移除]

这个流程图包含了多种情况：正常路径、空数据、输入校验、不同操作的分支。AI 看到这张图，能准确理解每条路径上应该发生什么。

工具二：用户旅程地图

用户旅程地图是把用户从"遇到问题"到"问题解决"的完整过程画出来。它不只描述操作步骤，还描述用户在每个阶段的想法和情绪。

五个维度

维度	记录什么	举例
阶段	用户的核心步骤	发现 → 首次使用 → 日常使用
行为	用户具体做了什么	在输入框输入任务，点击添加
想法	用户脑子里在想什么	"希望别太复杂"
情绪	开心、困惑还是沮丧	首次使用时惊喜，遇到限制时失望
痛点/机会	哪里可以做得更好	首次使用的体验决定用户会不会再来

案例：待办清单的用户旅程

阶段	行为	想法	情绪	机会
发现	在工具列表中看到	"又一个待办 App？"	怀疑	第一印象要简洁
首次使用	添加第一个任务	"就这？挺简单的"	惊喜	零门槛体验是关键
完成任务	点击勾选，出现删除线	"有点爽"	满足	完成反馈要有成就感
日常使用	每天早上列待办	"脑子轻松多了"	安心	养成习惯是留存关键
遇到限制	想分类但没这个功能	"要是能分类就好了"	微失望	记录需求，判断优先级

情绪曲线

把情绪变化连成一条线：

高 😄 ─────────────────────────────
           ╱─╲              ╱─────
          ╱   ╲            ╱
中 😐 ─╲──╱     ╲──╲──────╱──────
        ╲           ╲
低 😞 ────────────────────────────
    发现  首次  完成  日常  遇到限制

情绪最低的地方，就是最大的改进机会。 从这张图一眼就能看出：首次使用前（怀疑阶段）和遇到限制时是用户情绪最脆弱的时刻，需要特别关注。

工具三：产品故事

除了图表，还有一种更"软"但同样有效的可视化方式：用故事描述需求。

功能视角 vs 故事视角

功能视角（干巴巴）：

做一个待办清单，有添加、完成、查看功能。

故事视角（有画面）：

小李每天早上打开电脑第一件事就是打开待办清单。输入框就在眼前，不用找菜单，不用点按钮，直接打字回车，任务就记下了。做完一件划掉一件，看着划掉的任务越来越多，他知道今天在往前走。下班前看一眼今天划掉了什么——"嗯，今天没白过。"

感受到区别了吗？故事版本让你能"看见"用户在使用产品的真实场景。

故事的基本结构

所有好故事都遵循同一个结构：开端 → 冲突 → 解决 → 结局

应用到产品中：

故事阶段	产品视角
开端	用户的日常现状
冲突	用户遇到了什么问题
解决	用户发现并使用你的产品
结局	用户的生活/工作变好了

写产品故事不需要长篇大论，3-5 句话就够了。关键是让读的人（包括 AI）能"看到"这个用户真实的使用场景。

三种工具怎么选

场景	推荐工具	原因
描述业务逻辑、操作流程	Mermaid 流程图	无歧义，AI 能直接解析
理解用户完整体验、找改进点	用户旅程地图	能看到情绪变化和痛点机会
传达产品定位、打动团队	产品故事	建立共情，让人"看到"用户
AI 读的 PRD	Mermaid + 故事结合	流程图精确 + 故事提供场景上下文

最佳实践是三者结合：用故事定基调 → 用流程图描述业务逻辑 → 用旅程地图检查用户完整体验。

本课实践

为你 PRD 中的核心功能画一张 Mermaid 流程图（至少包含一个判断分支和一个异常路径）
画一张简化版用户旅程地图（4 个关键阶段：发现 → 首次使用 → 核心流程 → 长期价值）
用 3-5 句话写一个产品故事，描述一个用户在真实场景中使用你产品的过程

完成后把你画的流程图给 AI，让它用自己的话复述你的业务流程——看它是否准确理解了。

下一步

PRD 写好了，可视化也做好了。但需求不是一成不变的——下一课我们将学习如何做需求评审，以及如何优雅地应对需求变更。

第 7 课：用可视化表达需求 ​

课前思考 ​

为什么文字不够用 ​

工具一：Mermaid 流程图 ​

基础语法 ​

实际案例：待办清单的核心流程 ​

更多 Mermaid 图表类型 ​

工具二：用户旅程地图 ​

五个维度 ​

案例：待办清单的用户旅程 ​

情绪曲线 ​

工具三：产品故事 ​

功能视角 vs 故事视角 ​

故事的基本结构 ​

三种工具怎么选 ​

本课实践 ​

下一步 ​