展现形式 · 概念

Stepper：多步骤流程与步骤指示

说明 Stepper 如何把结账、尺码测量向导、选品向导与订阅设置拆成有顺序的步骤并指示当前位置，依据 W3C WAI 多页表单教程与 MDN aria-current 讨论有序列表语义、返回与保存进度，以及 WCAG 3.3.1、3.3.3、3.3.4、3.3.7 的错误处理要求，区分它与 Progress Bar、Tabs。

Stepper 把一个有依赖顺序的任务拆成若干命名的步骤，并在每一步告诉顾客“现在在哪一步、前面做了什么、后面还有什么”。它与 Progress Bar 的区别是：进度条只回答完成比例，Stepper 让每个步骤有名字，且通常允许回到已完成的步骤。

适合与不适合

适合步骤之间有先后依赖、每步内容较多或有分支的任务：结账（联系与地址、配送、付款、确认）、尺码测量向导、选品向导、订阅设置。不适合字段很少、几十秒能填完的单一表单，也不适合各部分彼此独立、可任意顺序查看的内容（那是 Tabs 的场景）。拆多步是为了降低每一步的负担；如果拆完后顾客要来回翻页才能核对信息，单页更好。

与相邻模式的区别

相邻模式	判据	说明
Progress Bar	有没有命名步骤	进度条只有比例；Stepper 每步有名称、状态（已完成、当前、未开始）和内容。Stepper 可以附带进度条，反过来不成立
Tabs	是否有顺序依赖	Tabs 是并列面板，任意切换；Stepper 的后一步依赖前一步的结果，不应允许跳过必填的前置步骤
Timeline	展示还是操作	Timeline 展示已发生或将发生的事件；Stepper 是顾客正在操作的流程
Accordion	是否单页、是否有约束	折叠面板可做成单页纵向分步，但各段可随意展开；需要强制顺序时才用 Stepper
Modal	承载位置	多步骤复杂流程不适合放进 Modal；Modal 适合短任务

优点与缺点

优点	缺点
每一步只处理一组问题，认知负担较小	步数越多，来回和放弃点越多
顾客知道位置与剩余量	步骤数量或名称不准确会误导
错误可限定在当前步骤内	状态复杂：返回、刷新、会话过期都要处理
便于在最后一步集中确认	可能被拆得过碎，掩盖本可单页完成的表单

内容与交互要求

何时拆多步，何时单页。 W3C WAI 多页表单页的建议是把长表单拆成一系列逻辑步骤，并重复整体说明、按逻辑分组（如配送与付款分开）、清楚标出可选阶段。据此，本文的判据是：分组在逻辑上成立（配送与付款是两件事）、总量确实较长、后续步骤取决于前面的答案时拆分；字段少、分支少、顾客常需要对照全部信息时用单页。以上是设计判断，没有转化率数据支撑，WooDawn 不断言某种拆法更好。

步骤命名与数量。 名称用动宾或名词（“收货地址”“选择配送”“确认订单”），同一流程内保持一致；数量以逻辑分组为准，不为凑进度而拆分。可选步骤明确标注。

返回与保存进度。 WAI 页面建议：在可能时为已完成步骤提供链接供用户回看，并且回到已完成步骤时，当前步骤中已输入的数据应被保存。刷新、返回键、网络中断后，已通过校验的数据尽量保留；不可保留（如涉及敏感数据）时要说明。WAI 同页建议尽量避免时间限制，必须有时要允许调整或延长。

不重复索取。 WCAG 2.2 的 3.3.7 Redundant Entry（A）要求在同一流程中，已经输入或提供过的、需再次使用的信息要自动填入或可供选择；例外是重新输入属必要、出于安全，或此前信息已失效。例如账单地址与收货地址相同时应可勾选沿用。

最后一步先确认。 3.3.4 Error Prevention (Legal, Financial, Data)（AA）适用于产生法律承诺或金融交易的页面、修改或删除用户可控数据的页面：需满足可撤销、提交前检查并允许更正、或有查看、确认、更正后再提交的机制三者之一。结账与订阅设置属于这一类，提供“确认订单”步骤与可回到前面修改的入口。订阅的条款摘要见订阅与预售条款摘要。

结构。 步骤指示器用有序列表 <ol>，每项包含步骤名称。WAI 多页表单页的示例即是有序列表，已完成步骤为可点击链接，并配以视觉隐藏的“Completed:”“Current:”文字，页面示例未使用 aria-current。MDN 则说明：在多步骤流程的步骤指示器中，当前步骤的图标与其他不同时，应在该图标的容器上加 aria-current="step"，让看不到视觉差异的用户也能知道；且同一组元素中只标记一个为当前。可以采用其一或叠加：视觉隐藏文字对所有读屏软件都是文本，aria-current 则是结构化状态。不要把 aria-current 当作 aria-selected 的替代品用在 tab 上。

标题与页面标题。 WAI 建议页面 <title> 先写进度，例如“Step 2 of 4: Shipping Address – …”，主标题也带步骤信息。单页 JavaScript 换步时，同样要更新标题并把焦点移到新步骤标题或第一个字段，这是本文的实践建议，读取的页面中没有单独条文；每一步为独立 URL 与服务端提交时，页面加载已能满足。

错误处理。 3.3.1 Error Identification（A）：自动检测到输入错误时，标明出错项并用文字描述错误；3.3.3 Error Suggestion（AA）：已知纠正建议时提供建议，除非危及安全或内容目的。因此每一步在“下一步”时校验，出错时留在当前步、把焦点带到错误摘要或第一个错误字段，逐项写明原因与修正方式（不只标红）。指示器上的“该步有错误”状态也要用文字说明，不只靠颜色，见 Progress Bar 中 1.4.1 的说明。

触控与小屏：指示器空间不足时可缩略为“第 2 步，共 4 步：收货地址”一行文字，不要横向滚动才能看到当前位置；按钮保证足够点击面积。

状态与退化

零项与一项：只有一步就不要做 Stepper。
多项：显示全部步骤，长流程可折叠已完成步骤为摘要。
加载：校验或提交中禁用重复点击并说明进行中；耗时较长的步骤见 Progress Bar。
错误：留在当前步，保留已输入内容，逐项写明原因。
过期：会话或价格、库存已变化时说明原因并带回相应步骤，不静默清空。
无 JavaScript：每一步是独立页面或表单提交，指示器是静态有序列表，依然完整。
减少动态：步骤切换取消滑动与淡入。

常承载的内容与模块

结账相关：购物车摘要通向结账；平台层面结账页能改到哪一步、默认是一页式还是三页式，见结账自定义与购买旅程，本文不断言结账内部实现。向导类：尺码与适配指引中的测量向导、商品选型中的选品向导、订阅与预售条款摘要所在的订阅设置流程。

发布前检查

拆分是否有逻辑理由，顾客是否需要来回翻页对照信息？
指示器是否是有序列表，当前步是否有程序可识别的标记，且只有一个？
每步的页面标题或主标题是否含步骤位置？
回到前面步骤时数据是否保留，已输入的信息是否不再重复索取？
每步错误是否文字说明并指出具体字段与修正方式？
最后是否有确认与修改入口？
无 JavaScript 与减少动态设置下流程是否仍可走完？

待继续完善

没有在读屏软件中比较 aria-current="step" 与视觉隐藏文字两种做法的播报。
单页 JavaScript 换步时的焦点管理缺少可引用的官方条文，需补充。
结账步骤的具体表现按平台设置而定，本文只链接已有文章，未在测试店铺验证。