系統(tǒng)狀態(tài)的可見性是用戶交互設(shè)計(jì)最重要的原則之一。在使用系統(tǒng)時(shí)，用戶想要感覺一切都在掌控之中，這意味著在任何特定時(shí)間下，他們想要知道并了解他們當(dāng)前的處境，尤其是在系統(tǒng)正處于繁忙狀態(tài)時(shí)。當(dāng)系統(tǒng)在處理或者加載進(jìn)程時(shí)，一個(gè)等待動(dòng)畫進(jìn)度指示器是向用戶展示系統(tǒng)狀態(tài)最為常見的形式。

（這里有一部分關(guān)于Adobe XD的介紹，不翻譯了，并且附上了下載地址）

在這篇文章中，我們將探討動(dòng)畫進(jìn)度指示器的幾種主要類型，并提供建議在什么情況如何使用每種類型。

好的交互設(shè)計(jì)會(huì)提供反饋

盡管app的及時(shí)響應(yīng)是最好的，但總有些app為了速度不能及時(shí)響應(yīng)的時(shí)候。一個(gè)緩慢的響應(yīng)可能由于互聯(lián)網(wǎng)連接故障引起，或者源于這個(gè)操作本身就會(huì)占用一段很長(zhǎng)的時(shí)間（比如安裝OS系統(tǒng)的更新）。

對(duì)于這樣的情況，為了減少用戶的焦躁不安，你必須讓用戶明確這個(gè)app正在運(yùn)行它的請(qǐng)求，真實(shí)的進(jìn)程正在被處理。

因此，應(yīng)該提供反饋給用戶，讓用戶了解app在適當(dāng)時(shí)間內(nèi)正在發(fā)生些什么。

永遠(yuǎn)提供及時(shí)反饋的類型

一個(gè)用戶的等待時(shí)間從他們發(fā)起操作便開始了，而最糟糕的是用戶沒有得到任何指示表明系統(tǒng)已經(jīng)接收到了操作。當(dāng)一個(gè)app無法告知用戶完成這項(xiàng)操作需要花費(fèi)一定時(shí)間，用戶會(huì)認(rèn)為這個(gè)app并沒有接受到請(qǐng)求，并且再一次發(fā)起操作請(qǐng)求。大量的額外點(diǎn)擊和輸入輸出都?xì)w咎于反饋信息的匱乏。

任何操作，比如點(diǎn)擊一個(gè)按鈕或者下滑刷新，都應(yīng)當(dāng)有一個(gè)及時(shí)的反饋。在接受到用戶操作請(qǐng)求后，給用戶一些及時(shí)的視覺反饋去表明操作已經(jīng)被發(fā)起是非常重要的。

下滑刷新操作 來源：Behance

對(duì)任何操作的進(jìn)程指示器花費(fèi)超過1秒的時(shí)間

當(dāng)app使用超過0.1秒但是少于1秒的時(shí)間去響應(yīng)用戶輸入時(shí)，這感覺好像這個(gè)app正在促使結(jié)果出現(xiàn)。盡管用戶注意到了一小段延遲，他們?nèi)匀粫?huì)專注在他們當(dāng)前的任務(wù)上。但在經(jīng)過1秒后，用戶的注意力開始會(huì)分散，他們會(huì)意識(shí)到正在等待一個(gè)速度緩慢的app的響應(yīng)。

為了減少用戶的不確定性，用進(jìn)程指示器去為需要超過1秒時(shí)間響應(yīng)的操作提供一個(gè)等待的原因。（對(duì)于任何加載時(shí)間不到一秒的操作不推薦使用動(dòng)畫，因?yàn)橛脩魧?duì)只是一閃而過的畫面可能感受到不安。）動(dòng)畫進(jìn)程指示器緩和了用戶等待時(shí)長(zhǎng)帶來的負(fù)面影響，并延長(zhǎng)了用戶在站點(diǎn)或者app上的注意力。

進(jìn)程指示器的類型

進(jìn)程指示器告訴用戶app需要更多的時(shí)間去處理最后的用戶操作。最簡(jiǎn)單的進(jìn)程指示器形式是不確定的——這些指示器的類型需要用戶在操作即將結(jié)束時(shí)等待，但是他們并不指示需要等待多長(zhǎng)的時(shí)間。

無限循環(huán)動(dòng)畫提供了系統(tǒng)正忙的反饋，但是并不提供任何關(guān)于用戶將要等待多久的信息。圖片來源：Behance

常規(guī)上，這種類型的進(jìn)程指示器應(yīng)該用于快速的響應(yīng)（2-10秒內(nèi)）。使用戶盯著旋轉(zhuǎn)輪或無限線性動(dòng)畫更長(zhǎng)的時(shí)間會(huì)增長(zhǎng)網(wǎng)站的跳出率，或者使得人們關(guān)閉掉app。

