進(jìn)度指示器是 UI 界面中最為常見的控件之一，它的設(shè)計和實(shí)際的使用場景是同樣需要細(xì)心分辨。這篇文章出自資深設(shè)計師 Saadia Minhas 之手，她結(jié)合自己豐富的工作經(jīng)驗(yàn)總結(jié)了相關(guān)的設(shè)計注意事項(xiàng)。

進(jìn)度指示器是什么？

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

進(jìn)度指示器向用戶告知當(dāng)前流程的狀態(tài)、進(jìn)度以及完成需要的剩余時間。

UX 設(shè)計師在設(shè)計產(chǎn)品時會定義進(jìn)度指示器。如果定義方式做得不好，可能會導(dǎo)致用戶體驗(yàn)非常的令人難受或者沮喪。

（進(jìn)度指示不明的時候）用戶不知道之前的操作是否有效、是否正在執(zhí)行，他們應(yīng)該在當(dāng)前界面上等待，還是說離開。

讓我們討論一下進(jìn)度指示器如何幫助用戶在使用產(chǎn)品時了解實(shí)際情況。

關(guān)鍵要點(diǎn)

• 進(jìn)度指示器通過對用戶當(dāng)前的操作予以響應(yīng)，呈現(xiàn)狀態(tài)病提供反饋，以此來增強(qiáng)用戶體驗(yàn)。
• 好的進(jìn)度指示器顯示已完成的進(jìn)度、進(jìn)程的當(dāng)前狀態(tài)、剩余進(jìn)程以及進(jìn)程的詳細(xì)信息。
• 進(jìn)度指示器可以有不同的樣式，包括線性、環(huán)形，可以是確定形和不規(guī)則的形狀。
• 進(jìn)度指示器還可以以數(shù)字或百分比的方式顯示完成的進(jìn)度。

進(jìn)度指示器的組成元素

良好的進(jìn)度指示器提供以下基礎(chǔ)信息：

1. 已完成的部分流程
2. 進(jìn)程當(dāng)前的狀態(tài)
3. 尚待完成的部分流程
4. 正在進(jìn)行的進(jìn)程的詳細(xì)信息

進(jìn)度指示器顯示 (i) 流程的一部分已完成，(ii) 流程的當(dāng)前狀態(tài)，(iii) 流程的剩余部分，(iv) 流程的詳細(xì)信息。

有效的進(jìn)度指示器遵循下面提到的關(guān)鍵設(shè)計原則。

1. 信息豐富

進(jìn)度指示器需要顯示正在進(jìn)行的進(jìn)程信息，以及其完成與否的狀態(tài)。

2. 保持一致性

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

3.加入動畫

進(jìn)度指示器應(yīng)該顯示一些動畫，讓用戶了解后臺正在發(fā)生的事情。

創(chuàng)意進(jìn)度指示器樣式

以下是按類型分組的創(chuàng)意進(jìn)度指標(biāo)列表。

1. 線性進(jìn)度指示器
2. 環(huán)形進(jìn)度指示器
3. 融入交互的進(jìn)度指示器

1. 線性進(jìn)度指示器

線性進(jìn)度指示器以線性形式，展示流程從開始到結(jié)束的完整流程。

根據(jù)線性進(jìn)度指示器的行為，它可以呈現(xiàn)「不確定的進(jìn)度」或「確定的進(jìn)度」 。

（1）線性不確定進(jìn)度指示器

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

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

線性不確定進(jìn)度指示器

（2）線性確定性進(jìn)度指示器

線性確定進(jìn)度指示器顯示確定的時間，它們將會告訴用戶該過程當(dāng)前的進(jìn)度如何，或者將會花費(fèi)多長時間。

線性確定進(jìn)度指示器可幫助用戶分析流程的進(jìn)度

（3）與數(shù)值或百分比呈線性相關(guān)的進(jìn)度指示器

線性進(jìn)度指示器以數(shù)值或百分比的形式，顯示當(dāng)前進(jìn)程的進(jìn)度。

用戶可以輕松查看流程完成了多少、當(dāng)前進(jìn)度以及剩余多少。這有助于分析流程所需要花費(fèi)的時間。

2. 環(huán)形進(jìn)度指示器

環(huán)形進(jìn)度指示器以圓圈的形式顯示進(jìn)程，展示從開始到結(jié)束的完整進(jìn)度。

與線性進(jìn)度指示器一樣，環(huán)形進(jìn)度指示器可以根據(jù)其行為，而呈現(xiàn)出「不確定」和「確定」的進(jìn)度 。

（1）環(huán)形不確定進(jìn)度指示器

環(huán)形不確定進(jìn)度指示器無法提供具體明確的耗費(fèi)的時間。

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

顯示環(huán)形動畫的環(huán)形不確定進(jìn)度指示器。

（2）環(huán)形確定進(jìn)度指示器

環(huán)形確定進(jìn)度指示器會，會顯示具體的時間和進(jìn)度，或者說，對于需要等待時間是可預(yù)測的。它們用進(jìn)度告訴用戶，該過程將花費(fèi)多長時間。

環(huán)形確定進(jìn)度指示器顯示流程的進(jìn)度

環(huán)形進(jìn)度指示器還可以用以數(shù)值或百分比的形式顯示進(jìn)程的進(jìn)度。

用戶可以輕松查看流程已完成的部分、當(dāng)前進(jìn)度以及剩余部分。這有助于分析流程所花費(fèi)的時間。

環(huán)形確定進(jìn)度指示器，顯示流程的進(jìn)度百分比。

3. 融入交互的進(jìn)度指示器

進(jìn)度指示器可以與用戶交互相結(jié)合，以時間或百分比的形式顯示響應(yīng)的狀態(tài)。

環(huán)形確定進(jìn)度指示器，顯示流程的進(jìn)度百分比。

創(chuàng)意進(jìn)度指示器示例

用更有更有創(chuàng)意的方式來設(shè)計進(jìn)度指示器，可以幫助用戶輕松了解正在進(jìn)行的進(jìn)程的進(jìn)度。

下面顯示了一些進(jìn)度指標(biāo)的示例。

結(jié)論

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

陳子木