Steppers - 步进

Steppers convey progress through numbered steps.

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Steppers may display a transient feedback message after a step is saved.

【翻译】
步进通过编号步骤传达进展。
步进器通过一系列逻辑和编号步骤显示进度。它们也可用于导航。
步进可以在保存步骤之后显示瞬时反馈消息。

Types of Steps - 步骤类型

Editable
Non-editable
Mobile
Optional

【翻译】
可编辑
不可编辑
移动
可选的

Types of Steppers - 步进类型

Horizontal
Vertical
Linear
Non-linear

【翻译】
水平
垂直
线性
非线性

Usage - 用法

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.

【翻译】
步进器通过将序列拆分成多个逻辑和编号步骤来显示进度。

[图片上传失败...(image-6712f9-1552294246822)]
Steppers should be used when a field determines a subsequent field.

【翻译】
当字段确定后续字段时，应使用步进器。

Active stepper circle - 活动步进圈

24dp x 24dp
12sp Roboto Regular
Inherits primary color
Default color is Google Blue 500

【翻译】
24dp x 24dp
12sp Roboto常规
继承原色
默认颜色为Google Blue 500

Active step - 活动步

14sp Roboto Medium
87% black

【翻译】
14sp Roboto Medium
87％黑色

Connector line - 连接线

1dp border
Grey 400 color value

【翻译】
1dp边框
灰色400颜色值

Inactive stepper circle - 非活动步进圈

24dp x 24dp
12sp Roboto Regular
100% white
38% black

【翻译】
24dp x 24dp
12sp Roboto常规
100％白色
38％黑色

Inactive steps - 非活动步骤

14sp Roboto Regular
38% black

【翻译】
14sp Roboto常规
38％黑色

Avoid using steppers to break up sections in a short form, or multiple times on one page.

【翻译】
避免使用步进器以短格式分割节，或在一页上多次分割节。

[图片上传失败...(image-a65af8-1552294246822)]
Don't.
Don’t embed steppers within steppers or use multiple steppers on one page.

【翻译】
错误的示范
不要在步进器中嵌入步进器或在一页上使用多个步进器。

Types of steps - 步骤类型

Editable steps - 可编辑的步骤

Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.

【翻译】

可编辑的步骤允许用户稍后返回以编辑步骤。这些是理想的工作流涉及会话中的编辑步骤。

image

Editable steps can be edited within a session.

【翻译】
可以在会话中编辑可编辑的步骤。

**Non-editable steps - 不可编辑的步骤 **

Non-editable steps should be used when:

Users cannot edit a step later
Step editing poses a distraction risk to form completion

【翻译】
在以下情况下应使用不可编辑的步骤：
用户以后无法编辑步骤
步骤编辑带来分心的风险，形成完成

image

Non-editable steps cannot be edited once completed.

【翻译】
不可编辑的步骤一旦完成就无法编辑。

Mobile steps - 移动步骤

[图片上传失败...(image-d20c92-1552294246822)]
Mobile step text
Steps displayed at the top in text

【翻译】
移动步骤文本
显示在文本顶部的步骤

[图片上传失败...(image-1d1b1c-1552294246822)]
Mobile step dots
Use dots when the number of steps isn’t large.

【翻译】
移动步骤点
当步数不大时使用点。

image
Mobile step progress bar
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).

【翻译】
移动步进度栏
如果有很多步骤，或者在过程中需要插入的步骤（基于对早期步骤的响应），请使用进度条。

**Optional steps - 可选步骤 **

Optional steps within a linear flow should be marked as optional.

【翻译】
线性流中的可选步骤应标记为可选。

[图片上传失败...(image-6c3ffe-1552294246822)]
Mark optional steps in linear flows as optional.
Optional steps
12sp Roboto Regular
54% black

【翻译】
将线性流中的可选步骤标记为可选。
可选步骤
12sp Roboto 常规
54％黑色

Types of steppers - 步进机的类型

Horizontal steppers - 水平步进

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Avoid using long step names in horizontal steppers.

【翻译】
当一个步骤的内容取决于较早的步骤时，水平步进器是理想的。 避免在水平步进中使用长步名称。

[图片上传失败...(image-35d25c-1552294246822)]
On horizontal steppers, the step name and numbers appear on a horizontal bar, which can be fixed to the top of the page when scrolling down.

【翻译】
在水平步进器上，步骤名称和数字显示在水平条上，当向下滚动时，可以将其固定在页面顶部。

Vertical steppers - 垂直步进

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.

【翻译】
垂直步进器设计用于窄屏幕尺寸。它们是移动的理想选择。

image

Vertical steppers can be used in mobile as-is. Simply ensure that the contents for each step are responsive.

【翻译】
垂直步进器可以直接用于移动。只需确保每个步骤的内容是响应。

Linear steppers - 线性步进

