編者按：這篇文章來自資深設(shè)計師 Taras Bakusevych，長期從事金融和企業(yè)類數(shù)字產(chǎn)品的設(shè)計，在 UI/UX 設(shè)計領(lǐng)域造詣精深。他之前曾輸出過很多篇高素質(zhì)的專業(yè)文章，這篇文章是他最近 1 年來第一次更新，文中重新梳理了 UI 中的進度加載指示器的設(shè)計原理和最佳實踐，實用性極強，屬于是教材級別的干貨。

加載進度指示器，是 UI/UX 設(shè)計當(dāng)中的基礎(chǔ)控件，可以幫助用戶在等待期間了解進度，保持參與度。無論是網(wǎng)頁加載、處理交易、下載，精心設(shè)計的進度指示器都可以極大的改善用戶體驗。

在著名的「尼爾森十大啟發(fā)式」當(dāng)中，「狀態(tài)的可見性」是首要的原則。

「呈現(xiàn)當(dāng)前狀態(tài)能夠讓用戶感受到可控性，用戶感覺到可以采取適當(dāng)?shù)牟僮鱽韺崿F(xiàn)目標(biāo)，最終對產(chǎn)品和品牌產(chǎn)生信任感?！?/p>

當(dāng)然，提升系統(tǒng)的響應(yīng)速度是產(chǎn)品功能優(yōu)化的核心，但是當(dāng)這個速度和效率提升到極限的時候，正確的用戶體驗設(shè)計，能夠在此基礎(chǔ)上帶來更進一步的提升。

在本文中，我們將會深入探討加載和進度指示器的重要性、背后的心理學(xué)邏輯，并且探索有效且友好的設(shè)計策略，總結(jié)這一控件的最佳實踐。

「不確定指示器」和「確定指示器」

針對不同的場景，是需要選擇不同類型的指示器。

「不確定指示器」—— 針對不確定的時間量。

當(dāng)所涉及的流程的時間或者進度是未知或者可變的時候，使用不確定的指示器，它可以讓用戶感知到系統(tǒng)正在運行，并且防止用戶將延遲視作為錯誤或者故障。

「確定指示器」—— 當(dāng)某個過程可以使用精確時間展現(xiàn)，或者呈現(xiàn)具體進展情況。

當(dāng)可以測量或者估計時間或者進度的時候，使用確定的指標(biāo)。它們可以直觀地表示已完成的進度和剩余的內(nèi)容，確保用戶能夠衡量進度，并且管理預(yù)期。

主要的類型和變體

旋轉(zhuǎn)指示器：通常使用一個簡單的旋轉(zhuǎn)動畫圖標(biāo)，不斷旋轉(zhuǎn)表明系統(tǒng)正在處理或者加載內(nèi)容，它在大量的 APP 和網(wǎng)站當(dāng)中都得到了廣泛的使用。

骨架加載器：模仿待加載內(nèi)容的預(yù)期布局，使用視覺化的占位符來呈現(xiàn)，它可以提供實際內(nèi)容、頁面或者界面的粗略視覺輪廓，提供給用戶基礎(chǔ)的視覺預(yù)期。

進度條：進度條使用一條逐漸填滿的水平線條，來表明任務(wù)的加載過程和進度，用戶可以看到完成的百分比和剩余的時間或進度。

進度環(huán)：和進度條類似，只是使用圓環(huán)來替代直線條，用逐漸加載封閉的環(huán)來表明進度。

動態(tài)圖標(biāo)/插畫：使用引人入勝的動態(tài)圖標(biāo)和動態(tài)插畫來取悅用戶，增加視覺趣味，讓等待過程更加有趣。

文本加載信息：以文本的形態(tài)來呈現(xiàn)加載信息，比如「加載中……」或者「請稍候」，以文本的形態(tài)清晰地給予用戶反饋，表明系統(tǒng)正在積極處理他們的請求。

百分比指示器：此類指示器以百分比的形式來呈現(xiàn)進度，允許用戶以數(shù)字的方式來呈現(xiàn)加載的過程。

混合指示器：結(jié)合不同的加載指示器，創(chuàng)造獨特且引人入勝的體驗，比如使用進度環(huán)和動畫以及文本信息，共同告知用戶信息。

