編輯導(dǎo)語：在應(yīng)用軟件使用過程中，用戶可能會(huì)經(jīng)歷等待場(chǎng)景，此時(shí)在交互設(shè)計(jì)層面，要如何緩解用戶的等待焦慮，降低用戶流失、保障用戶的產(chǎn)品使用體驗(yàn)？也許你可以利用進(jìn)度指示來緩解用戶的等待焦慮。本文作者便對(duì)進(jìn)度指示的表現(xiàn)形式、應(yīng)用場(chǎng)景等方面做了總結(jié)，一起來看一下。

一、為什么需要進(jìn)度指示?

人對(duì)等待的忍耐是有限度的，當(dāng)一個(gè)操作需要等待較長(zhǎng)時(shí)間時(shí)，用戶會(huì)產(chǎn)生焦慮感，也更容易放棄這個(gè)操作甚至放棄整個(gè)產(chǎn)品，所以系統(tǒng)在適當(dāng)?shù)臅r(shí)機(jī)向用戶反饋當(dāng)前的進(jìn)度就十分必要。

根據(jù)《可用性工程》一書中的研究：

• 0.1 秒大約是讓用戶感覺到系統(tǒng)正在立即做出反應(yīng)的極限，這意味著除了顯示結(jié)果之外不需要任何特殊的反饋。
• 1.0 秒大約是用戶思想流保持不間斷的極限，即使用戶會(huì)注意到延遲。正常情況下，大于 0.1 秒但小于 1.0 秒的延遲不需要特別的反饋，但用戶確實(shí)失去了直接對(duì)數(shù)據(jù)進(jìn)行操作的感覺。
• 10 秒大約是將用戶的注意力集中在對(duì)話上的限制。對(duì)于更長(zhǎng)的延遲，用戶將希望在等待計(jì)算機(jī)完成的同時(shí)執(zhí)行其他任務(wù)，因此應(yīng)向他們提供反饋，指示計(jì)算機(jī)預(yù)計(jì)何時(shí)完成。如果響應(yīng)時(shí)間可能變化很大，則延遲期間的反饋尤其重要，因?yàn)橛脩魧⒉恢罆?huì)發(fā)生什么。

由于數(shù)據(jù)量大或網(wǎng)絡(luò)原因，不可避免地會(huì)出現(xiàn)等待時(shí)間長(zhǎng)的情況。以下是常見的例子：

• 對(duì)大文件的操作。如打開大文件、復(fù)制大文件、刪除大文件等。
• 軟件啟動(dòng)過程。如一些大型游戲、Adobe軟件等。
• 需聯(lián)網(wǎng)的操作。如上傳、下載、播放等。
• 搜索。無論聯(lián)網(wǎng)與否，只要數(shù)據(jù)量太大，都可能出現(xiàn)等待時(shí)間長(zhǎng)的情況。
• 安裝軟件。

所以，如何通過進(jìn)度指示來解決用戶焦慮的問題，就是用戶體驗(yàn)設(shè)計(jì)需要考慮的了。

二、進(jìn)度指示的表現(xiàn)形式

當(dāng)說到進(jìn)度指示時(shí)，你的第一反應(yīng)可能就是一個(gè)條形進(jìn)度條，其實(shí)除了條形進(jìn)度條，進(jìn)度指示的表現(xiàn)形式還有很多種。

1. 進(jìn)度條 Progress

這是大多數(shù)人能想到的一種形式，細(xì)分的話還可以分為條形進(jìn)度條、環(huán)形進(jìn)度條、步驟進(jìn)度條、水波進(jìn)度條（如手機(jī)充電效果）等。進(jìn)度條通常會(huì)與百分比一起使用。

progress bar

2. 加載 Loading

循環(huán)加載動(dòng)畫，最常見的樣式是菊花型。循環(huán)加載動(dòng)畫能讓用戶知道程序現(xiàn)在還在運(yùn)行，而不是誤以為頁面卡住或死機(jī)。用于加載中狀態(tài)。但在加載過程中用戶無法進(jìn)一步操作，需等待加載完畢后才能繼續(xù)操作，所以更適用于加載過程中用戶不需繼續(xù)操作的情況。

