進度指標

進度指標會顯示已知或未知程序時間的狀態。

設計元素應錨定在畫面底部。

原則

清楚的回饋:進度指標會立即提供回饋。

一致性:所有進度指標都應採用相同的核心視覺語言,方便使用者立即辨識。

彈性:多種進度指標和狀態可彈性傳達進度。

用量和刊登位置

進度指標會即時顯示程序的狀態。

指標可以表示確定的進度,並顯示已知的程序時間,例如計時器。

或是進度不確定,處理時間不明,例如載入。

使用不確定的進度指標,顯示未知的處理時間,例如載入。
如果處理時間不明,請使用確定性指標。這會讓使用者誤以為進度正在進行。
如果時間或進度充足,請一次只顯示一個進度指標。
過度使用進度指標,或是在沒有足夠時間和進度可傳達時使用。

圖解

進度解剖結構

1. 確定性進度停止 - 顯示明確的端點。
2. 目前進度
3. 未來進展
4. 不確定的處理程序
5. 線性
6. 圓形

自訂

除了確定和不確定之外,進度指標也有線性、圓形和波浪形變化。

進度解剖結構

1. 波浪
2. 線性

進度指標的所有波浪和線性變體都共用相同的屬性、自訂選項和預設值。下表說明這些詳細資料。

線性

屬性 自訂 預設值
粗細 6 dp
指標顏色 主要
軌跡顏色 外框
大小 360 dp

圓形

屬性 自訂 預設值
粗細 6 dp
指標顏色 主要
軌跡顏色 外框
大小 40 dp