實用建議以及 Figma 的教程，將幫助您為您的產品設計最佳進度條。
1. 避免將進度條用於快速任務
對於需要少於5秒的任務，最好使用骨架螢幕或載入旋轉器。
2. 保持進度條的設計簡單
進度條本身不應該引起太多關注。 大多數產品將受益於乾淨、清晰的視覺效果，干擾最小（沒有過度華麗的動畫）。 在檢視進度條的視覺和互動設計時，請思考它對首次和普通使用者的工作原理。
我的設計在使用者第一次和1000次看到它時會是什麼樣子？
它將幫助您避免建立過度的動畫，這些動畫對首次使用的使用者來說可能看起來不錯，但可能會引起普通使用者的惱動。
為進度條選擇動畫曲線時，請使用緩和曲線，如緩和進入或緩和出，使運動感覺自然。
您可以透過在進度條周圍新增脈衝光或不透明度的細微變化來使過渡感覺柔和。
3. 避免誤導性進展
進度條是一個功能元素，具有特定目的——傳達當前操作的狀態。 當進度指示器失敗時，它會立即破壞使用者信任。 一個典型的例子是，條形線性地移動，但在最後突然凍結，阻止使用者。 當用戶遇到這種情況時，他們會立即假設這種進展與系統目前正在做的事情沒有任何關係。
4. 使用適當型別的進度指示器
有兩種型別的進度指標——不確定的和確定的。
當持續時間未知且無法測量進度時，會使用不確定的指標。 因此，基本上，系統沒有顯示進度，而是指示活動，以保證使用者工作正在發生。 進度條只是顯示“正在發生某些事情”。
對於時間確定的任務（例如，載入系統更新），進度條在視覺上向完成方向移動。 您可以顯示確定的進度條以及其他資訊，例如：
- 系統完成操作所需的時間（例如，“還剩20分鐘”）。
- 系統在當下正在做什麼（例如，“第2步，共4步”）來傳達進度。
您還可以將一種型別的載入指示器轉換為另一種。
5. 在漫長的等待時間內讓使用者參與其中
如果使用者必須等待更長時間，您可以透過以下方式減少等待時間的挫折感：
- 提供微互動或迷你遊戲。 一些應用程式允許使用者在螢幕上顯示物件時點選物件來“收集點”。
- 使用微妙的文字，如“我們快到了！” 當等待時間快結束的時候。
6. 順利過渡到下一步
想想當過程完成後，使用者會看到什麼。 過程完成後，新增一個微妙的完成動畫。 例如，您可以在完成後將進度條變成勾號圖示。