Linear steppers require users to complete one step in order to move on to the next.

【翻译】
线性步进器需要用户完成一个步骤才能移动到下一步。

image

Each linear step must be completed before proceeding to the next one.

【翻译】
每个线性步骤必须在继续下一个步骤之前完成。

Non-linear steppers - 非线性步进器

Non-linear steppers allow users to enter a multi-step flow at any point.

【翻译】
非线性步进器允许用户在任何点输入多步骤流。

[图片上传失败...(image-75f666-1552294246822)]
Non-linear steps may be completed in any order.
Inactive stepper circle
24dp x 24dp
12sp Roboto Regular
Text 100% white
38% black

Inactive steps
14sp Roboto Regular
54% black

【翻译】
非线性步骤可以以任何顺序完成。
非活动步进圈
24dp x 24dp
12sp Roboto常规
文字100％白色
38％黑色
非活动步骤
14sp Roboto常规
54％黑色

Alternative labels - 替代标签

image

Alternative label placement

【翻译】
替代标签放置

[图片上传失败...(image-edec69-1552294246822)]
Alternative label placement with an optional step

【翻译】
可选步骤的替代标签放置

Stepper feedback - 步进反馈

Steppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps.

【翻译】
步进可以在保存步骤之后显示瞬时反馈消息。只有在步骤之间存在长延迟时，才应使用步进反馈。

This stepper displays a transient feedback message after a step is saved.

【翻译】
此步进器在保存步骤后显示瞬时反馈消息。

Specs - 规格

Standard stepper - 标准步进

[图片上传失败...(image-47a107-1552294246822)]
Step height: 72dp
Icon top, bottom, and left padding: 24dp
Icon right padding: 8dp

【翻译】
步高：72dp
图标顶部，底部和左边填充：24dp
图标右边填充：8dp

Optional step - 可选步骤
[图片上传失败...(image-8a28a2-1552294246822)]
Step height: 72dp
Icon left and right padding: 8dp
Label right padding: 8dp

【翻译】
步高：72dp
图标左右填充：8dp
标签右边填充：8dp

Multi-line error state - 多行错误状态

Alternative label - 替代标签
[图片上传失败...(image-211a7d-1552294246822)]
Step height: 104dp
Icon left and right padding: 8dp
Label top padding: 16dp
Icon and label padding from edge: 24dp

【翻译】
步高：104dp
图标左右填充：8dp
标签顶部填充：16dp
图标和标签填充从边缘：24dp

image

Alternative label placement with optional step
Icon left and right padding: 8dp
Step left and right padding: 16dp
Label bottom padding: 24dp
Icon and label padding from screen edge: 24dp

【翻译】
可选步骤的替代标签放置
图标左右填充：8dp
步骤左，右填充：16dp
标签底部填充：24dp
图标和标签填充从屏幕边缘：24dp

image

Alternate label placement error state

【翻译】
备用标签放置错误状态

Non-linear steppers - 非线性步进器

Hover and pressed states

【翻译】
悬停和按下状态

[图片上传失败...(image-923100-1552294246822)]
Hover

【翻译】
徘徊

image

Hover

【翻译】
徘徊

[图片上传失败...(image-e006ef-1552294246822)]
Pressed

【翻译】
按下

[图片上传失败...(image-166d59-1552294246822)]
Pressed

【翻译】
按下

Background - 背景
6% black

【翻译】
6％黑色

Stepper circle - 步进圈
24dp x 24dp
12sp Roboto Regular
Text 100% white
38% black

【翻译】
24dp x 24dp
12sp Roboto常规
文字100％白色
38％黑色

Vertical steppers - 垂直步进

[图片上传失败...(image-92f9c2-1552294246822)]
Vertical stepper, with sub-steps
Icon left padding: 24dp
Icon alignment with label: Center vertical
Icon top and bottom padding: 8dp
Label top padding: 24dp
Label bottom padding: 16dp
Vertical space between steps: 48dp
Button height: 48dp
Button top padding: 16dp

【翻译】
垂直步进，具有子步骤
图标左边填充：24dp
图标与标签对齐：垂直居中
图标顶部和底部填充：8dp
标签顶部填充：24dp
标签底部填充：16dp
步骤之间的垂直间距：48dp
按钮高度：48dp
按钮顶部填充：16dp

image

Example of a vertical stepper

【翻译】
垂直步进器示例

Mobile steppers - 移动设备步进

image

Icon top and bottom padding: 8dp
Label top padding: 24dp
Label button padding (no sublabel): 16dp
Vertical space below inactive step: 40dp
Vertical space below active step: 48dp
Button height: 48dp

【翻译】
图标顶部和底部填充：8dp
标签顶部填充：24dp
标签按钮填充（无子标签）：16dp
无效步骤下的垂直空间：40dp
活动步幅以下的垂直间距：48dp
按钮高度：48dp