loading

3. 骨架屏 Skeleton Screen

也叫加載占位圖。是在頁面數(shù)據(jù)加載前，在需要等待加載內(nèi)容的位置，先用占位圖形給用戶展示出頁面的大致結(jié)構(gòu)，等到數(shù)據(jù)請(qǐng)求返回后再顯示具體數(shù)據(jù)內(nèi)容。

skeleton screen

4. 步驟條 Step

將某項(xiàng)流程拆分為具體的幾個(gè)步驟，引導(dǎo)用戶按流程完成任務(wù)。

step

三、進(jìn)度指示的應(yīng)用場(chǎng)景

進(jìn)度指示的方法這么多種，具體的場(chǎng)景我們應(yīng)該如何運(yùn)用，需要注意哪些問題呢？

針對(duì)上面提到的那些不可避免的等待時(shí)間長(zhǎng)的情況，推薦使用這些方法。

1. 打開大文件

有時(shí)文件過大時(shí)，打開的時(shí)間會(huì)很長(zhǎng)，這時(shí)就可以用一個(gè)條形進(jìn)度條顯示當(dāng)前的狀態(tài)。

打開文件進(jìn)度條

2. 拷貝文件、刪除文件

一次性拷貝或刪除多個(gè)文件時(shí)，常常也需要很長(zhǎng)的時(shí)間，比較好的顯示當(dāng)前狀態(tài)的方式是，明確告知用戶一共有多少個(gè)文件，現(xiàn)在已經(jīng)進(jìn)行到多少百分比了，甚至還可以告知大概還需多長(zhǎng)時(shí)間。

拷貝或刪除文件

3. 啟動(dòng)畫面

有些軟件的啟動(dòng)時(shí)間會(huì)很長(zhǎng)，比較正面的做法是在啟動(dòng)畫面中根據(jù)軟件的特性向用戶展示軟件相關(guān)的圖像。

比如Adobe Illustrator啟動(dòng)時(shí)會(huì)展示由設(shè)計(jì)師或插畫師精心設(shè)計(jì)的圖像，這不僅緩解用戶在等待加載時(shí)的焦慮感，還能提高用戶對(duì)軟件特性的印象，一些游戲軟件在啟動(dòng)畫面也做了很好的示例，例如在啟動(dòng)時(shí)通過游戲中的相關(guān)動(dòng)畫來增加趣味感（前提是不要犧牲加載時(shí)間），或者提供一些游戲中的小技巧。

一個(gè)負(fù)面的例子就是很多手機(jī)APP的啟動(dòng)畫面，滿屏都是廣告，非常影響用戶體驗(yàn)，對(duì)于一些年紀(jì)大的人來說，還很容易誤點(diǎn)進(jìn)自己根本不需要的網(wǎng)站。

AI啟動(dòng)畫面

4. 上傳與下載

條形進(jìn)度條 + 網(wǎng)速 + 預(yù)估時(shí)間

經(jīng)常使用云盤的話，會(huì)發(fā)現(xiàn)在云盤上進(jìn)行上傳與下載操作時(shí)，常會(huì)遇到因?yàn)榫W(wǎng)絡(luò)差或文件太大而造成等待時(shí)間過長(zhǎng)的情況。所以云盤一般會(huì)實(shí)時(shí)顯示網(wǎng)絡(luò)速度和文件大小。

上傳與下載

5. 渲染列表

在網(wǎng)絡(luò)較慢或圖文數(shù)據(jù)較多時(shí)可使用骨架屏來渲染列表，比Loading視覺效果好，也可以適當(dāng)使用一點(diǎn)動(dòng)畫效果，緩解用戶的焦慮感。

骨架屏渲染列表

6. 填寫表單

步驟條

如過注冊(cè)操作需要的信息很多，可以把信息分類，每一類為一個(gè)步驟，用戶就按照順序完成整個(gè)操作， 步驟條一般不得少于 2 步。

四、緩解用戶等待焦慮問題的其他Tips

• 可后臺(tái)進(jìn)行；
• 可控制，如可暫停、可取消。

本文由 @Tifa Tang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議