哈嘍，這里是Clip設(shè)計(jì)夾，今天分享的是「等待時刻的交互體驗(yàn)」。打開APP一直在加載轉(zhuǎn)圈、快遞位置長時間不更新、預(yù)計(jì)時間到了外賣還沒送達(dá)——這些時刻是不是讓你越等越煩躁？這些場景一旦卡住，我們都會很著急：系統(tǒng)怎么沒反應(yīng)？繼續(xù)等下去有用嗎？

所以專門對“等待體驗(yàn)”進(jìn)行針對性設(shè)計(jì)特別有必要。只要選對設(shè)計(jì)組件和設(shè)計(jì)策略，就算是等待也能讓操作流程繼續(xù)順下去，不破壞使用沉浸感，減少用戶焦慮。

下面就來聊聊這些等待時刻如何針對性設(shè)計(jì)～

一、兩種等待類型分析

這里將等待時刻分為可預(yù)測型和不可預(yù)測型兩種類型。

1. 可預(yù)測型

可預(yù)測表示等待完成的時間是明確的，例如清晰告知外賣送達(dá)時間、司機(jī)還有多久到達(dá)、加載還需多久等。用戶知道了大概需要等待的時間，對等待有預(yù)期也會對產(chǎn)品也更信任。

但如果進(jìn)度長時間卡住不動或者實(shí)際時間跟預(yù)計(jì)等待時間對不上，這些情況會對產(chǎn)品的信任度造成影響。

就像前段時間我使用TB閃購點(diǎn)過兩次外賣，每次送達(dá)時間都比預(yù)計(jì)時間要長很多，點(diǎn)過兩次之后耐心耗盡就不想再用了。

可預(yù)測的核心是“準(zhǔn)確、可視化地展示進(jìn)度”，靠譜最重要。預(yù)計(jì)到達(dá)時間寧可往長了說，也別吹得太離譜，比如對外宣稱12小時達(dá)，結(jié)果等了一天了還沒送到，這種不靠譜的宣傳會大大降低對產(chǎn)品的信任度。

設(shè)計(jì)組件

進(jìn)度條：表示操作正在進(jìn)行中以及操作的進(jìn)度。

計(jì)時器：適合等待時間短、能算得準(zhǔn)的場景，比如看廣告時的 “5秒后可跳過”。

文字說明：主要用于顯示打車、送外賣、寄快遞等場景的預(yù)估時間展示。

比如外賣、電商平臺常將預(yù)計(jì)到達(dá)時間(ETA)作為訂單狀態(tài)展示，例如用戶下單后實(shí)時顯示配送預(yù)計(jì)送達(dá)時間“預(yù)計(jì)x天后到達(dá)”。ETA需根據(jù)交通、天氣等動態(tài)數(shù)據(jù)每5-10分鐘實(shí)時更新一次，避免信息滯后。

步驟條：提示用戶進(jìn)度以及當(dāng)前的步驟，用于引導(dǎo)用戶按照步驟完成任務(wù)，常跟進(jìn)度條搭配使用，用來顯示當(dāng)前進(jìn)度。

2. 不可預(yù)測型等待

像服務(wù)器延遲、驗(yàn)證處理這些場景說不準(zhǔn)需要等多久。如果在不確定的情況下一直讓用戶干等著很容易焦慮、犯嘀咕。要是沒任何反饋，他們會覺得“肯定出問題了”，要么反復(fù)點(diǎn)擊刷新按鈕，要么干脆把APP關(guān)了。

既然無法提供準(zhǔn)確的剩余時間，那么反饋的重點(diǎn)應(yīng)該是讓用戶知道“系統(tǒng)正在運(yùn)行沒有卡住”。通常采用加載器、骨架屏等loading加載的方式，不顯示明確的預(yù)計(jì)完成時間，而是傳達(dá)一種正在進(jìn)行中的狀態(tài)。

設(shè)計(jì)組件

加載器：表示操作正在進(jìn)行中但不知道具體進(jìn)度。環(huán)形加載器通常用于短時間的加載過程，線性加載器通常用于下載大型文件等長時間的加載。

加載器也分為無限型和有限型兩種類型：

無限型加載指加載loading沒有起點(diǎn)和終點(diǎn)，說明加載完成的時間無法預(yù)估，適用于服務(wù)器響應(yīng)時間不確定、系統(tǒng)臨時卡頓的情況。但它能給的反饋少，不容易讓用戶有預(yù)期；

有限型加載指加載的時候進(jìn)度條會慢慢填滿，表明進(jìn)度快加載完了，給用戶一種“再等等馬上就好”的心理暗示。適合用于加載時間有預(yù)估范圍但沒法給出精確數(shù)字的情況。但要避免進(jìn)度條長時間一直卡著不動的情況，免得讓用戶著急。

除了常見的環(huán)形/線性加載器，還有一些APP會把品牌元素融入到加載器中，將加載loading設(shè)計(jì)成個性化、趣味化的效果。例如美團(tuán)的頁面加載，融入了自家IP形象奔跑的動畫效果，就算等待加載的這幾秒鐘也能讓用戶感受到統(tǒng)一的品牌體驗(yàn)。

