User Flows and Guided Paths

用户流程与引导路径

Related features that belong together should be experienced as a single coherent journey — not as separate screens the user has to navigate between manually. A well-designed flow feels inevitable: each step leads naturally to the next, the user always knows where they are and what comes next, and the path fits the product's information hierarchy.

相互关联的功能应作为一个连贯的整体旅程呈现给用户，而非让用户手动在多个独立页面间切换。设计精良的流程会让用户觉得顺理成章：每一步都自然衔接下一步，用户始终清楚自己所处的位置以及后续步骤，且整个路径契合产品的信息层级。

When to Guide vs. When to Let Users Explore

何时引导用户 vs. 何时让用户自主探索

Scenario	Pattern
Linear process with a clear end goal (checkout, signup, setup)	Guided step-by-step flow or wizard
Complex task that benefits from breaking into stages	Wizard with progress indicator
Feature discovery across an existing product	Contextual tooltips or coach marks
User returning to complete something they started	Resume prompt with clear re-entry point
Open-ended exploration (dashboard, settings)	Free navigation — do not force a flow

Only guide when the task genuinely has a natural order. Forcing a wizard onto a non-sequential task frustrates users who already know what they want.

场景	模式
有明确最终目标的线性流程（结账、注册、设置）	分步引导流程或向导模式
适合拆分为多个阶段的复杂任务	带进度指示器的向导模式
现有产品中的功能发现	上下文提示框或引导标记
用户返回完成未完成的任务	带清晰重新入口的恢复提示
开放式探索（仪表盘、设置）	自由导航——不要强制流程

仅当任务确实存在自然顺序时才使用引导模式。如果将向导模式强加于非顺序任务，会让明确知道自己需求的用户感到不满。

The Wizard Pattern

向导模式

Use a wizard when:

The task has 3 or more sequential steps
Later steps depend on decisions made in earlier steps
Doing all steps on one screen would overwhelm the user

使用向导模式的场景：

任务包含3个或更多顺序步骤
后续步骤依赖于前期步骤的决策
将所有步骤放在一个页面会使用户感到不知所措

Wizard anatomy

向导模式结构

[Step indicator: 1 of 4]

Step title

  [Form content for this step]

[Back]  [Continue →]

Step indicator: Always show the user where they are in the sequence and how many steps remain. A progress bar or numbered steps both work — numbered steps are clearer when step names are meaningful.

Back navigation: Always available. Users must be able to go back and change earlier decisions without losing their progress on later steps.

Forward navigation: Disabled until the current step is complete. Validate on Continue, not on Submit at the end.

Exit path: Make it clear how to abandon the flow without losing partial progress. Autosave drafts where possible.

[Step indicator: 1 of 4]

Step title

  [Form content for this step]

[Back]  [Continue →]

步骤指示器： 始终向用户展示其在流程中的位置以及剩余步骤数量。进度条或编号步骤都可行——当步骤名称具有实际意义时，编号步骤会更清晰。

返回导航： 始终可用。用户必须能够返回并修改之前的决策，且不会丢失后续步骤的进度。

前进导航： 在当前步骤完成前处于禁用状态。应在点击“继续”时进行验证，而非在最终提交时。

退出路径： 明确告知用户如何在不丢失部分进度的情况下退出流程。尽可能自动保存草稿。

Step design principles

步骤设计原则

One primary decision or input group per step — don't overfill steps
Step titles should describe the user's goal, not the system's: "Your delivery address" not "Address input"
Optional steps should be clearly marked and skippable
The final step should show a summary before committing

每个步骤聚焦一个核心决策或输入组——不要过度填充步骤内容
步骤标题应描述用户的目标，而非系统操作：例如“您的收货地址”而非“地址输入”
可选步骤应明确标记且可跳过
最后一步应在提交前展示汇总信息

Purchase and Conversion Flows

购买与转化流程

Purchase flows have an additional constraint: every unnecessary step reduces conversion. Design for the shortest path to completion.

Collect only what is required at each stage — defer optional information
Show a persistent order summary so the user always sees what they are buying
Surface trust signals near payment steps (security badges, return policy)
Confirmation step before payment: show total, delivery, items — one last review
Post-purchase: immediate confirmation with clear next steps ("Your order is confirmed. We'll email you when it ships.")

购买流程有额外的限制：每一个不必要的步骤都会降低转化率。设计时应追求最短的完成路径。

每个阶段仅收集必要信息——延迟收集可选信息
展示持久化的订单汇总，让用户始终清楚自己购买的内容
在支付步骤附近展示信任标识（安全徽章、退换政策）
支付前的确认步骤：展示总价、配送信息、商品明细——最后一次复核
购买完成后：立即给出确认信息，并明确后续步骤（例如“您的订单已确认。发货时我们会发送邮件通知您。”）

Fitting Flows into the Product Hierarchy

让流程契合产品层级

A guided path should feel like it belongs to the product — not like it has opened a separate experience.

The visual style, typography, and components inside a flow should match the rest of the product
Navigation chrome (sidebar, top nav) can be hidden during a flow to reduce distraction, but the brand header should remain visible
After completing a flow, return the user to a meaningful place in the hierarchy — not to a generic home screen
Deep-linking into a flow should work: a user who arrives at step 3 via email link should see step 3, not step 1

引导路径应让用户感觉属于产品本身，而非开启了一个独立的体验。

流程内的视觉风格、排版和组件应与产品其他部分保持一致
流程期间可隐藏导航栏（侧边栏、顶部导航）以减少干扰，但品牌页眉应保持可见
完成流程后，将用户引导至产品层级中有意义的位置——而非通用首页
支持直接链接到流程的特定步骤：用户通过邮件链接进入第3步时，应直接显示第3步，而非第1步

Review Checklist

审核清单

Does the flow have a clear start, a logical step order, and a definite end?
Is a progress indicator visible at every step?
Can the user go back to any previous step without losing later progress?
Is each step focused on one decision or input group?
Are step titles written in user language, describing their goal?
Does the final step show a summary before the irreversible action?
After completion, does the user land somewhere meaningful in the product?
Does the flow visual style match the rest of the product?

流程是否有清晰的起点、合理的步骤顺序和明确的终点？
每一步是否都显示进度指示器？
用户是否可以返回任意之前的步骤且不丢失后续进度？
每个步骤是否聚焦于一个决策或输入组？
步骤标题是否使用用户视角的语言，描述他们的目标？
最后一步是否在执行不可逆操作前展示汇总信息？
完成流程后，用户是否被引导至产品中有意义的位置？
流程的视觉风格是否与产品其他部分一致？

user-flows-and-guided-paths

Original

Translation