編者按：進度指示器是 UI 界面中最為常見的控件之一，它的設計和實際的使用場景是同樣需要細心分辨。這篇文章出自資深設計師 Saadia Minhas 之手，她結合自己豐富的工作經驗總結了相關的設計注意事項。

進度指示器是什么？

當用戶與產品交互時，有一些情況下，交互或者操作需要特定一段時間才能完成這個過程，而這個過程可以通過進度指示器來告知用戶當前的進度和狀態。本文會分享進度指示器的常規示例，包括加載網頁、保存文檔、下載文件等。

進度指示器向用戶告知當前流程的狀態、進度以及完成需要的剩余時間。

UX 設計師在設計產品時會定義進度指示器。如果定義方式做得不好，可能會導致用戶體驗非常的令人難受或者沮喪。

（進度指示不明的時候）用戶不知道之前的操作是否有效、是否正在執行，他們應該在當前界面上等待，還是說離開。

讓我們討論一下進度指示器如何幫助用戶在使用產品時了解實際情況。

關鍵要點

• 進度指示器通過對用戶當前的操作予以響應，呈現狀態病提供反饋，以此來增強用戶體驗。
• 好的進度指示器顯示已完成的進度、進程的當前狀態、剩余進程以及進程的詳細信息。
• 進度指示器可以有不同的樣式，包括線性、環形，可以是確定形和不規則的形狀。
• 進度指示器還可以以數字或百分比的方式顯示完成的進度。

進度指示器的組成元素

良好的進度指示器提供以下基礎信息：

1. 已完成的部分流程
2. 進程當前的狀態
3. 尚待完成的部分流程
4. 正在進行的進程的詳細信息

進度指示器顯示 (i) 流程的一部分已完成，(ii) 流程的當前狀態，(iii) 流程的剩余部分，(iv) 流程的詳細信息。

有效的進度指示器遵循下面提到的關鍵設計原則。

1. 信息豐富

進度指示器需要顯示正在進行的進程信息，以及其完成與否的狀態。

2. 保持一致性

進度指示器遵循類似流程的一致樣式。例如，上傳文件功能所用的指示器，同你的產品中其他隨處可見的進度指示器的樣式是相同的。

3.加入動畫

進度指示器應該顯示一些動畫，讓用戶了解后臺正在發生的事情。

創意進度指示器樣式

以下是按類型分組的創意進度指標列表。

1. 線性進度指示器
2. 環形進度指示器
3. 融入交互的進度指示器

1. 線性進度指示器

線性進度指示器以線性形式，展示流程從開始到結束的完整流程。

根據線性進度指示器的行為，它可以呈現「不確定的進度」或「確定的進度」 。

（1）線性不確定進度指示器

線性不確定進度指示器，所顯示的時間和進度是未知的，它只能傳達后臺正在運行的視覺信息。

這些類型的進度指示器，通常用于無法檢測進度的進程，或者用戶不需要知道某項活動需要多長時間的進程。

線性不確定進度指示器

（2）線性確定性進度指示器

線性確定進度指示器顯示確定的時間，它們將會告訴用戶該過程當前的進度如何，或者將會花費多長時間。

線性確定進度指示器可幫助用戶分析流程的進度

（3）與數值或百分比呈線性相關的進度指示器

線性進度指示器以數值或百分比的形式，顯示當前進程的進度。

用戶可以輕松查看流程完成了多少、當前進度以及剩余多少。這有助于分析流程所需要花費的時間。

2. 環形進度指示器

環形進度指示器以圓圈的形式顯示進程，展示從開始到結束的完整進度。

與線性進度指示器一樣，??環形進度指示器可以根據其行為，而呈現出「不確定」和「確定」的進度 。

（1）環形不確定進度指示器

環形不確定進度指示器無法提供具體明確的耗費的時間。

這個類型的進度指示器用于無法檢測具體進度進程，而用戶可能也不需要知道某項活動需要多長時間，這個時候可以用這類指示器。

顯示環形動畫的環形不確定進度指示器。

（2）環形確定進度指示器

環形確定進度指示器會，會顯示具體的時間和進度，或者說，對于需要等待時間是可預測的。它們用進度告訴用戶，該過程將花費多長時間。

環形確定進度指示器顯示流程的進度

環形進度指示器還可以用以數值或百分比的形式顯示進程的進度。

用戶可以輕松查看流程已完成的部分、當前進度以及剩余部分。這有助于分析流程所花費的時間。

環形確定進度指示器，顯示流程的進度百分比。

3. 融入交互的進度指示器

進度指示器可以與用戶交互相結合，以時間或百分比的形式顯示響應的狀態。

環形確定進度指示器，顯示流程的進度百分比。

創意進度指示器示例

用更有更有創意的方式來設計進度指示器，可以幫助用戶輕松了解正在進行的進程的進度。

下面顯示了一些進度指標的示例。

結論

進度指示器是 UX 設計師經常忽略的重要 UI 控件。如果沒有為用戶提供即時反饋來響應用戶交互，產品的體驗就不算完整。好的進度指示器有助于減少用戶的不確定性，減少用戶等待過程中的焦躁情緒。