另一種類型的進(jìn)程指示器指示了一個(gè)操作需要花費(fèi)多久的時(shí)間（大致上或者是確切的時(shí)間）。這種類型的進(jìn)程指示器被稱為確定模式。它們是等待動(dòng)畫反饋時(shí)最能提供信息的指示器類型，因?yàn)樗鼈冋故玖水?dāng)前的進(jìn)度，現(xiàn)在有多少已經(jīng)被完成了，以及還剩下多少未完成。一個(gè)進(jìn)程趨于完成的視覺指示器使用戶感到放松，并且讓他們更愿意等待。

不確定的指示器視覺化不具體的等待時(shí)間，而確定的指示器顯示了這個(gè)操作需要花費(fèi)多久的時(shí)間。圖片來源：Material Design

兩種最受歡迎的動(dòng)畫進(jìn)程指示器

有兩種最受歡迎的動(dòng)畫進(jìn)程指示器類型——循環(huán)動(dòng)畫進(jìn)程指示器和百分比完成指標(biāo)進(jìn)程指示器。

循環(huán)動(dòng)畫指示器

因?yàn)榇蟛糠值难h(huán)動(dòng)畫都是不確定的，并且用于延遲的多種類型（包括很長(zhǎng)的那些延遲），所以這種類型的進(jìn)度指示器趨向于有許多消極影響。比如，在Apple iOS里的一個(gè)默認(rèn)的加載圖標(biāo)（圍繞著一個(gè)中心點(diǎn)區(qū)域面向四周發(fā)散灰色線條的旋轉(zhuǎn)器）被用于多種操作系統(tǒng)功能延遲，表明了所有從啟動(dòng)設(shè)備到連接網(wǎng)絡(luò)或加載數(shù)據(jù)的問題的延遲。正因?yàn)槿绱耍脩舨幌胫豢匆娨粋€(gè)沒有任何進(jìn)程或者時(shí)間指示的加載旋轉(zhuǎn)器。

看著加載旋轉(zhuǎn)器仿佛在看著時(shí)鐘轉(zhuǎn)動(dòng) —— 當(dāng)你這樣做時(shí)，時(shí)間似乎停止了。圖片來源：appance

百分比指示器

百分比完成指標(biāo)指示器是一種確定的進(jìn)程指示器，它從0%填滿到100%，并且不會(huì)負(fù)增長(zhǎng)。線性和環(huán)形進(jìn)程指示器都可以是百分比完成指標(biāo)的形式。

線性百分比完成指標(biāo)進(jìn)度指示器。圖片來源：Adobe Stock

環(huán)形百分比完成指標(biāo)進(jìn)度指示器。圖片來源：Adobe Stock

常規(guī)翻閱網(wǎng)站時(shí)，對(duì)于使用10秒或更多時(shí)間的長(zhǎng)進(jìn)程應(yīng)該使用百分比完成指標(biāo)的動(dòng)畫指示器?；贘akob Nielsen的關(guān)于響應(yīng)時(shí)間的研究，10秒是用戶在當(dāng)前任務(wù)上保持注意力的極限，在10秒過后，如果沒有得到足夠的關(guān)于等待結(jié)果還需要多久的信息，用戶會(huì)迅速的變得不耐煩。

設(shè)計(jì)進(jìn)程指示器的要點(diǎn)

如果不能縮短時(shí)間，應(yīng)該始終試圖讓等待的時(shí)間變得更愉悅。

解釋為什么用戶在等待

大多數(shù)情況下，如果用戶被提前告知情況，他們會(huì)更為有耐心。通過內(nèi)含文本的形式，通知用戶發(fā)生了什么，并且解釋為什么用戶在等待，這對(duì)于增加用戶的清晰度是很有幫助的。

Skyscanner告知用戶它在檢查所有可用的服務(wù)商去搜尋最佳航班選擇。

為耗時(shí)的任務(wù)提供一個(gè)大致的預(yù)估時(shí)間

時(shí)間不用十分精確，舉個(gè)例子，“這可能要花費(fèi)5分鐘”就足夠鼓勵(lì)用戶繼續(xù)等待結(jié)果出來。

Apple iOS的軟件更新預(yù)估時(shí)間

展示工作完成的絕對(duì)量

對(duì)無法提前知道需要完成多少工作量的消費(fèi)時(shí)間的操作，使用一個(gè)百分比指標(biāo)指示器是不太可能的，但是仍然可以就明確的已完成的工作量提供運(yùn)行中的進(jìn)度反饋。在這種情況下，考慮到展示步驟的數(shù)量，因?yàn)榱私獠襟E的數(shù)量可以至少讓用戶有一個(gè)大致的預(yù)估。

當(dāng)進(jìn)度無法被準(zhǔn)確監(jiān)控時(shí)，考慮展示步驟的數(shù)量而不是百分比。

不要停止進(jìn)度條

進(jìn)度條確保用戶對(duì)操作正在多快被處理保留了期待。因此，任何意料不到的停滯都將被注意到并且影響到用戶的滿意度。最壞可能的情況是當(dāng)進(jìn)度條接近99%時(shí)突然停止了。大部分用戶會(huì)對(duì)這樣的行為感覺挫敗，因?yàn)檫@會(huì)讓他們認(rèn)為app有故障了。

