步骤条怎么设计？当前进度、可回退与错误提示

步骤条用于告诉用户流程位置和可用下一步。设计前先写出每一步的进入条件与完成条件，再决定哪些步骤可以回退或跳转。涉及表单交互时，用在线原型设计把正常、回退和校验失败路径连起来，评审会比只看一条进度线更准确。

先给每个状态一个明确含义

线性、可跳转与可选步骤

开户、支付等依赖前一步数据的流程应采用线性步骤条，只有完成校验才开放下一步。资料补充类流程可以允许回到已完成步骤，但跳转到未满足条件的步骤时要解释原因。可选步骤用“可跳过”标记，不要把它伪装成已经完成。

回退时保留什么，重新校验什么

用户从确认页返回修改地址后，已经填好的其他资料通常应保留；依赖地址的运费或税费则需要重新计算。按钮文案要说明“返回修改”，不要使用可能被理解为放弃流程的“上一步”。

错误定位放在步骤和字段两层

提交时发现多个错误，可以在步骤条节点显示错误数量，并在页面顶部给出首个错误摘要。点击摘要应把焦点移到对应字段；修复后错误数量同步减少。不要只把步骤节点染红却不说明哪一项需要行动。

窄屏下保留当前位置

手机上可以使用“第 2 步 / 共 4 步”加标题，或将步骤节点横向滚动，但当前步骤必须始终可见。若用户通过浏览器返回键离开，要在再次进入时说明草稿是否保留。

最后让原型走一次“填写—校验失败—回退—修改—确认”的完整路径，检查每一条连接都对应真实状态而不是装饰动画。

步骤完成条件要可验证

每一步都写出进入条件、必填字段、校验时机和离开条件。资料填写页可以允许暂存，但确认页必须重新校验关键字段；如果外部服务返回错误，应把错误归属到具体步骤，而不是让整个步骤条回到第一步。

对于可选步骤，使用“跳过此步”并说明之后在哪里补充；对于不可回退的支付步骤，进入前显示不可撤销的提示。步骤条节点的点击权限应与按钮权限一致，避免节点看起来可点，实际却没有反馈。

用资料提交流程验证

假设流程分为基本信息、资质上传、联系人确认和提交。用户在第二步上传失败后，步骤条显示错误数量并保留已选文件；返回第一步修改公司名称时，第二步文件仍保留，但需要重新确认文件与名称的关联。

评审问题

• 当前节点是否能在桌面和手机上被快速定位？
• 回退后哪些数据保留、哪些数据需要重新计算？
• 跳转到未完成步骤时，界面是否解释阻断原因？
• 错误修复后，步骤节点、页面摘要和按钮状态是否同时更新？

暂存与离开流程

长流程常常允许暂存。离开当前页面时，提示应说明已保存到哪一步、哪些内容仍需完成；再次进入时，步骤条从最近有效步骤开始，而不是把用户送回首页。自动保存失败要有重试和手动保存入口，不能以“已保存”覆盖不确定结果。

如果流程中途改变了业务条件，例如选择的产品类型影响后续字段，步骤条应标记需要重新确认的步骤。返回上一步后，依赖旧条件的数据可以清空，但要先解释影响，给用户一次取消机会。

在产品评审中，重点观察用户能否回答“我在哪一步、还差什么、回退会不会丢东西”。这三句话比节点颜色更能检验步骤条是否有效。

交互标注与异常回退

标注每个节点的可点击条件、完成条件和错误数量来源。若步骤条支持鼠标点击，也要说明键盘焦点和禁用状态。连接线只表达顺序，不代表请求已经完成；提交成功后再把节点从当前变为已完成。

对于有上传、审核或外部支付的步骤，定义等待态和可离开态。用户离开等待页时，回来可以查询状态，而不是再次发起请求。错误消息贴近节点和字段，避免用户只能重新从第一步开始。

将步骤条状态与页面标题、浏览器历史和埋点命名保持一致，后续分析才能知道用户在哪一步离开或回退。

让每一步能独立完成

步骤页标题、主按钮和帮助文案都应指向当前任务。按钮写“保存并继续”还是“提交审核”，取决于下一步是否可以回退；不要每一步都写成“下一步”。完成步骤的摘要可放在节点或页面顶部，帮助用户确认之前的输入。

如果用户需要等待后台审核，步骤条可以进入“处理中”但不把它标成已完成。提供查看详情、离开并稍后回来等动作；审核失败则返回具体资料步骤，不让用户从头重复。

将步骤条与埋点事件按节点命名，记录进入、完成、回退和错误。这样上线后可以发现用户集中在哪一步退出，再决定是否优化表单或说明。

交付时区分流程与页面

步骤条本身只表达流程位置，页面仍要负责保存、校验和提交。交付说明把节点状态、按钮动作、返回键行为和浏览器历史分别列出，避免实现者把节点点击误作提交。

用一组真实但不敏感的资料贯穿原型，确认回退、暂存和恢复时页面标题与节点名称一致。

用路径表检查回退

路径表至少包含首次进入、暂存离开、浏览器返回、校验失败、审核等待和重新进入。每一格写清当前步骤、保留数据和主按钮，交付后按路径表回归，避免只测试顺利完成。

给评审者一组可操作数据

演示步骤条时不要只展示空表单。准备一份已填写但待校验的资料、一份上传失败的资料和一份已经提交的资料，分别走前进、回退和重新进入。评审者才能判断节点状态、页面数据和按钮动作是否真的同步。

把每种路径的预期结果写在画板下方，便于开发和测试对照。路径完成后再补充埋点和帮助文案，避免把流程说明埋进视觉细节。

设计交付时还要写明哪些字段由页面负责、哪些由服务端返回，以及页面离开后如何查询状态。把这些边界放到节点说明旁，能减少开发和产品对“完成”的不同理解。