檔案上傳

Upload Progress|上傳進度

讓使用者知道單一檔案正在上傳多少、能否暫停或取消,以及失敗後怎麼處理。

常見俗稱:上傳進度、進度條、Upload Progress、上傳百分比

60 秒決策

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

適合使用

  • 一個檔案需要較長傳輸時間,使用者必須知道等待是否正常。
  • 需要提供暫停、繼續、取消或失敗重試。

不適合使用

  • 多檔案結果需要逐筆管理,應優先使用 Upload Queue。
  • 上傳幾乎瞬間完成,額外進度畫面反而增加干擾。

畫面要說清楚的事

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

進度條旁要有數字

百分比、已傳輸大小或目前狀態至少保留一種文字回饋,避免只看動畫。

操作依狀態改變

上傳中可取消,暫停後可繼續,失敗後才出現重試。

完成不是 100% 而已

完成後顯示成功文字與下一步,不讓人猜是否已經提交成功。

必要狀態與回應

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

等待開始

顯示檔名、大小與開始上傳的控制。

上傳中

進度、傳輸量與取消操作同步更新。

暫停

說明目前停在哪裡,提供繼續操作。

完成或失敗

完成有成功回饋;失敗有原因與重試。

操作 Demo

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

操作前先知道

  1. 單檔上傳進度

    先觀察:百分比、傳輸量與操作按鈕是否跟著狀態變化。

    操作:開始上傳、暫停、繼續,再取消或重試。

    預期結果:數字和按鈕始終對應目前狀態;取消後不會繼續增加。

可操作 Demo

追蹤單檔上傳進度

MP4
活動開場影片.mp4100 MB · 尚未開始上傳
0%
0%
0 MB / 100 MB等待開始

檔案尚未開始上傳。

告訴 AI

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

建立一個單檔 Upload Progress。顯示檔名、大小、百分比、已上傳/總大小與預估或目前狀態;上傳中可取消,暫停後可繼續,失敗後提供重試。不要只放一條動畫,數字與下一步也要一直可見。

驗收清單

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

  • 百分比或傳輸量是否為文字而非純動畫?
  • 暫停、繼續、取消與重試是否依狀態出現?
  • 完成是否有明確結果?
  • 失敗是否能說明原因?
  • 輔助科技是否能取得進度更新?