user-flow-mapping

用户流程映射

此技能使 Agent 能够创建详细的用户流程图，映射用户在产品中完成任务时遇到的每个步骤、决策点、错误状态和成功路径。Agent 使用 Mermaid 图表语法生成三种流程图，便于移植：任务流程（单一路径，无决策）、用户流程（含多个决策分支的多条路径）和线框流程（标注了屏幕线框图的流程）。每个流程图都包含转化指标、流失风险点和优化机会的注释。

工作流

1. 定义流程目标和范围：确定要映射的具体用户目标（例如“完成购买”“重置密码”）。确定入口点，即用户如何到达流程起点（直接链接、首页导航、电子邮件 CTA、推送通知）。明确成功标准和范围边界，避免图表无限扩展。

2. 识别所有步骤和决策点：按顺序列出每个屏幕、操作和系统响应。标出用户或系统会产生分支的决策点（例如“用户已登录吗？”或“支付成功了吗？”）。纳入错误状态、验证失败和重试循环。对于每个步骤，注明它是用户操作（点击、输入、滑动）还是系统操作（重定向、API 调用、发送电子邮件）。

3. 先映射顺畅路径，再映射边缘路径：首先绘制从入口到成功的理想路径。然后补充替代路径：用户未登录、验证失败、会话超时或支付被拒时会发生什么。每个分支都应以成功状态、错误恢复路径或退出点结束。

4. 标注指标和风险点：在每个步骤旁注明相关指标：页面浏览量、点击率、表单完成率、流失率。标记用户可能放弃的高摩擦步骤（多字段表单、强制创建账户的页面、支付页面）。针对每个风险点提出具体的优化建议。

5. 生成 Mermaid 图表：使用一致的节点形状，生成简洁的 Mermaid graph TD 图表：用圆角矩形 () 表示页面／屏幕，用菱形 {} 表示决策，用矩形 [] 表示操作，用双圆 (()) 表示起始／结束状态。使用描述性标签，并通过 style 指令添加颜色标注，以红色突出错误路径，以绿色突出成功路径。

6. 检查并迭代：与用户一起查看图表，确认其完整性。检查每个分支是否都已结束、是否存在孤立节点，以及流程是否准确反映了产品的实际行为，包括边缘情况。

用法

向 Agent 提供用户目标、产品背景（Web 应用、移动应用或跨平台）以及已知的屏幕或步骤。也可提供分析数据（流失率、转化率），供 Agent 在图表中添加注释。Agent 将生成带注释的 Mermaid 图表。

示例

示例 1：电子商务结账流程

用户请求：“为我们的电子商务网站绘制完整的结账流程。用户可以已登录，也可以访客身份结账。我们支持信用卡和 PayPal。”

Agent 回复：

graph TD
    START(("Start: Cart Page")) --> REVIEW["Review Cart Items"]
    REVIEW --> EMPTY{Cart empty?}
    EMPTY -- Yes --> BROWSE["Redirect to Shop Page"]
    EMPTY -- No --> AUTH{User logged in?}

    AUTH -- Yes --> SHIPPING["Enter Shipping Address"]
    AUTH -- No --> CHOICE{Guest or Sign In?}
    CHOICE -- Sign In --> LOGIN["Login Page"]
    LOGIN --> LOGIN_OK{Login successful?}
    LOGIN_OK -- Yes --> SHIPPING
    LOGIN_OK -- No --> LOGIN_ERR["Show Error, Retry"]
    LOGIN_ERR --> LOGIN
    CHOICE -- Guest --> GUEST_EMAIL["Enter Email Address"]
    GUEST_EMAIL --> SHIPPING

    SHIPPING --> VALIDATE_ADDR{Address valid?}
    VALIDATE_ADDR -- No --> ADDR_ERR["Show Validation Errors"]
    ADDR_ERR --> SHIPPING
    VALIDATE_ADDR -- Yes --> DELIVERY["Select Delivery Method"]

    DELIVERY --> PAYMENT{Payment method?}
    PAYMENT -- Credit Card --> CC["Enter Card Details"]
    CC --> CC_VALID{Card valid?}
    CC_VALID -- No --> CC_ERR["Show Card Error"]
    CC_ERR --> CC
    CC_VALID -- Yes --> PROCESS

    PAYMENT -- PayPal --> PP["Redirect to PayPal"]
    PP --> PP_OK{PayPal authorized?}
    PP_OK -- No --> PP_ERR["PayPal Cancelled"]
    PP_ERR --> PAYMENT
    PP_OK -- Yes --> PROCESS

    PROCESS["Process Payment"] --> SUCCESS{Payment successful?}
    SUCCESS -- Yes --> CONFIRM["Order Confirmation Page"]
    CONFIRM --> END(("End: Order Complete"))
    SUCCESS -- No --> DECLINE["Show Decline Message"]
    DECLINE --> PAYMENT

    style BROWSE fill:#fef3c7,stroke:#f59e0b
    style LOGIN_ERR fill:#fee2e2,stroke:#ef4444
    style ADDR_ERR fill:#fee2e2,stroke:#ef4444
    style CC_ERR fill:#fee2e2,stroke:#ef4444
    style PP_ERR fill:#fee2e2,stroke:#ef4444
    style DECLINE fill:#fee2e2,stroke:#ef4444
    style CONFIRM fill:#d1fae5,stroke:#10b981
    style END fill:#d1fae5,stroke:#10b981