基于時間來選擇合適的指示器

不同的等待時長下，選擇合適的進度指示器，來增加用戶的參與感和信息的知情權(quán)。

小于1s的等待時長：建議不要使用任何顯式的加載效果，因為它可能呈現(xiàn)出來是故障效果，讓用戶感到困惑。

較短等待時長（1-3s）：建議使用不確定指示器，比如使用骨架加載期或者進度環(huán)。

?這個時候應(yīng)該避免使用復(fù)雜的動畫效果或者插畫動畫，因為可能沒有足夠的時間來呈現(xiàn)這個加載過程。

中等等待時長（3-10s）：用戶可能會質(zhì)疑系統(tǒng)的響應(yīng)能力，因此建議用戶使用進度條和百分比指示器來顯示加載過程，確保用戶的參與度。

較長等待時長（10s以上）：這個時候最好提供清晰的界面來展示進度，最好允許用戶與之交互，來減少焦慮?？梢岳瞄W光特效、背景任務(wù)、講故事、小貼士等內(nèi)容和功能組合，來確保漫長的等待過程中，用戶能夠保持參與度。

等待心理學(xué)

Fiona Fui-Hoon Nahassess 曾經(jīng)進行過一項關(guān)于用戶等待時長忍耐度的調(diào)研，這項研究反映了用戶在等待網(wǎng)頁加載多長時間后會放棄，總結(jié)了這類用戶行為的規(guī)律。研究結(jié)果顯示，界面反饋的存在，延長了用戶的等待忍耐時長。

看得到進度條的參與組的平均等待時長為 22.6 秒，而看不到進度條的參與者的平均等待時長為 9 秒。

用戶對時間的感知、焦慮程度、掌控感、視覺吸引力、透明度以及干擾元素對于等待時長都有著關(guān)鍵作用。此外，用戶期望可能會根據(jù)行業(yè)、領(lǐng)域的差異，而有所不同。

最佳實踐

1、加載時避免多個相同進度指示器

加載同一進程的時候（比如同一頁面中多個卡片的時候），建議顯示單個全局的進度指示器，而不是每個卡片都單獨設(shè)置一個進度指示器，這樣可以讓用戶輕松了解整體進展，而不會感到不知所措。

2、使用骨架加載器增強加載內(nèi)容的感知

屏幕骨架有很多功能，包括向用戶展示正在發(fā)生的事情，給用戶提供接下來會發(fā)生什么的預(yù)期感知。通過在內(nèi)容加載的時候給用戶呈現(xiàn)無干擾的布局骨架，骨架加載器最大程度地降低用戶的認知負擔(dān)，幫助用戶關(guān)注于當(dāng)前的任務(wù)，而不用擔(dān)心其他。

3、不要為了動畫而人為拉長加載時長

不必要的動畫加載效果可能會讓用戶感到繁復(fù)，甚至沮喪。設(shè)計師應(yīng)該優(yōu)先考慮使用有意義的加載指示器，比如使用進度條，或者骨架指示器，在貼合用戶認知、實際情況下，確保用戶滿意度，最大限度地減少不必要的等待。Tripadvisor 這個應(yīng)用當(dāng)中，在加載的時候使用動態(tài)的貓頭鷹圖標(biāo)來取悅用戶，而 Airbnb 則使用了更加通用的骨架加載器。雖然前者的動畫效果看起來增加了視覺效果，但是它很容易讓人感覺是為了設(shè)計而設(shè)計，浪費了時間。

4、使用漸進式加載逐漸顯示內(nèi)容

對于較多的內(nèi)容呈現(xiàn)，可以使用漸進式加載來解決。漸進式加載無需用戶等待整個頁面加載完成，而是采用增量加載的方式來顯示內(nèi)容，這樣的設(shè)計減少了等待時間的感知，可見的內(nèi)容逐步出現(xiàn)，也可以意味著用戶可以更快和用戶交互，讓體驗更加具有吸引力，也調(diào)和了網(wǎng)速的限制和硬件性能的限制，用戶以另外一種方式「低延遲」地和網(wǎng)絡(luò)內(nèi)容進行了互動。

5、戰(zhàn)略性放置進度指示器來引導(dǎo)用戶期望

