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

为什么需要可视化

文字描述需求有一个根本性的局限：它是线性的。但产品不是线性的——用户可以在不同页面之间跳转，数据可以在不同模块之间流转，状态可以在不同条件之间切换。

用文字描述一个分支流程："用户点击提交，如果成功跳转到结果页，如果失败显示错误提示，如果网络超时显示重试按钮"——读完这段话，你需要在脑子里重建整个流程。

但一张流程图，一秒就看懂了。

可视化的价值不是"好看"，而是降低理解成本。尤其当你的协作者是 AI 时——流程图和结构图能帮助 AI 理解产品全貌，而不是只看到零散的功能描述。

Mermaid 流程图绘制

Mermaid 是一种用文本生成图表的语法，几乎所有主流文档工具和 AI 都支持它。你不需要学设计软件，用几行文本就能画出清晰的流程图。

几个常用图型：

流程图（Flowchart）——描述用户操作路径

flowchart TD
    A[用户打开应用] --> B{已登录？}
    B -->|是| C[进入首页]
    B -->|否| D[登录页]
    D --> E[输入账号密码]
    E --> F{验证通过？}
    F -->|是| C
    F -->|否| G[显示错误提示]
    G --> D

序列图（Sequence Diagram）——描述系统间的交互

sequenceDiagram
    用户->>前端: 点击提交
    前端->>后端: 发送表单数据
    后端->>数据库: 保存数据
    数据库-->>后端: 返回结果
    后端-->>前端: 返回响应
    前端-->>用户: 显示结果

画流程图时注意：

• 每个分支都要有明确的条件标注
• 所有路径最终都要到达一个终止状态
• 异常流程不能遗漏——这是最常见的盲区

信息架构设计

信息架构回答的问题是：产品里有哪些内容，它们之间是什么关系。

一个好的信息架构让用户不用思考就知道去哪找东西。一个差的信息架构让用户在每个页面都迷失。

设计信息架构的方法：

1. 列出所有内容/功能：先把产品涉及的所有内容项列出来
2. 按用户的心智模型分组：不要按技术模块分组，按用户理解的逻辑分组
3. 确定层级：哪些是一级入口，哪些是二级页面
4. 标注关联：内容之间是否有跳转关系

判断信息架构好坏的标准：你能不能在 3 秒内告诉一个新用户"去哪找到 X"。 如果说不清楚，说明架构需要调整。

用户故事与场景描述

功能列表告诉开发者"做什么"，用户故事告诉所有人"为什么做"。

用户故事的格式：

作为一个 [角色]，我想要 [动作]，以便 [目的]

例子：

• 功能列表：实现任务搜索功能
• 用户故事：作为一个项目经理，我想要按关键词搜索任务，以便快速找到特定任务的进度

用户故事比功能列表多了两样东西：角色和目的。这两样东西决定了功能的优先级和实现方式。

场景描述更进一层——它把用户故事放进一个具体的故事里：

小明是项目经理，每天早上需要查看各项目进度。他打开应用，在搜索框输入项目名称，立刻看到该项目下所有任务的状态。他发现有两个任务标注了延期，点击进去查看详情，确认了延期原因并调整了截止日期。

场景描述的价值：让读者（开发者、AI、你自己）能代入用户的视角，理解功能在实际使用中的意义。

---

关键概念

• 可视化降低理解成本：流程图一秒看懂，文字描述需要脑补
• Mermaid：用文本生成图表，AI 和文档工具都支持
• 信息架构：按用户心智模型分组，3 秒内能告诉新用户"去哪找 X"
• 用户故事：作为 [角色]，我想要 [动作]，以便 [目的]

---

课后练习

1. 为你的 PRD 补充流程图——至少画出核心功能的用户操作流程
2. 设计信息架构——列出所有内容，按用户逻辑分组，确定层级
3. 用用户故事格式重写 PRD 中的 3 个功能需求