user-flow

User Flow Design

Applicable Scenarios

• Mapping the steps of a functional flow
• Designing page transitions and decision points
• Designing exception paths and exception recovery
• Providing input for information architecture and page structure

Inapplicable Scenarios

• A single page with no flow (use page-structure directly)
• Overall product architecture (use information-architecture)

Core Structure

触发点 → 进入 → 浏览 → 决策 → 操作 → 反馈 → 完成 / 失败

Each flow must include:

• Trigger point (where the user enters from)
• Main path (the most common success path)
• Decision points (where the user needs to make a choice)
• Exception paths (errors, empty data, insufficient permissions)
• Feedback mechanism (how the system responds to the user)
• Exit path (how the user returns or cancels)

Output Format

Mermaid Flowchart

flowchart TD
    A[首页] --> B{是否登录?}
    B -- 否 --> C[登录页]
    C --> D[输入账号密码]
    D --> E{验证}
    E -- 成功 --> F[跳转目标页]
    E -- 失败 --> G[显示错误]
    G --> D
    B -- 是 --> F
    F --> H[完成任务]

Flow Description Template

## 流程：[流程名]

### 触发点
[用户从哪里进入这个流程]

### 主路径（成功路径）
1. 用户 [操作 1]
2. 系统 [反馈 1]
3. 用户 [操作 2]
...

### 决策点
- 决策 1：[条件] → 路径 A / 路径 B
- 决策 2：...

### 异常路径
- 异常 1：[条件] → 处理方式
- 异常 2：...

### 反馈机制
- 加载中：[显示什么]
- 成功：[显示什么 + 自动跳转?]
- 失败：[显示什么 + 是否可重试?]

### 退出路径
- 取消按钮：返回到 [页面]
- 浏览器后退：行为是 [...]

Workflow

1. 识别用户角色和场景
2. 定义触发点（用户从哪进入）
3. 列出主路径步骤（最简单的成功路径）
4. 在每个步骤识别决策点
5. 为每个决策点设计分支
6. 列出所有异常路径
7. 定义反馈机制
8. 定义退出路径
9. 用 Mermaid 可视化
10. 转交 page-structure 设计具体页面

Quality Self-Check

□ 主路径是否足够短（不要超过 7 步）
□ 是否覆盖了所有决策点
□ 异常路径是否完整
□ 反馈是否在每个关键节点
□ 退出路径是否明确
□ 是否使用 Mermaid 可视化

Common Pitfalls

1. Only drawing the success path—Exception paths are the soul of the design
2. Decision points are unclear—The user does not know why they were redirected here
3. Missing feedback—No feedback for loading, success, or failure
4. Exit path is unclear—The user is trapped in the flow
5. The flow is too long—If it exceeds 7 steps, consider whether it can be simplified
6. No visualization—It is hard to see clearly with text description alone

Supporting Templates

• templates/user-flow-template.md — Flow description + Mermaid flowchart template

Collaboration with Other Skills

上游：
  product-manager 的 PRD / 用户故事

平行：
  customer-journey（产品经理）→ 提供用户旅程

下游：
  information-architecture → 设计整体架构
  page-structure → 设计具体页面
  component-states → 定义反馈状态