Progress Indicator 進度指示器
概述
進度指示器是一種用於顯示操作過程中進度的元件，用於直觀地顯示任務或操作的進度，讓使用者了解任務進展情況、預估完成時間，並在等待過程中提供即時回饋，減少不確定性，提升使用者體驗。
使用時機
進度指示器常用於以下情境：
- 檔案上傳/下載：顯示檔案處理進度。
- 長時間操作：例如安裝軟體、載入資料等。
- 多步驟任務的完成進度：提供逐步完成情況的視覺回饋。
使用規範
當您取用進度指示器元件進行設計時，應考慮以下原則：
- 清晰易懂：進度指示器的樣式應清晰易懂，讓使用者一眼就能了解進度的狀態。
- 輔助文字（選擇性）：在進度指示器旁邊提供輔助文字，說明進度的具體含義。
設計範例
線性進度指示器 (Linear Progress Indicator)
以水平線性形式顯示進度。
![]()
- 軌道 (Track)：表示進度的總長度。
- 進度條 (Progress Bar)：表示已完成的進度部分。
- 進度文字 (Progress Text)（選擇性）：顯示進度的百分比或剩餘時。
圓形進度指示器 (Circular Progress Indicator)
以圓形或環形圖的形式顯示進度。
![]()
- 軌道 (Track)：表示進度的總長度，為一個圓環。
- 進度條 (Progress Bar)：表示已完成的進度部分，為一個扇形。
- 進度文字 (Progress Text)（選擇性）：顯示進度的百分比或剩餘時間。
進度顯示方式（線性、圓形皆適用）
- 確定/明確進度 (Determinate)：可量化的進度，顯示為百分比或剩餘時間。
- 0%：進度條為空、無填充。
- 1%-99%：進度條依比例填充。
- 100%：進度條完全填充，表示任務完成。
- 未定進度 (Indeterminate)：無法量化的進度，通常以「動畫形式」表示任務正在進行中。
- 線性進度指示器：使用左右移動的動畫。
- 圓形進度指示器：使用圓形持續旋轉的動畫。
無論哪種進度顯示方式，進度條皆應在以下進度變化時，顯示對應的狀態提示：
- 進度更新：當任務進度發生變化時，進度指示器應即時更新。
- 完成：當任務完成時，進度指示器應顯示 100%或完成狀態。
- 錯誤：當任務發生錯誤時，進度指示器應顯示錯誤狀態或訊息。
