用戶及其痛恨的一件事就是等待。如果你為了考驗(yàn)他們的耐心而讓他們等的太久淤翔，那你就極有可能失去這些用戶了翰绊，他們會(huì)毫不留情的放棄你的網(wǎng)站或應(yīng)用程序轉(zhuǎn)而投向更好的地方。雖然在技術(shù)上是有一定方法能夠加快程序的響應(yīng)速度的办铡，但是更多的程序往往都需要用戶在某些時(shí)候等待一段時(shí)間而別無(wú)他選辞做。然而，如果能讓用戶意識(shí)到你的程序的加載速度要快于其他程序寡具，那么他們就會(huì)感覺(jué)到你的加載速度還是蠻快的秤茅。如果在應(yīng)用程序開(kāi)始加載數(shù)據(jù)響應(yīng)請(qǐng)求的時(shí)候，訪問(wèn)用戶能在屏幕中看到一個(gè)進(jìn)度條來(lái)指明程序的加載過(guò)程童叠，那便是極好的框喳。

現(xiàn)在，你必須要理解進(jìn)度條的顯示方式跟動(dòng)畫效果是能夠影響到用戶的心理感知的厦坛。 進(jìn)度條的目的在于通過(guò)向用戶反饋當(dāng)前的響應(yīng)進(jìn)度和合理的時(shí)間消耗來(lái)讓用戶在等待過(guò)程中放松下來(lái)五垮。用戶不應(yīng)該被傻傻的丟到一邊自己去猜程序正在處理的事情。正是在這樣的情境下杜秸，似乎進(jìn)度指示器剛好能構(gòu)建起連接用戶和系統(tǒng)間的一條友好橋梁放仗。在本文中，我們將探討集中不同類型的進(jìn)度指示器以及他們的使用方法：

1撬碟、反饋的關(guān)鍵

沒(méi)錯(cuò)诞挨，我們當(dāng)然都喜歡一個(gè)應(yīng)用程序能夠即時(shí)響應(yīng)莉撇。但是有些時(shí)候你的程序確實(shí)不夠快，緩慢的加載速度和延遲問(wèn)題都可能降低你的程序性能惶傻。在這個(gè)時(shí)候棍郎，你就必須保證用戶能清楚的知道程序正在按著他們的請(qǐng)求作出并在逐步完成響應(yīng)動(dòng)作。一個(gè)優(yōu)秀的交互設(shè)計(jì)就是那些能通過(guò)視覺(jué)反饋向用戶傳達(dá)系統(tǒng)當(dāng)前的狀態(tài)（正在發(fā)生什么银室？）涂佃，產(chǎn)生的結(jié)果（剛剛發(fā)生了什么？）以及未來(lái)的狀態(tài)（下一步會(huì)發(fā)生什么蜈敢？）辜荠。

如果一個(gè)進(jìn)度指示器能夠面向用戶提供一些類型的即時(shí)反饋信息，那它就是發(fā)揮了有效的作用扶认。想辦法告訴用戶程序確實(shí)需要一些更多的時(shí)間來(lái)響應(yīng)他們發(fā)出的動(dòng)作甚至告訴他們需要花費(fèi)的大概時(shí)間侨拦，這對(duì)用戶來(lái)說(shuō)都是極其友好的。用戶的等待時(shí)間一般開(kāi)始于他們觸發(fā)屏幕動(dòng)作的那一刻辐宾，而理想上，系統(tǒng)應(yīng)該在用戶觸發(fā)動(dòng)作后立刻給予一些視覺(jué)上的反饋以告訴用戶系統(tǒng)收到他們的請(qǐng)求了膨蛮。這樣做帶來(lái)的積極一面就是：

（1）它們打消了用戶對(duì)程序響應(yīng)的疑惑叠纹，使他們能夠確信程序是正常工作的。

（2）這種視覺(jué)信息向用戶傳達(dá)了一個(gè)有根據(jù)的等待原因敞葛，減少了他們對(duì)無(wú)聊的等待時(shí)間的感知誉察。它能夠從一定程度上分散轉(zhuǎn)移用戶對(duì)等待時(shí)間的注意力。其實(shí)惹谐，對(duì)于任何需要花費(fèi)1秒鐘以上的動(dòng)作來(lái)講持偏，使用一個(gè)進(jìn)度指示器都是合適的。不過(guò)對(duì)于更快的動(dòng)作氨肌，如果還來(lái)使用這種動(dòng)畫效果鸿秆，那只會(huì)適得其反激怒用戶。

