步进器通过对步骤编号来展示进度。
步进器通过将流程分解为编号的逻辑步骤来显示进度。它们也可用于导航。
步进器在某个步骤被保存后,可以显示短暂的反馈信息。
步骤类型
可编辑步骤
不可编辑步骤
移动端
可选
步进器类型
水平
垂直
线性
非线性

步进器通过将流程分解为编号的逻辑步骤来显示进度。它们也可用于导航。
步进器在某个步骤被保存后,可以显示短暂的反馈信息。
可编辑步骤
不可编辑步骤
移动端
可选
水平
垂直
线性
非线性

步进器通过将流程分解为编号的逻辑步骤来显示进度。

当后续步骤的内容依赖于前序步骤时,应使用步进器。
激活的步骤指示器
激活的步骤
步骤连接线
非活动步骤指示器
非活动步骤
避免使用步进器来分隔较短的表单,或在一个页面中使用多个步进器。

不推荐做法
不要在步进器中嵌套步进器,或在一个页面中使用多个步进器。
可编辑步骤允许用户在稍后返回到之前的步骤进行编辑。最适合需要在同一会话中编辑步骤的工作流。

可编辑步骤可以在同一会话中进行编辑。
不可编辑步骤适用于以下情况:

不可编辑步骤一旦完成后便无法修改。

移动端步骤的文本
步骤以文本形式显示在顶部

移动端步骤点
当步骤数量不多时使用点。

移动端步骤进度条
如果有很多步骤,或过程中需要插入步骤(基于对先前步骤的响应),请使用进度条。
线性流程中的可选步骤应标记为可选。

将线性流程中的可选步骤标记为可选。
可选步骤
当一个步骤的内容依赖于前一个步骤时,适合使用水平步进器。
避免在水平步进器中使用较长的步骤名称。

在水平步进器上,步骤名称和编号显示在水平条上,在页面向下滚动时,可将其固定在页面顶部。
垂直步进器专为窄屏幕设计,非常适合移动端。

垂直步进器可直接在移动端使用。只需确保每个步骤的内容具备响应式布局。
线性步进器要求用户完成当前步骤后才能继续下一步。

每个线性步骤都必须在继续下一步之前完成。
非线性步进器允许用户从任意步骤进入多步骤流程。

非线性步骤可以按任意顺序完成。
非活动步骤指示器
非活动步骤

替代标签位置

包含可选步骤的替代标签位置
步进器在某个步骤被保存后,可以显示短暂的反馈信息。仅在步骤间存在较长延迟时才应使用步进器反馈。
此步进器在保存步骤后会显示短暂的反馈信息。

标准步进器72dp
步进器高度:24dp
图标上、下、左侧内边距:8dp

步进器高度:72dp
图标左右两侧内边距:8dp
标签右侧内边距:8dp


步进器高度:104dp
图标左右两侧内边距:8dp
标签顶部内边距:16dp
图标和标签距边缘的内边距:24dp

含可选步骤的替代标签位置
图标左右两侧内边距:8dp
步骤左右两侧内边距:16dp
标签底部内边距:24dp
图标和标签距屏幕边缘的内边距:24dp

替代标签位置的错误状态
悬停和按下状态

悬停

悬停

按下

按下
背景色
步骤指示器

垂直步进器,包含子步骤
图标左侧内边距:24dp
图标与标签对齐方式:垂直居中对齐
图标上下两侧内边距:8dp
标签顶部内边距:24dp
标签底部内边距:16dp
步骤间的垂直间距:48dp
按钮高度:48dp
按钮顶部内边距:16dp

垂直步进器示例

图标上下两侧内边距:8dp
标签顶部内边距:24dp
标签按钮间距(无子标签时):16dp
未激活步骤下方的垂直间距:40dp
激活步骤下方的垂直间距:48dp
按钮高度:48dp