動效特點(diǎn)：加載器屬于最基礎(chǔ)的循環(huán)動效，大多是圓形轉(zhuǎn)圈。點(diǎn)擊按鈕、打開彈窗、短時間加載內(nèi)容時用得多，不需要占太多頁面空間，交互后能馬上給反饋。但傳遞的信息有限，只能告訴用戶“功能正在運(yùn)行”，沒法傳遞太多內(nèi)容。

骨架屏：在數(shù)據(jù)加載之前顯示的灰色占位框，把頁面的排版結(jié)構(gòu)提前顯示出來，給用戶一個視覺上的反饋，讓用戶知道“接下來加載出來的內(nèi)容會是這樣的”。

動效特點(diǎn)：靜態(tài)的骨架屏加上閃爍的重復(fù)動效可以呈現(xiàn)出頁面不斷加載的的動態(tài)效果，比單純的轉(zhuǎn)圈加載更能減少“等得久”的感覺，用于提高用戶體驗(yàn)。

通常第一次打開APP加載整個頁面時會用到，現(xiàn)在無限滾動的場景多了，列表、卡片、個人主頁這些模塊也常用局部的骨架屏加載。

二、五個設(shè)計(jì)技巧優(yōu)化等待體驗(yàn)

上面提到的設(shè)計(jì)策略，核心都是在等待這種不確定的場景里穩(wěn)住用戶心態(tài)。

在等待的場景中，大家都會感覺時間很漫長，比如實(shí)際只等了1分鐘，感覺像等了5分鐘。如果等待期間不提供任何的反饋，還會琢磨功能正常嗎？是不是壞了？

解決這些問題的關(guān)鍵是營造可預(yù)測性，讓用戶覺得馬上就能加載完成。就算實(shí)際處理很慢，也要通過加載動效這些可視化反饋，讓用戶覺得一直在順利推進(jìn)。

那么在等待期間有哪些需要注意的交互呢？下面總結(jié)了5個關(guān)鍵技巧，優(yōu)化我們在等待期間的體驗(yàn)。

1. 給出反饋

如果點(diǎn)擊之后沒有響應(yīng)，用戶可能會覺得系統(tǒng)卡住了，從而放棄重試或者退出應(yīng)用。所以哪怕等待一兩秒鐘也要馬上給出反饋。

2. 搭配使用組件

根據(jù)產(chǎn)品功能、使用場景靈活選擇進(jìn)度條、加載器、骨架屏、步驟條等組件，不局限于一個場景中僅使用一個組件，通過組件的搭配使用明確告訴用戶APP運(yùn)行正常。

3. 符合心理預(yù)期

提供相對可靠的時間信息，避免超出用戶的預(yù)期。預(yù)估時間最好保守一些往長了說，比如打車時一開始提示“預(yù)計(jì)5分鐘后應(yīng)答”，讓用戶先有一個心理預(yù)期，實(shí)際應(yīng)答速度往往會比預(yù)計(jì)時間快，這樣既節(jié)省了時間也會讓用戶覺得這個產(chǎn)品很靠譜。

4. 提供備選方案

如果預(yù)計(jì)需要長時間的等待，考慮為用戶提供其他選擇，例如提示“等待完成后將通知您”，讓用戶可以在等待的過程中再進(jìn)行其他的操作，減緩等待焦慮感。

例如現(xiàn)在很多產(chǎn)品會在客服功能中接入“Al智能客服”，當(dāng)用戶在排隊(duì)等待人工客服的過程中，推薦用戶優(yōu)選使用AI客服來查詢問題，這樣很有可能AI客服就解決了問題，省去了人工客服的成本。

5. 把等待加載變成學(xué)習(xí)時間

與其在加載期間讓用戶白白等待，不如提供一些有價值或者有意思的內(nèi)容供用戶學(xué)習(xí)觀看。

比如進(jìn)入懂車帝的3D看車過程中，由于需要加載3D車模型和空間等復(fù)雜的內(nèi)容，進(jìn)入前有一段進(jìn)場加載loading。

在加載的這段時間里沒有讓用戶對著進(jìn)度條發(fā)呆，而是在進(jìn)度條上方提供了六個手勢操作教學(xué)，這樣的設(shè)計(jì)首先能抓住用戶的注意力，其次是能引導(dǎo)用戶在進(jìn)入功能前提前了解操作，既方便后期好操作，也省去了進(jìn)入新功能之后單獨(dú)的操作引導(dǎo)，可以說是一舉多得的作用。

最后

隨著界面承載的功能越來越多，用戶注冊、內(nèi)容提交等流程也越來越復(fù)雜，等待似乎是沒法避免的。

如果單純依靠技術(shù)手段來提升等待速度，總會有體驗(yàn)上的局限性。這時候設(shè)計(jì)師通過精準(zhǔn)、貼心的設(shè)計(jì)方案來優(yōu)化“等待體驗(yàn)”，很可能就能解決體驗(yàn)問題，提升產(chǎn)品的服務(wù)質(zhì)量。

慢慢來比較快，如覺得有幫助，請點(diǎn)個贊&收藏，分享給更多的朋友，謝謝！

作者：Clip設(shè)計(jì)夾