2怎囚、進(jìn)度指示器類型

進(jìn)度指示器整體上分為兩大類： 1) 確定性的 2) 不確定性的

對(duì)于確定性的進(jìn)度指示器而言卿叽，它們能夠告訴用戶當(dāng)前動(dòng)作需要多久時(shí)間方能完成，因?yàn)橛脩裟軓囊曈X(jué)上看到百分比恳守。

而如果一個(gè)指示器要求用戶在動(dòng)作執(zhí)行的全程中只能傻傻等待卻沒(méi)有告訴這個(gè)過(guò)程需要多久的話考婴，那它就是不確定的進(jìn)度指示器。

更進(jìn)一步的催烘，還有將這兩類指示器組合起來(lái)一起使用的情況沥阱。

3、 圓形進(jìn)度指示器

另外一種能確保用戶知曉系統(tǒng)正在響應(yīng)的方法是使用一個(gè)循環(huán)的環(huán)形動(dòng)畫伊群，不過(guò)這種方法沒(méi)有足夠的信息告訴用戶在當(dāng)前動(dòng)作完成之前他們還得等多久考杉。以往的經(jīng)驗(yàn)法則表明策精，只有在執(zhí)行2-10秒鐘內(nèi)這種快速的動(dòng)作時(shí)再考慮使用圓形進(jìn)度指示器。如果讓用戶盯著這么一個(gè)圓環(huán)更久的話奔则，用戶可能就不會(huì)再有耐心轉(zhuǎn)而放棄蛮寂。另外，如果能通過(guò)文字向用戶傳達(dá)一些更明確的信息易茬，比如告訴他們?yōu)楹我却晏＃@時(shí)候使用“正在加載評(píng)論信息”這樣的文字就能讓用戶變得更有耐心一點(diǎn)。?

實(shí)際上抽莱，加載圖標(biāo)往往并沒(méi)有傳達(dá)出動(dòng)作的真實(shí)意義范抓。因?yàn)樗鼈儚V泛應(yīng)用于多種功能之間，比如運(yùn)行系任務(wù)的時(shí)候食铐，在系統(tǒng)引導(dǎo)時(shí)通知用戶當(dāng)前狀態(tài)的時(shí)候匕垫，網(wǎng)絡(luò)連接異常的時(shí)候以及數(shù)據(jù)加載的時(shí)候。這種一勞永逸的做法沒(méi)有針對(duì)具體動(dòng)作設(shè)置特定的加載方式虐呻，這就是為何人們討厭看到一個(gè)環(huán)形加載動(dòng)畫的原因象泵。另外請(qǐng)記住，若使用這種環(huán)形動(dòng)畫代表從服務(wù)器加載數(shù)據(jù)的過(guò)程，那是充滿風(fēng)險(xiǎn)的，因?yàn)榭蛻舳烁?wù)器間的網(wǎng)絡(luò)連接情況并不是掌握在開(kāi)發(fā)人員的手里熄求。 如果這樣做猖凛，在糟糕的網(wǎng)絡(luò)連接情況下等待時(shí)間可能要達(dá)到15秒鐘，而正常情況下可能僅僅需要2秒鐘，所以可控性很差。

4、整合后的圓形進(jìn)度指示器

如果再進(jìn)一步兄一，你也可以將這種圓形的進(jìn)度指示器動(dòng)畫跟現(xiàn)有的控件結(jié)合起來(lái)，尤其是按鈕识腿。比如在 Android 平臺(tái)中出革，一個(gè)圓形的加載器可以將一個(gè)懸浮按鈕整合進(jìn)來(lái)。這種做法保證了能讓用戶看得到加載后的提交動(dòng)作也確實(shí)完成了覆履。它依靠圓形的逐漸閉合來(lái)代表了這個(gè)過(guò)程蹋盆。

5、系統(tǒng)/自定義的循環(huán)動(dòng)畫

