结账进度指示器怎么做：Baymard 的 3 条最佳实践与常见错误清单

Baymard Institute 拆解了电商结账流程中进度指示器（progress indicator）的设计要点：步骤要和真实流程一一对应、已完成的步骤要能点击回退、步骤切换时必须给加载反馈。文中还给出了 5 种指示器类型的适用场景和一份常见错误清单，适合独立站优化结账体验时直接对照检查。

进度指示器是什么，用在哪里

• 进度指示器是展示用户在多步流程中位置的 UI 组件，常见形式有带编号/标签的 stepper、进度条和完成百分比
• 电商里最典型的场景是结账：购物车 → 账号选择/游客结账 → 联系方式 → 配送信息 → 支付 → 确认 → 订单完成
• 同样适用于多步表单、账号注册、退货申请和定制产品配置流程
• 注意区分：加载指示器（spinner、骨架屏）表示系统正在处理，页面控件（轮播圆点）只表示位置，都不算进度指示器
• 单页结账和手风琴式结账靠结构本身传达进度，不必强加 stepper，否则只是视觉噪音

5 种类型怎么选

• 带标签的 stepper：适合步骤短且固定、每步有明确名称的流程
• 进度条：适合较长的流程，但各步骤工作量差异大时不太合适
• “第 X 步，共 Y 步”文字：适合移动端等空间有限的场景
• 手风琴分区：已完成部分折叠成摘要，靠结构展示进度
• 面包屑式路径：用户经常需要回退的流程最合适

3 条核心最佳实践

• 步骤与真实流程一致：不要把多个真实页面合并成一个步骤，也不要隐藏用户仍会遇到的步骤；结账流程应包含购物车、账号选择和订单确认，步骤不能中途凭空出现或消失
• 已完成步骤可点击：用户经常想回去修改配送或支付信息，点不动就会被迫找其他返回方式；点击后要可预期地回到正确位置，样式要看起来可交互，移动端点击区域要够大
• 步骤间给加载反馈：研究显示用户在加载新页面约 5 秒后就会焦虑；点击“继续”后立即显示 spinner，加载中禁用主按钮防止重复提交，卡住时更新提示文案而不是让界面冻结

组件结构与无障碍细节

• 完整组件包括：步骤标签、当前步骤标记（最醒目的视觉信号）、已完成标记（通常是勾）、较弱的未来步骤、连接线
• 完整、当前、未完成三种状态不能只靠颜色区分，要叠加形状、图标、字重或标签，照顾色觉障碍用户

常见错误清单

• stepper 漏掉确认步骤，或步骤数中途变化
• 已完成步骤点不了，或回退后数据丢失
• 未来步骤可点击，让用户跳过必填信息
• 点击“继续”后没有任何可见响应
• 只靠颜色标示当前步骤
• 进度条虚报进度，先跳后卡

参考案例

• Fat Brain Toys：多步结账中每个步骤都有清晰描述性标签
• Away：进度指示器可点击，方便用户跳回前序步骤修改
• OBI：提交支付时出现加载指示器，前后步骤在页脚上方可见