開心的是，有一個(gè)簡(jiǎn)單的解決方案——采用一致，穩(wěn)定和持續(xù)增長(zhǎng)進(jìn)度條的方式掩飾進(jìn)程中小的延遲。

圖片來源：Behance

讓用戶感覺進(jìn)度條很快

記住看起來的感知就和計(jì)算機(jī)運(yùn)算速度一樣重要。為了讓用戶感覺進(jìn)度條很快，可以讓進(jìn)度條在開始時(shí)慢一些，而在接近結(jié)束的時(shí)候移動(dòng)快一點(diǎn)。這種方式可以給用戶一種完成時(shí)間很快速的感覺。

圖片來源：Bechance

提供視覺上的干擾分散注意力

創(chuàng)造性的進(jìn)度指示器可以減少用戶對(duì)于時(shí)間的時(shí)長(zhǎng)觀念。如果app在等待時(shí)為用戶提供了一些有趣的視覺干擾去觀看，這會(huì)讓用戶更少的留意到在等待這件事情。因此，為了確保用戶在等待什么發(fā)生的時(shí)候不感覺到無聊，可以提供用戶一個(gè)干擾來分散注意力。比如下面的例子，干擾可以是有趣的。

圖片來源：Behance

或者干擾也可以很可愛…

圖片來源：Vimeo

或者是出其不意的抓住用戶的注意力，等候app加載。

好的動(dòng)畫可以分散訪問用戶的注意力，讓他們無視很長(zhǎng)的加載時(shí)間。圖片來源：Behance。

傳統(tǒng)進(jìn)度指示器的絕佳替代

正如剛剛所了解到的，當(dāng)操作需要花費(fèi)一定時(shí)間時(shí)，應(yīng)當(dāng)讓用戶明白使用進(jìn)度指示器。然而，當(dāng)隱藏在進(jìn)度指示器后的意圖是好的時(shí)候，最后的結(jié)果常證明是壞的。Luke Wroblewski在他的文章中提到：“定義上的進(jìn)度指示器喚起注意到用戶需要去等待。這就好像等待時(shí)鐘運(yùn)轉(zhuǎn)——當(dāng)你這樣做的，時(shí)間似乎流逝得更慢了?！彪S著進(jìn)度指示器被引用到了UI領(lǐng)域，設(shè)計(jì)師經(jīng)常讓用戶“觀看時(shí)鐘”。盡管這比什么都不做更好，但是UI設(shè)計(jì)時(shí)應(yīng)當(dāng)永遠(yuǎn)致力于讓等待變得更為愉悅。

好的是，有一個(gè)進(jìn)度指示器的絕佳替代，技術(shù)使得用戶在等待時(shí)有了更好的體驗(yàn)。這種技術(shù)被稱為加載占位符，加載占位符(換句話說，臨時(shí)信息存儲(chǔ)器)本質(zhì)上是一頁(yè)空白版。比起展示一個(gè)進(jìn)度指示器，加載占位符專注在實(shí)際的進(jìn)程上，并且創(chuàng)造了什么即將到來的預(yù)期。隨著信息逐漸的顯示在屏幕上，這構(gòu)建了一種事情正在立即發(fā)生的感覺，用戶會(huì)認(rèn)為在他們等待的時(shí)候應(yīng)用正在運(yùn)行。

當(dāng)內(nèi)容加載的時(shí)候，媒體使用這個(gè)小技巧像占位符一樣展示簡(jiǎn)單的框架。加載的屏幕也會(huì)讓用戶感覺熟悉加載內(nèi)容的整體結(jié)構(gòu)。

媒體的焦點(diǎn)在被加載的內(nèi)容，而不是在加載的事實(shí)。圖片來源：merhl

結(jié)論

不管我們?nèi)绾问刮覀兊腶pp或者網(wǎng)站運(yùn)行快速，總是有一些操作和進(jìn)程需要時(shí)間去處理。等待動(dòng)畫，比如旋轉(zhuǎn)等待動(dòng)畫和完成百分比指示器，都通過告知用戶目前的工作狀態(tài)減少了用戶感知到的不確定性，并且增加了用戶愿意停留等待信息加載的可能性。

經(jīng)驗(yàn)法則是對(duì)于花費(fèi)2-10s的合理快速反應(yīng)操作使用一個(gè)循環(huán)指示器或者加載占位符，而對(duì)于超過10s的操作使用完成百分比指示器。當(dāng)考慮選擇加載占位符還是循環(huán)指示器時(shí)，更傾向于選擇加載占位符，因?yàn)樗幸粋€(gè)重要的優(yōu)勢(shì)：加載占位符可以減少對(duì)于花費(fèi)數(shù)毫秒的操作的時(shí)間感知從而改善體驗(yàn)。

譯者：xElaine

來源：http://www.jianshu.com/p/c16b2fe97f3c

本文由 @xElaine 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

原文地址：https：//www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/