Facebook 通過(guò)使用不同風(fēng)格的循環(huán)動(dòng)畫向用戶傳達(dá)出兩種不同的體驗(yàn)感受硝全。針對(duì)它們的加載指示器栖雾，如果用戶看到是一個(gè)自定義的加載動(dòng)畫，他們會(huì)把這種延遲歸咎于程序本身的原因伟众，而當(dāng)他們看到是系統(tǒng)自帶的動(dòng)畫效果的話析藕，他們也會(huì)理所當(dāng)然的認(rèn)為延時(shí)是系統(tǒng)的責(zé)任。?

6凳厢、線性動(dòng)畫?

一個(gè)確定線的線性進(jìn)度指示器账胧，其完成速度應(yīng)該符合百分比的變化竞慢，并總是從0%到100%遞增而不減少。如果一個(gè)指示器針對(duì)的是多個(gè)線性任務(wù)治泥，應(yīng)該只用一個(gè)指示器來(lái)標(biāo)明任務(wù)的整體執(zhí)行進(jìn)度而不要針對(duì)每個(gè)任務(wù)都使用一個(gè)指示器筹煮。

7、顯示完成百分比的動(dòng)畫

顯示完成百分比的進(jìn)度指示器是在有等待動(dòng)畫的指示器中最為有用的一種居夹。它們突顯出當(dāng)前的處理狀態(tài)败潦，告訴用戶系統(tǒng)已經(jīng)完成了多少工作量以及還剩余多少。這種指示器能清楚的向用戶解釋當(dāng)前動(dòng)作的處理進(jìn)度准脂。就經(jīng)驗(yàn)法則來(lái)看劫扒， 它適用于那些需要花費(fèi)10秒鐘或者更久的任務(wù)。其實(shí)狸膏，給用戶一個(gè)預(yù)估的大概時(shí)間往往就夠了沟饥，并不是非得精確。類似于“這會(huì)耽誤您一分鐘的時(shí)間”這樣的文本描述就足夠湾戳。

這種指示器也可以用在消耗時(shí)間少于10秒鐘的情況下贤旷，例如系統(tǒng)正在加載一系列的文檔或注冊(cè)表文件的時(shí)候。此時(shí)最好包含諸如“ 已更新3/50”這樣的文字解釋砾脑。另外一點(diǎn)遮晚，對(duì)于那些消耗時(shí)間的動(dòng)作，要給用戶停止當(dāng)前進(jìn)程的選項(xiàng)拦止，以免他們等的不耐煩想要退出。如果你忘了這么做糜颠，那你的設(shè)計(jì)將會(huì)讓用戶失去控制權(quán)汹族，而沒(méi)有能力根據(jù)自己的需求做出合適的選擇。

這種類型的動(dòng)畫幫助用戶構(gòu)建起一個(gè)關(guān)于動(dòng)作執(zhí)行速度的期望值其兴。反過(guò)來(lái)顶瞒，速度的變化又可以見(jiàn)證究竟是哪個(gè)階段影響了用戶的滿意度。無(wú)論如何元旬，如果指示器在接近完成的時(shí)候卻停下來(lái)耽誤太久榴徐，這種情況就很容易激怒用戶（不信任你的指示器），這樣的話進(jìn)度指示器在用戶心里似乎也變得沒(méi)有用匀归。

8坑资、連續(xù)性動(dòng)畫

進(jìn)度條能代表一個(gè)動(dòng)作還要多久才能完成，但通常情況并不總是準(zhǔn)確的穆端。你可以通過(guò)讓你的連續(xù)性動(dòng)畫一開(kāi)始較慢而接近完成時(shí)運(yùn)行很快來(lái)把那些小的延遲隱藏起來(lái)袱贮。但是這里要注意的一點(diǎn)是進(jìn)度條切不可停下來(lái)，這樣的話容易誤導(dǎo)用戶以為程序凍結(jié)出故障了体啰。?

9攒巍、顯示步驟

相比于僅顯示完成的百分比進(jìn)度嗽仪，更好的方法是顯示出加載進(jìn)程中涉及到的多個(gè)步驟。這樣做柒莉，用戶雖然可能還判斷不出每一步要花費(fèi)多長(zhǎng)時(shí)間闻坚，但是如果能看到總的步驟數(shù)，他們至少在心里會(huì)有一個(gè)評(píng)估值兢孝。 ?

