分步表单

内容较多、录入内容的方式差异较大，一般通过添加分步导航展示内容。

常用于会员注册、身份认证等场景。

---

页面结构

1.步骤条：固定于标题栏下方，引导用户按照流程完成任务。

2.表单区域：整个流程请使用统一的表单样式，不打乱用户操作，流畅的走完全部流程。

3.按钮区域：用户完成当前步骤后，进行提交、下一步、上一步的操作。

区块分解

头部

始终固定在头部的导航栏和步骤条。

内容

表单样式统一，可按字段类型将表单进行分组，方便用户填写。

第一步骤

中间步骤

底部

可根据当前页面内容选择使用吸底按钮或表单底部按钮。

交互规则

• 可点击步骤条中上一个步骤标签或点击底部区域中的上一步按钮修改编辑页面表单。
• 在切换步骤时，应自动保存当前步骤已输入的内容。

何时使用

• 表单内容及字段较多。
• 表单内容前后步骤的逻辑关系时。
• 交互逻辑较多的编辑填写（比如：所编辑的内容包含文本、选择、附件上传、图片上传等）

设计指南

• 导航命名：步骤名称尽量简洁保持在 5 个字以内，超过换行，各步骤名称描述方式保持统一。
• 步骤条：建议在 3-5 步之内，高亮当前步骤，完成的步骤图标由数字转换成打勾 icon。
• 内容校验：点击下一步时，需校验本步骤内容，校验不通过则无法进行下一步。