用户流程图是一种描绘访客在商店中完成特定目标（如查找产品或创建账户）所经路径的图表。它映射了每一个屏幕、点击和决策点，为团队提供关于客户体验网站的共享视图。
据 Baymard Institute 数据，平均购物车放弃率接近 70%。许多退出源于购物者遇到的摩擦点，如意外表单字段、页面加载缓慢或信息过多的结账流程。用户流程图有助于在这些流失点导致销售损失前将其识别。
本指南将介绍什么是用户流程图、其与用户旅程及任务流程图的区别、如何构建用户流程图，以及如何解读商店分析数据中的信息。
什么是用户流程图？
用户流程图是用户在网站或应用中完成任务所经路径的分步图示。图中每个节点代表一个屏幕或决策点，每条箭头代表推动用户前进的操作。它是一份视觉记录，展示客户如何与商店互动，包括犹豫或流失的摩擦点，以及促使购买完成的激活时刻。
用户流程图在设计流程的两个阶段中使用：上线前，UX 设计师构建直观流程图以测试产品逻辑并识别死胡同；上线后，产品经理和分析师利用其数据解读真实访客行为，降低整体流失率。
用户流程图的工作原理
“User flow”、“user flow chart”、“user flow diagram”及“用户流程”、“用户流程图”、“用户流程图表”和“UX 流程”均指代同一产物：一种展示从入口点到出口点之间步骤的图表。
用户流程由三个基本要素构成：
- 入口点：用户到达的地方，例如主页、付费广告、自然搜索结果或电子邮件链接。
- 步骤和屏幕：用户遇到的每个页面或屏幕，例如商品集合页、产品详情页、购物车和结账页面。
- 决策点：用户在不同路径间做出选择的时刻，例如加入购物车还是继续浏览、选择访客结账还是创建账户，或者离开网站。
在实际操作中，用户流程图在每个决策点都会分叉，这使其区别于更简单的任务流程图。绘制这些分支有助于团队发现漏洞，并识别出流失率最高的步骤。
用户流程的好处
绘制用户流程能为团队提供基于证据的共享图景，展示客户如何穿过商店，并为修复未顺利通过的步骤提供具体起点。
更好地理解用户行为
用户流程让您能从客户视角看待商店及其导航方式，包括可能未曾考虑到的绕行、回溯和退出。
使界面更加直观的能力
流程绘制完成后，可看到哪些步骤停留时间较长或存在反复后退，以及哪些步骤能自然引导用户完成激活。修复界面上的一个摩擦点（如缩短结账表单或澄清行动号召 CTA），可在无需全面重新设计的情况下降低流失率。
向利益相关者分享清晰的产品故事
用户流程图是具体的交付成果。展示“40%的用户在购物车和第一个结账步骤之间退出”的图表，比口头描述更能证明用户体验投资的合理性。在向投资者推销重新设计方案或与开发机构合作时，全面的用户流程图能为所有人提供共享参考点。
已识别的摩擦点
摩擦点是流程中用户减速、返回或离开的步骤。Baymard Institute 2025年研究显示，购物者放弃购物车的最常见原因是“只是随便看看”或“还没准备好购买”（42%）。
排除该群体后，主要的结账特定原因包括额外成本如运费过高（40%）、要求购买前创建账户（18%），以及结账流程过长或过于复杂（17%）。基准数据显示，平均结账流程包含23.48个表单元素，约为优化流程所需12到14个元素的两倍。
用户流程图与用户旅程与任务流程图
用户旅程图映射跨越所有渠道和接触点的完整客户体验；任务流记录无分支的单一线性交互；用户流程图则介于两者之间。
| 维度 | 用户旅程 | 用户流程图 | 任务流程图 |
|---|---|---|---|
| 定义 | 跨越所有接触点和情感的整体体验 | 用户在网站或应用中完成特定目标所采取的步骤 | 针对单一场景且无分支的用户界面（UI）操作的线性序列 |
| 范围 | 所有渠道及随时间推移的用户互动 | 单一网站或应用上的一个目标 | 单一网站或应用上的一次线性互动 |
| 焦点 | 各阶段的情绪、动机和痛点 | 决策点和屏幕切换 | 逐步的界面操作 |
| 产物 | 带有阶段、接触点和情感分析的旅程地图 | 带有决策分支的用户流程图 | 简单的线性流程图 |
| 适用场景 | 就整体客户体验策略对齐团队 | 设计或审计产品体验 | 记录特定互动的运作方式 |
| 负责人 | 产品、营销或客户体验（CX）团队 | UX设计师或产品经理 | UX 设计师或开发人员 |
用户旅程
用户旅程（也称客户旅程地图）涵盖客户发现、评估、购买并再次光顾品牌的完整过程。它跨越多个渠道（如自然搜索、社交媒体、电子邮件和实体店），将情感状态和动机与具体行为相结合，体现宏观视角。
用户流程
用户流程聚焦于宏大故事中的某一特定场景，映射在单一网站或应用上完成某项具体任务（如结账、搜索产品或新手引导）的路径。完整的客户旅程由多个用户流程组成。与用户旅程不同，用户流程不追踪情感，而是追踪屏幕、决策和路径。
任务流程
任务流程是最细粒度的层级，涵盖无分支的单一交互，即完成特定操作的严格步骤序列。它有助于记录单个功能的工作原理，多个任务流程组合便构成用户流程。
在实践中，三者协同工作：
- 用户旅程定义战略目标（例如“让重复购买变得轻松”）；
- 用户流程映射通向该目标的路径；
- 任务流程记录这些路径中每个单独步骤的运作方式。
如何创建用户流程
构建用户流程需五个步骤：定义目标、识别用户入口、映射屏幕和决策点、草绘用户流程图，并用真实数据进行验证。
1. 定义用户和目标
从单一用户类型和单一目标开始。首次访问者购买商品的需求与回头客重新订购不同。例如，可从“一位通过付费 Instagram 广告找到商店并希望购买单件商品的首次访问者”入手。
2. 识别入口点
入口点是用户在开始流程前到达的位置，可能是：
- 主页（通过直接流量或品牌搜索进入）；
- 集合页或分类页（通过自然搜索或导航进入）；
- 产品详情页（通过付费广告、社交媒体或电子邮件进入）；
- 落地页（通过特定营销活动进入）。
Shopify 的行为报告按来源展示着陆页表现，便于查看哪些入口点带来最多会话以及流失从何处开始。
3. 梳理步骤与决策点
对于每个入口，列出用户在达成目标过程中遇到的每一个屏幕或状态，然后识别出用户路径发生分叉的决策点。
这些决策点可能包括：
- 加入购物车还是继续浏览；
- 创建账户还是作为访客结账；
- 选择配送速度还是使用默认选项；
- 保存支付信息还是不保存。
在用户流程图中用菱形标记每个决策点，并为每种结果设置独立分支。
4. 绘制流程图
步骤梳理完成后，使用标准流程图形状绘制：矩形代表屏幕，菱形代表决策，箭头代表转换。
用于草绘用户流程的免费工具包括 FigJam、Miro、Whimsical、Lucidchart 和 draw.io。
5. 使用真实数据进行验证
通过两个来源将草绘流程与实际访客行为对比验证：
- Shopify 的行为报告：展示在线商店会话、顶级着陆页和转化步骤；
- GA4 的路径探索：映射访客实际浏览的页面序列，包括离开地点。
若显示真实数据与流程图存在差异，请更新用户流程图。
何时使用用户流程图
每当计划新功能、重大设计变更，或分析数据显示需要诊断流失点时，都应使用用户流程图。具体原因包括：
- 新功能：在构建新的结账选项、忠诚度计划或新手引导流程之前，先绘制预期流程。
- 重新设计：当重构导航或结账体验时，用户流程为设计师、开发人员和利益相关者提供共享参考。
- 改进周期：当分析数据显示流失时，用户流程有助于识别原因；GA4 路径探索可显示用户退出前访问的具体页面及跳出率激增的步骤。
用户流程图示例
以下是电子商务网站上的几个用户流程图示例。
从首页到购买的典型用户流程图示例
- 入口点：首页
- 目标：完成购买
- 步骤：首页 → 集合页 → 产品详情页 → 加入购物车 → 购物车审查 → 结账（联系信息、配送、支付） → 订单确认
假设客户入口点是首页，他们可选择直接搜索产品、浏览目录、了解公司信息或使用联系页面。客户决定搜索产品，浏览结果页，使用筛选选项，最终找到心仪产品。用户流程图应描绘这些操作。接下来是结账流程：客户检查购物车商品，编辑数量、配送及支付信息，并完成交易。
从筛选搜索到产品的用户流程示例
- 入口点：集合页（通过自然搜索或导航进入）
- 目标：查看产品详情页
- 步骤：集合页 → 应用筛选条件（类别、价格、品牌） → 筛选结果 → 产品详情页 → 决策：加入购物车或继续浏览
拥有大型目录的商店需要一条从分类页到产品详情页的顺畅路径。Audio Advice 的客户带着明确需求而来，使用过滤器缩小目录范围。迁移至 Shopify 前，缓慢的加载时间和无法及时更新的内容让客户沮丧；迁移后，转化率同比增长47%，总收入增长21%。搜索到产品的流程去除了摩擦，实现了更快页面、可导航过滤器及无需工程支持即可更新的内容。
回头客重新订购的用户流程示例
- 入口点：电子邮件活动或直接访问
- 目标：重新订购之前购买的商品
- 步骤：登录（或保持登录状态）→ 账户订单历史 → 选择之前的订单 → 将商品重新加入购物车 → 确认保存的地址和支付方式 → 订单确认
回头客已了解产品，面临的摩擦点可能与新购物者不同，例如可能在登录、查找之前商品及确认支付详情方面遇到困难。
购物车弃单挽回的用户流程示例
- 入口点：弃购挽回电子邮件或再营销广告
- 目标：完成购买
- 步骤：挽回电子邮件 → 点击返回购物车（预填充） → 审查商品 → 结账 → 订单确认
购物车弃单既是流失点，也是挽回流程的开始。Society6 与 Pattern 合作在 Shopify 上重建商业体验，重新设计结账流程和移动体验后，移动端转化率提高45%。大部分改进来自于消除用户重新进入购物车并完成购买之间的摩擦。
用户流程分析：在您的商店中发现流失点
用户流程分析是将设计的流程与实际路径进行比较的过程，旨在发现并修复客户流失步骤。审查流程数据时，请注意以下三点：
- 流失步骤：退出率在哪个环节激增？Baymard 2025年研究将放弃原因与特定步骤联系起来，如支付步骤出现意外运费或账户创建提示中断流程。特定环节的激增表明需检查该环节对用户的要求。
- 页面停留时间与转化率之比：高会话时间和低转化率的页面值得调查。Baymard 2025年基准发现，62%的领先电商网站产品页面体验中等或更差，尺寸选择、图像质量和变体显示是常见失败点。
- 移动端与桌面端的差距：研究显示，在超过180个网站中，移动端导航性能落后桌面端九个百分点。若移动端流失率远高于桌面端，很可能存在针对移动端的流程问题。
直到拥有可视化系统，流失问题并不总是显而易见。Offbeat Bikes 所有者曾每周花费数小时手动协调库存，导致超卖和退款。转向 Shopify 后，库存自动同步，每月节省超四小时管理时间，儿童自行车同比销售额增长100%。这表明用户流程问题背后往往存在数据问题。
法国男装品牌 Serge Blanco 也遇到类似瓶颈，遗留系统库存更新滞后，移动结账体验复杂。迁移到 Shopify Plus 后，旺季实现5%转化率，并首次在所有渠道拥有统一视图。
这两个案例表明，流程分析问题往往是数据基础设施问题。在解决流失率之前，需能清晰地看到它。一旦看清问题，就从最小可测试变更开始，如重排表单字段、修改 CTA 文案或添加进度指示器，这些都是基于已识别摩擦点可进行测试和衡量的变更。
用户流程模板和工具
选择合适的工具或模板取决于需要协作工具、基于代码的方法还是快速草图。以下是一些选项：
- FigJam (Figma)：Figma Community 中提供模板，免费最多支持三个协作空间。
- Miro：带有预建用户流程模板的白板工具，免费计划包含三个可编辑画板。
- Whimsical：专为用户流程图和线框图设计，提供免费计划。
- Lucidchart：结构更清晰的绘图工具，提供特定流程图形状和导出选项，提供免费计划。
- draw.io：免费、开源且基于浏览器，与 Google Drive 集成，无需账户即可使用。
对于 Shopify 专用模板，Figma Community 包含具有常见流程模式的电商 UI 套件。建议从模板开始，将步骤适应特定场景，并根据自身分析数据进行验证。
构建引导客户完成商店操作的用户流程
用户流程只有在反映客户实际行为（而非期望行为）时才具有价值。绘制流程图，对照分析数据检查，并修复发现的摩擦点。对访客首次点击到完成订单之间路径的每一次改进，都是对转化率的提升。
Shopify Checkout 旨在减少流程中最后、风险最高步骤的摩擦。了解其工作原理以及如何为您的商店进行自定义。
用户流程常见问题解答
用户流程应包含多少步骤？
步骤数量因任务复杂性和用户类型而异。复杂的任务和不同的用户可能需要更多步骤（如新用户注册）。目标是尽可能多地捕捉描述实际用户流程所需的步骤。
是否存在不同类型的用户流程？
是的，存在许多不同类型，可按复杂度级别、用户类型（目标受众、次要用户）和可用程度（流畅路径与易出错路径）进行分类。
什么是良好的用户流程？
良好的用户流程涵盖一个目标、一种用户类型，并映射从入口到完成之间的每个屏幕和决策点。它反映的是经分析数据验证的实际用户行为，而非设计师的期望。
用户流程和用户旅程有什么区别？
用户旅程涵盖客户与品牌关系的完整弧线，包括每一渠道、接触点和情感体验；用户流程则聚焦于单一数字界面上的特定任务，描绘从入口点到完成操作之间的屏幕和决策路径。多个用户流程共同构成一个用户旅程。
如何为电商网站创建用户流程？
明确用户类型和目标，确定入口位置，绘制从入口到完成之间每个屏幕和决策点，使用 FigJam 或 draw.io 等工具草绘，然后利用 Shopify 行为报告或 GA4 路径探索验证真实数据。当数据与流程图出现偏差时，及时更新用户流程图。