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

【翻譯】
移動步進度欄
如果有很多步驟，或者在過程中需要插入的步驟（基于對早期步驟的響應），請使用進度條。

**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