跳到主要内容

Steps 分步表单

指将一个复杂的表单拆分成多个步骤来填写,以降低用户填写表单的心理负担和操作难度,提高表单提交的成功率。


用户场景

用户需要填写一个包含多个字段和信息的复杂表单,这个表单可能会包含不同的字段类型,例如文本框、下拉框、单选框等。

设计目标

将复杂的表单分步展示,以降低用户心理负担和操作难度,提高表单提交成功率,提升用户体验。

设计策略

将表单的各个字段根据其相关性和操作难度分成多个步骤进行展示,通过进度条等方式引导用户填写,让用户能够清晰地了解自己已经完成了哪些步骤,并可以随时查看前面步骤的填写情况。

设计方案

  • 将表单拆分成多个步骤进行填写,每个步骤之间使用进度条等方式进行连接,以提示用户填写进度和状态。
  • 在每个步骤中,将相关的字段和信息进行分组,以便用户更好地理解和操作。
  • 在每个步骤中,提供清晰明了的提示和帮助,以指导用户正确填写表单。

设计原则

在设计分步表单时,需要注意以下原则:

清晰明了

对于每个步骤,需要提供清晰明了的指导和提示,以帮助用户正确填写表单。

逐步展示

逐步展示表单的各个字段和信息,让用户能够集中注意力并轻松完成填写。

适当分组

根据表单的不同字段类型和相关性,适当分组,以便用户更好地理解和操作。

进度提示

使用进度条等方式提示用户填写进度和状态,以便用户清楚自己已经完成了哪些步骤和哪些字段的填写。

设计布局

分步表单可以放置在多种类型的容器中,最常见的三种是——页面分步、侧边面板或模态弹窗。

页面分步

当数据输入(如表单)复杂或冗长时使用。

侧边面板

当用户需要参考页面上的信息时使用。当水平进度指示器中的步骤过多时,也可以使用它。

模态弹窗

用于关键和不常见的请求以及只有大约 5 个字段的小型表单,它们也可用于将数据输入补充到整页表单中。模态不应相互堆叠。