系統回饋

Progress Indicator|進度指示器

以比例或狀態回報一件正在進行工作的完成程度;它不告訴使用者每個流程步驟的內容。

常見俗稱:進度指示器、進度條、完成比例、Progress Indicator

60 秒決策

先確認使用者要完成的事。

適合使用

  • 系統能知道一件工作已完成的比例、份數或處理階段。
  • 使用者等待處理、上傳、檢核或背景工作時需要確認沒有卡住。

不適合使用

  • 需要讓使用者理解多步驟任務的名稱與可回退位置。
  • 沒有可合理估計的百分比,卻硬顯示假精確數字。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

比例和文字一起出現

50% 旁邊說明「已完成 2 / 4 項」或目前正在處理什麼,避免只有一條不明所以的藍線。

可確定與不確定分開

知道總數時才顯示百分比;不知道時以不確定狀態說明正在處理。

進度條不是流程圖

它回答完成多少,不能取代 Stepper 對每一步名稱與位置的說明。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

可確定進度

已知總數與目前完成量,百分比與文字同步更新。

完成

顯示 100% 與完成結果,不讓使用者猜工作是否還在跑。

無法估計

不假裝有 63%;改說明目前正在處理的工作與可採取的下一步。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 文件檢核完成度

    先觀察:文件檢核只需要回報完成比例;它不應取代申請流程的四個步驟。

    操作:按「完成下一項檢核」直到完成。

    預期結果:進度條、50% 文字、已完成份數與完成訊息同步更新。

可操作 Demo

完成比例和流程步驟要分開看。

文件檢核

已完成 2 / 4 項,50%
50%

還有 2 項文件待確認。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的文件檢核區加入 Progress Indicator,顯示「已完成 2 / 4 項,50%」。使用原生 progress 或 role="progressbar",提供可讀文字、現在值與最大值。當完成項目增加時同步更新百分比;若總數未知,改用不確定進度並說明正在處理什麼。不要用單一進度條取代帳號申請的 Stepper。

驗收清單

不要只確認欄位能不能點。

  • 是否同時顯示比例與可讀說明?
  • 確定與不確定進度是否分開?
  • 進度值是否有語意化 progressbar 或原生 progress?
  • 完成與失敗後是否有下一步訊息?
  • 是否沒有拿進度條取代 Stepper?