组件 步进器

步进器

步进器利用步骤数来表示进程。

步进器按顺序和步骤来显示任务进程,有时候也可以用做导航。

步进器可以在保存上一步后显示临时的反馈信息。

步骤类型

可编辑
不可编辑
手机端
可选的

步进器类型

水平
垂直
线性
非线性

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

步进器将进程分解成多个逻辑和步骤来展示。

步进器应对用于上一步会对下一步产生影响的进程。

激活的步进圈 Active stepper circle

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

激活的步骤

  • 14sp Roboto Medium
  • 87% black

连接线

  • 1dp 粗细
  • 颜色为 Grey 400

未激活的步进圈

  • 24x24dp
  • 12sp Roboto Regular
  • 100% white
  • 38% black

未激活的步骤

  • 14sp Roboto Regular
  • 38% black

避免使用步进器来拆分较短的表单,也不要在页面中使用多个步进器。

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

步骤类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

可编辑步骤

可编辑步骤允许用户在稍后返回到之前的步骤重新编辑。适合在会话中需要编辑步骤的流程。

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

不可编辑步骤

不可编辑步骤适用于:

  • 不允许用户返回之前的步骤进行编辑
  • 编辑步骤会对已完成的表单产生风险

不可编辑步骤一旦完成后就不允许修改

手机端步骤

手机端步骤的文本

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

手机端步骤点

步数不多时可以使用指示点。

手机端进度条步骤

如果步骤太多,或在过程中需要插入一些步骤(基于对前一个步骤的响应),请使用进度条。

可选步骤

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

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

可选步骤

  • 12sp Roboto Regular
  • 54% black

步进器类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

水平步进器

当步骤的内容取决于上一步时,适合使用水平步进器。

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

水平步进器的步数和名称显示在水平栏中,页面滚动时可以将水平栏固定在顶部。

垂直步进器

垂直步进器是为窄屏幕设计,适用于手机端。

垂直步进器可以在手机端使用,只需确保每步的内容是响应式的。

线性步进器

线性步进器需要用户完成一步后才能移动到下一步。

每个线性步骤都必须完成后才能继续下一步。

非线性步进器

非线性步进器允许用户直接跳到任何步骤。

非线性步进器可以以任意顺序完成。

未激活的步进圈

  • 24x24dp
  • 12sp Roboto Regular
  • 文本:100% white
  • 38% black

未激活的步骤

  • 14sp Roboto Regular
  • 54% black

独立标签

独立标签的位置

带可选步骤的独立标签

步进器反馈

步进器可以在保存上一步后显示临时的反馈信息。只有在步骤间有加载时间时才使用步进器反馈。

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

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

标准步进器

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

可选步骤

步骤高度:72dp
图标左右边距:8dp
标签右边距:8dp

多行错误状态

独立标签

步骤高度:104dp

图标左右边距:8dp
标签上边距:16dp
图标和标签距离屏幕边缘:24dp

带可选步骤的独立标签

图标左右边距:8dp
步骤左右边距:16dp
标签下边距:24dp

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

独立标签显示错误状态

非线性步进器

鼠标悬停和按下状态

鼠标悬停

鼠标悬停

按下

按下

背景色

  • 6% black

步进圈

  • 24x24dp
  • 12sp Roboto Regular
  • 文本:100% white
  • 38% black

垂直步进器

垂直步进器,连同下个步骤
图标左边距:24dp
图标与标签垂直居中对齐
图标上下边距:8dp
标签上边距:24dp
标签下边距:16dp
步骤垂直间距:48dp
按钮高度:48dp
按钮上边距:16dp

垂直步进器示例

手机端步进器

图标上下边距:8dp
标签上边距:24dp
标签按钮间距(无子标签):16dp
未激活步骤距离激活步骤的下边距:40dp
激活步骤间的下边距:48dp
按钮高度:48dp