指标注释：

• 购物车 → 配送：约 72% 的用户继续操作（28% 的用户查看购物车后放弃）
• 配送 → 支付：约 85% 的用户继续操作（地址验证的摩擦较低）
• 支付 → 确认：约 64% 的用户继续操作（流失率最高；可考虑保存支付方式）
• 访客结账与登录的选择比例：约 55% 的用户选择访客结账（让访客选项更加醒目，以减少阻力）

示例 2：包含决策点的 SaaS 入门引导流程

用户请求：“梳理我们项目管理工具的入门引导流程。新用户注册、验证电子邮件、选择套餐、创建第一个项目并邀请团队成员。”

Agent 回复：

graph TD
    START(("Entry: Landing Page")) --> SIGNUP["Sign Up Form"]
    SIGNUP --> VALIDATE{Form valid?}
    VALIDATE -- No --> FORM_ERR["Show Validation Errors"]
    FORM_ERR --> SIGNUP
    VALIDATE -- Yes --> EMAIL_SENT["Verification Email Sent"]

    EMAIL_SENT --> VERIFIED{Email verified?}
    VERIFIED -- No, 24h+ --> RESEND["Resend Verification"]
    RESEND --> VERIFIED
    VERIFIED -- Yes --> PLAN{Choose Plan}

    PLAN -- Free --> FREE["Free Plan Selected"]
    PLAN -- Pro --> BILLING["Enter Billing Info"]
    BILLING --> BILLING_OK{Payment valid?}
    BILLING_OK -- No --> BILL_ERR["Show Billing Error"]
    BILL_ERR --> BILLING
    BILLING_OK -- Yes --> PRO["Pro Plan Activated"]

    FREE --> PROFILE["Complete Profile"]
    PRO --> PROFILE

    PROFILE --> CREATE["Create First Project"]
    CREATE --> INVITE{Invite team members?}
    INVITE -- Yes --> TEAM["Enter Team Emails"]
    TEAM --> INVITES_SENT["Invitations Sent"]
    INVITES_SENT --> DASHBOARD
    INVITE -- Skip --> DASHBOARD["Dashboard - Onboarding Complete"]
    DASHBOARD --> END(("End: Active User"))

    style FORM_ERR fill:#fee2e2,stroke:#ef4444
    style BILL_ERR fill:#fee2e2,stroke:#ef4444
    style RESEND fill:#fef3c7,stroke:#f59e0b
    style DASHBOARD fill:#d1fae5,stroke:#10b981
    style END fill:#d1fae5,stroke:#10b981

指标注释和优化建议：

• 注册 → 电子邮件已验证：约 68% 的用户会在 1 小时内完成验证。24 小时后发送提醒。考虑在验证前提供有限访问权限，以减少早期流失。
• 套餐选择：约 80% 的用户最初会选择免费套餐。提供 14 天的 Pro 试用，无需填写账单信息，以提高 Pro 转化率。
• 创建第一个项目：这是关键的激活步骤。如果用户在 48 小时内没有创建项目，则触发一封引导教程邮件。目标：首次会话内的激活率达到 60%。
• 邀请团队：约 35% 的用户会跳过此步骤。展示协作的价值（例如：“团队完成项目的速度快 3 倍”），以提高邀请率。

最佳实践

• 添加分支前，先绘制顺利路径：从理想路径开始可让图表保持清晰易读。逐步加入错误状态、边缘情况和替代路径。
• 统一使用节点形状：菱形用于决策点，圆角矩形用于屏幕／页面，矩形用于用户或系统操作。这套视觉语言便于快速浏览流程。
• 为每个分支设置终点：图表中的每条路径都必须以明确状态结束——成功、错误恢复或明确退出。孤立节点表示产品逻辑有所缺失。
• 有实际数据时添加注释：每个步骤的流失率、转化率和会话时长，可将流程图从规划材料转变为优化工具。
• 每张图只对应一个用户目标：将“注册”“购买”和“管理账户”放在一张图中，会让图表变得难以阅读。分别梳理每个目标，再在共享的入口／出口处连接图表。

边缘情况

• 循环流程（重试循环）：支付重试、重新提交表单和重新验证身份都可能在图表中形成无限循环。添加最大重试次数注释（例如：“最多尝试 3 次，然后转到支持页面”），并为重试次数耗尽的情况设置终止退出节点。
• 外部系统重定向（OAuth、PayPal、3D Secure）：用户离开产品进行第三方身份验证时，应明确标注这一转换，并考虑三种结果：成功返回、取消后返回，以及超时／未返回。添加“用户未返回”退出节点。
• A/B 测试变体：当不同测试组的流程有所不同时，在变体分流处创建决策节点，并标注测试名称和变体标识，然后分别绘制两条路径及其对应结果。
• 跨多个会话的流程：密码重置（电子邮件 → 数小时后点击链接）或电子邮件验证可能无法在一个会话内完成。明确标注会话边界，并指出触发用户重新进入流程的方式（电子邮件链接、推送通知、再次访问）。
• 移动应用中的离线或降级状态：如果产品支持离线使用，请梳理连接中断时会发生什么：操作排队、错误消息，以及重新连接后的同步行为。