Steps 分步表单
指将一个复杂的表单拆分成多个步骤来填写,以降低用户填写表单的心理负担和操作难度,提高表单提交的成功率。
用户场景
用户需要填写一个包含多个字段和信息的复杂表单,这个表单可能会包含不同的字段类型,例如文本框、下拉框、单选框等。
设计目标
将复杂的表单分步展示,以降低用户心理负担和操作难度,提高表单提交成功率,提升用户体验。
设计策略
将表单的各个字段根据其相关性和操作难度分成多个步骤进行展示,通过进度条等方式引导用户填写,让用户能够清晰地了解自己已经完成了哪些步骤,并可以随时查看前面步骤的填写情况。
设计方案
- 将表单拆分成多个步骤进行填写,每个步骤之间使用进度条等方式进行连接,以提示用户填写进度和状态。
- 在每个步骤中,将相关的字段和信息进行分组,以便用户更好地理解和操作。
- 在每个步骤中,提供清晰明了的提示和帮助,以指导用户正确填写表单。
设计原则
在设计分步表单时,需要注意以下原则:
清晰明了
对于每个步骤,需要提供清晰明了的指导和提示,以帮助用户正确填写表单。
逐步展示
逐步展示表单的各个字段和信息,让用户能够集中注意力并轻松完成填写。
适当分组
根据表单的不同字段类型和相关性,适当分组,以便用户更好地理解和操作。
进度提示
使用进度条等方式提示用户填写进度和状态,以便用户清楚自己已经完成了哪些步骤和哪些字段的填写。
设计布局
分步表单可以放置在多种类型的容器中,最常见的三种是——页面分步、侧边面板或模态弹窗。
页面分步
当数据输入(如表单)复杂或冗长时使用。
侧边面板
当用户需要参考页面上的信息时使用。当水平进度指示器中的步骤过多时,也可以使用它。
模态弹窗
用于关键和不常见的请求以及只有大约 5
个字段的小型表单,它们也可用于将数据输入补充到整页表单中。模态不应相互堆叠。