10. 輪廓圖屏幕

長(zhǎng)時(shí)間的等待會(huì)嚴(yán)重的影響到用戶的體驗(yàn)過(guò)程窿凤，但還是有可能使得這個(gè)等待過(guò)程令人愉快而具有說(shuō)服力的。輪廓圖屏幕就正好可以派上用場(chǎng)西潘。它能夠讓用戶專注于數(shù)據(jù)加載的過(guò)程而非等待時(shí)間本身卷玉。

輪廓圖屏幕其實(shí)還是一個(gè)空白頁(yè)，只不過(guò)它在數(shù)據(jù)加載出來(lái)之前能夠先向用戶傳達(dá)出頁(yè)面究竟會(huì)有哪些數(shù)據(jù)類型以及各數(shù)據(jù)量如何喷市。這種做法的好處就是能讓用戶理解到程序?qū)?dòng)作的響應(yīng)速度是正常的相种，只是頁(yè)面中的具體信息尚需要一點(diǎn)時(shí)間陸續(xù)顯示出來(lái)。 Medium 就是采用這種方法品姓，在數(shù)據(jù)加載過(guò)程中先顯示出一些數(shù)據(jù)的占位符寝并， 這就將屏幕中的重點(diǎn)放到了這些正在加載的內(nèi)容上而不是等待過(guò)程。

11腹备、避免靜態(tài)的進(jìn)度指示器?

靜態(tài)的進(jìn)度指示器就是那些沒(méi)有任何動(dòng)態(tài)圖片只配有一些類似于“加載中...”衬潦、“請(qǐng)稍后...”這樣的靜態(tài)文本信息的指示器，它們只能告訴用戶他們的動(dòng)作請(qǐng)求系統(tǒng)已經(jīng)收到了植酥，卻沒(méi)有提供任何有價(jià)值的反饋信息镀岛。因此，這種做法必須被其他更有效的指示器取代友驮。?

12漂羊、避免有不可重新點(diǎn)擊的警告

設(shè)計(jì)的最大失禮之處就是程序通過(guò)諸如“再次點(diǎn)擊可能創(chuàng)建一個(gè)額外的訂單”這樣的信息來(lái)警告用戶針對(duì)同一操作不能點(diǎn)擊兩次。這樣的做法是極為不友好的因?yàn)椴徽撛谌魏吻闆r下你都不該威脅警告用戶卸留。 ?而且走越，用戶基本不會(huì)有興趣去閱讀如此長(zhǎng)的提示信息。

13耻瑟、 處理無(wú)聊的等待過(guò)程

注意不要讓用戶在等待的過(guò)程中太過(guò)無(wú)聊旨指，可以嘗試一些能夠分散他們?cè)诘却龝r(shí)間的注意力上的事情，讓這個(gè)過(guò)程變得有趣而令人愉快喳整，甚至給他們一些超出預(yù)期的驚喜吸引他們谆构，從而誘使他們多點(diǎn)耐心等待加載的完成。比如你可以嘗試使用一些精美的動(dòng)畫效果算柳。

總結(jié)

進(jìn)度條是使用戶的等待過(guò)程變得清晰而流暢的最好方法低淡。給與用戶反饋信息將一定程度上提升他們的耐心，而且會(huì)促成一個(gè)積極有效的用戶體驗(yàn)過(guò)程。反饋信息能夠很好的處理不確定性并使用戶更愿意花些時(shí)間來(lái)等待程序作出響應(yīng)蔗蹋。一個(gè)優(yōu)秀的進(jìn)度指示器能夠指引用戶順利的完成目標(biāo)任務(wù)何荚，甚至能在用戶間，建立起對(duì)你的網(wǎng)站或應(yīng)用程序的更好印象猪杭。

如果喜歡我的文章餐塘，請(qǐng)點(diǎn)個(gè)??；如果有任何意見(jiàn)或看法皂吮，請(qǐng)留下您的評(píng)論戒傻。更歡迎各位持續(xù)的關(guān)注，謝謝蜂筹！

譯自：https://think360studio.com/how-progress-bar-indicators-help-in-mobile-ux-design/