所謂的戰(zhàn)略性地防止進進度環(huán)，就是將它放在即將刷新或者加載的位置，來提示用戶「再拉就要刷新了」，下拉刷新的時候可以將它放在頂部，往下翻頁瀏覽的時候，可以放在底部，預(yù)告再往下翻就會刷新加載。將進度指示器放在這些位置，可以讓用戶對后續(xù)操作有更加清晰的預(yù)期，也提供了順暢的加載體驗。

6、加載過程很長允許用戶不間斷使用系統(tǒng)

如果所涉及的加載過程很長，那么最好為用戶提供靈活的選擇，不要使用全屏覆蓋的進度指示器，遮蓋出其他的控件，而是盡量選擇加載過程在后臺進行，同時在界面的邊角提供清晰的指示器，確?？梢娦裕脩艨梢赃M行其他的操作，并且允許用戶取消或者終止這個加載過程。賦予用戶控制權(quán)，允許多任務(wù)處理，能夠極大地改善長加載過程的體驗。

7、提供時間預(yù)估以貼合用戶預(yù)期

還剩下多長時間能完成，對于降低用戶焦慮有明顯的好處。雖然這個時間不一定是準(zhǔn)確的，但是相對清晰的信息控制，能夠讓用戶清楚知道要等多久，能夠降低等待期間的挫敗感。結(jié)合進度條、倒計時和其他的輔助信息，能夠讓用戶滿意度得到明顯提升。

8、避免用戶在長時間加載中懷疑系統(tǒng)無響應(yīng)

長時間加載的情況還挺多的，需要避免讓用戶感到系統(tǒng)無響應(yīng)，這種不確定的狀態(tài)可能會讓用戶對系統(tǒng)失去信任。

為了規(guī)避這種情況，進度指示器、文本說明信息、動畫這些手段最好都用上，讓用感知到系統(tǒng)正在積極處理他們的請求。通過主動解決用戶的潛在質(zhì)疑，讓用戶了解正在進行的流程，這樣可以保持用戶信心和整體體驗。

在系統(tǒng)反饋上，蘋果的產(chǎn)品上正反案例都有。比如 iOS 的系統(tǒng)更新過程中，即使整體進度條變化不明顯，齒輪動畫也會讓人感到安心，讓人知道系統(tǒng)沒有卡死。

9、將進度指示器和UI控件集成

可以將進度指示器和按鈕等關(guān)聯(lián)的 UI 控件結(jié)合起來，這可以帶來一致的用戶體驗，并且闡明操作和加載指示器之間的關(guān)系。

此外，這種設(shè)計之下，不確定指示器過渡到確定指示器，再到成功狀態(tài)的變換過程，也可以讓用戶保持參與感，提升用戶的滿意度。

10、揭示復(fù)雜過程告知用戶后臺任務(wù)內(nèi)容

TurboTax 有意將數(shù)據(jù)導(dǎo)入的過程使用更加清晰的文本和動畫清晰透明地呈現(xiàn)出來，這可以讓用戶放心，他們的帳號正在被檢測、數(shù)據(jù)被正確地導(dǎo)入到系統(tǒng)當(dāng)中。這種設(shè)計設(shè)定了用戶的期望，通過展示來反向強調(diào)其中操作的重要性和復(fù)雜性，讓用戶了解過程，并且對于系統(tǒng)的可靠性有了更多了解，會更加信任產(chǎn)品。

11、添加有趣的元素減輕用戶壓力

在游戲當(dāng)中，這種策略經(jīng)常會用到，包括一些有趣的加載效果，提供該游戲相關(guān)的一些小貼士或者說明。比如在《爐石傳說》當(dāng)中，除了有和游戲本身匹配的文案之外，在漫長的等待加載過程中，會出現(xiàn)時間油管的元素以及小貼士。著會讓用戶在加載過程讓用戶不會覺得無聊。

結(jié)語

在 UI/UX 設(shè)計過程中，加載進度指示器的設(shè)計可以提供引人入勝的體驗，結(jié)合心理學(xué)原理和實際情況，更好地和界面組件結(jié)合到一起，可以極大地增強產(chǎn)品的可用性，降低用戶的挫敗感。

作者：陳子木