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

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

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

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

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

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

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

針對(duì)不同的場(chǎng)景，是需要選擇不同類型的指示器。

「不確定指示器」—— 針對(duì)不確定的時(shí)間量。

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

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

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

主要的類型和變體

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

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

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

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

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

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

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

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

基于時(shí)間來(lái)選擇合適的指示器

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

小于1s的等待時(shí)長(zhǎng)：建議不要使用任何顯式的加載效果，因?yàn)樗赡艹尸F(xiàn)出來(lái)是故障效果，讓用戶感到困惑。

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

?這個(gè)時(shí)候應(yīng)該避免使用復(fù)雜的動(dòng)畫效果或者插畫動(dòng)畫，因?yàn)榭赡軟](méi)有足夠的時(shí)間來(lái)呈現(xiàn)這個(gè)加載過(guò)程。

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

較長(zhǎng)等待時(shí)長(zhǎng)（10s以上）：這個(gè)時(shí)候最好提供清晰的界面來(lái)展示進(jìn)度，最好允許用戶與之交互，來(lái)減少焦慮。可以利用閃光特效、背景任務(wù)、講故事、小貼士等內(nèi)容和功能組合，來(lái)確保漫長(zhǎng)的等待過(guò)程中，用戶能夠保持參與度。

等待心理學(xué)

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

看得到進(jìn)度條的參與組的平均等待時(shí)長(zhǎng)為 22.6 秒，而看不到進(jìn)度條的參與者的平均等待時(shí)長(zhǎng)為 9 秒。

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

最佳實(shí)踐

1、加載時(shí)避免多個(gè)相同進(jìn)度指示器

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

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

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

3、不要為了動(dòng)畫而人為拉長(zhǎng)加載時(shí)長(zhǎng)

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

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

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

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

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

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

如果所涉及的加載過(guò)程很長(zhǎng)，那么最好為用戶提供靈活的選擇，不要使用全屏覆蓋的進(jìn)度指示器，遮蓋出其他的控件，而是盡量選擇加載過(guò)程在后臺(tái)進(jìn)行，同時(shí)在界面的邊角提供清晰的指示器，確保可見(jiàn)性，用戶可以進(jìn)行其他的操作，并且允許用戶取消或者終止這個(gè)加載過(guò)程。賦予用戶控制權(quán)，允許多任務(wù)處理，能夠極大地改善長(zhǎng)加載過(guò)程的體驗(yàn)。

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

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

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

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

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

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

9、將進(jìn)度指示器和UI控件集成

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

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

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

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

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

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

結(jié)語(yǔ)

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

作者：陳子木