组件 步进器

步进器

步进器通过对步骤编号来展示进度。

步进器通过将流程分解为编号的逻辑步骤来显示进度。它们也可用于导航。

步进器在某个步骤被保存后,可以显示短暂的反馈信息。

步骤类型

可编辑步骤
不可编辑步骤
移动端
可选

步进器类型

水平
垂直
线性
非线性

Material Design 中的步进器通过编号步骤显示进展

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

Material Design 中用于指示依赖字段选择的步进器

当后续步骤的内容依赖于前序步骤时,应使用步进器。

激活的步骤指示器

  • 24dp x 24dp
  • 12sp Roboto Regular
  • 使用应用主色
  • 默认颜色为 Google Blue 500

激活的步骤

  • 14sp Roboto Medium
  • 87% black

步骤连接线

  • 边框:1dp
  • 颜色值:Grey 400

非活动步骤指示器

  • 24dp x 24dp
  • 12sp Roboto Regular
  • 100% 白色
  • 38% 黑色 38%

非活动步骤

  • 14sp Roboto Regular
  • 38% 黑色 54%

避免使用步进器来分隔较短的表单,或在一个页面中使用多个步进器。

Material Design 中应避免嵌套步进器

不推荐做法

不要在步进器中嵌套步进器,或在一个页面中使用多个步进器。

步骤类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

可编辑步骤

可编辑步骤允许用户在稍后返回到之前的步骤进行编辑。最适合需要在同一会话中编辑步骤的工作流。

Material Design 中可在一会话内编辑的步骤

可编辑步骤可以在同一会话中进行编辑。

不可编辑步骤

不可编辑步骤适用于以下情况:

  • 用户之后无法编辑步骤
  • 允许编辑步骤会分散用户注意力,影响表单的完成。
Material Design 中完成后不可编辑的步骤

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

移动端步骤

Material Design 移动端步骤文本显示

移动端步骤的文本

步骤以文本形式显示在顶部

Material Design 移动端步骤点(适用于较少步骤)

移动端步骤点

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

Material Design 移动端步骤进度条(适用于多个步骤)

移动端步骤进度条

如果有很多步骤,或过程中需要插入步骤(基于对先前步骤的响应),请使用进度条。

可选步骤

线性流程中的可选步骤应标记为可选。

Material Design 线性流程中的可选步骤

将线性流程中的可选步骤标记为可选。

可选步骤

  • 12sp Roboto Regular
  • 54% 黑色 54%

步进器类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

水平步进器

当一个步骤的内容依赖于前一个步骤时,适合使用水平步进器。

避免在水平步进器中使用较长的步骤名称。

Material Design 中的水平步进器

在水平步进器上,步骤名称和编号显示在水平条上,在页面向下滚动时,可将其固定在页面顶部。

垂直步进器

垂直步进器专为窄屏幕设计,非常适合移动端。

Material Design 中的垂直步进器

垂直步进器可直接在移动端使用。只需确保每个步骤的内容具备响应式布局。

线性步进器

线性步进器要求用户完成当前步骤后才能继续下一步。

Material Design 中的线性步进器

每个线性步骤都必须在继续下一步之前完成。

非线性步进器

非线性步进器允许用户从任意步骤进入多步骤流程。

Material Design 中的非线性步进器

非线性步骤可以按任意顺序完成。

非活动步骤指示器

  • 24dp x 24dp
  • 12sp Roboto Regular
  • 文本:白色
  • 38% 黑色 54%

非活动步骤

  • 14sp Roboto Regular
  • 54% 黑色 54%

替代标签布局

Material Design 步进器中的替代标签布局

替代标签位置

Material Design:替代标签位置选项

包含可选步骤的替代标签位置

步进器反馈

步进器在某个步骤被保存后,可以显示短暂的反馈信息。仅在步骤间存在较长延迟时才应使用步进器反馈。

此步进器在保存步骤后会显示短暂的反馈信息。

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

标准步进器

Material Design 标准步进器规格

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

可选步骤

Material Design 可选步骤步进器规格

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

多行错误状态

Material Design 多行错误状态规格

替代标签布局

Material Design 替代标签布局规格

步进器高度:104dp

图标左右两侧内边距:8dp
标签顶部内边距:16dp
图标和标签距边缘的内边距:24dp

Material Design:含可选步骤的替代标签位置规格

含可选步骤的替代标签位置

图标左右两侧内边距:8dp
步骤左右两侧内边距:16dp
标签底部内边距:24dp

图标和标签距屏幕边缘的内边距:24dp

Material Design 替代标签位置的错误状态规格

替代标签位置的错误状态

非线性步进器

悬停和按下状态

Material Design 非线性步进器悬停状态(水平)

悬停

Material Design 非线性步进器悬停状态(垂直)

悬停

Material Design 非线性步进器按下状态(水平)

按下

Material Design 非线性步进器按下状态(垂直)

按下

背景色

  • 6% 黑色 54%

步骤指示器

  • 24dp x 24dp
  • 12sp Roboto Regular
  • 文本:白色
  • 38% 黑色 54%

垂直步进器

Material Design 中的垂直步进器(含子步骤)

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

Material Design 垂直步进器示例

垂直步进器示例

移动端步进器

Material Design 移动端步进器

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