當(dāng)我們?cè)O(shè)計(jì)產(chǎn)品的時(shí)候，我們沒(méi)有辦法模擬不同的加載速度。因此如果用戶(hù)等待太長(zhǎng)的時(shí)間才能看到內(nèi)容，并不是我們特意的安排。

網(wǎng)速不穩(wěn)定，尤其是當(dāng)我們加載圖片或音樂(lè)時(shí)，時(shí)間會(huì)較長(zhǎng)。在這種情況下，我們不得不考慮在這種間隙向用戶(hù)展示什么內(nèi)容才能讓他們感覺(jué)不枯燥。

加載動(dòng)圖(Spinner)

加載 Spinner 并不是暗示加載或思考的正確方式。默認(rèn)加載圖標(biāo)(例如 iOS 的加載動(dòng)畫(huà)效果是從中心點(diǎn)輻射的灰色線(xiàn)條)通常具有消極的含義。它們應(yīng)用于多種操作系統(tǒng)功能之中，包括設(shè)備啟動(dòng)、連接到網(wǎng)絡(luò)或者加載數(shù)據(jù)。

人們討厭只看到加載 Spinner，但是卻看不多進(jìn)度或時(shí)間。讓用戶(hù)盯著一個(gè)下載進(jìn)度條或者旋轉(zhuǎn)圈會(huì)讓跳出率提高。

不確定的等待時(shí)間比已知的、有限的等待時(shí)間讓人覺(jué)得更長(zhǎng)。你應(yīng)該給你的用戶(hù)一個(gè)清晰地等待時(shí)間。

進(jìn)度條可以告訴用戶(hù)這個(gè)過(guò)程需要花費(fèi)多長(zhǎng)時(shí)間，但是一般不太正確。你可以通過(guò)一些方法隱藏過(guò)程中的延遲，例如你可以在開(kāi)始的時(shí)候讓速度顯示地快一點(diǎn)，在結(jié)尾的時(shí)候，顯示速度慢一點(diǎn)。進(jìn)度條不應(yīng)該中斷，否則用戶(hù)就會(huì)認(rèn)為這個(gè) App 卡住了。

后臺(tái)操作

在后臺(tái)操作中包含行為有兩個(gè)優(yōu)點(diǎn)——用戶(hù)可見(jiàn);在用戶(hù)真正發(fā)出請(qǐng)求時(shí)就會(huì)加載完畢。當(dāng)程序在后臺(tái)運(yùn)營(yíng)時(shí)，給用戶(hù)呈現(xiàn)一些其他的內(nèi)容。一個(gè)很好的案例是在 Instagram 中加載圖片。用戶(hù)一旦選擇想要分享的圖片，就開(kāi)始加載。

在后臺(tái)加載圖片的過(guò)程中，Instagram 邀請(qǐng)用戶(hù)添加標(biāo)題和標(biāo)簽，當(dāng)用戶(hù)準(zhǔn)備按 “分享” 鍵時(shí)，加載過(guò)程就完成了，這時(shí)候就可以立刻分享圖片了。

仿真內(nèi)容和 Placeholder(占位符)

如果你無(wú)法縮短加載時(shí)間，那么你應(yīng)該試圖讓用戶(hù)在等待中更高興一點(diǎn)?？梢岳眠@個(gè)時(shí)間顯示一些臨時(shí)的信息。為了提高用戶(hù)的參與度，可以使用仿真內(nèi)容作為文本和圖片。

幾點(diǎn)小建議：

1、加載屏幕不應(yīng)該太亮，不需要太吸引眼球。Facebook 的灰色 Placeholder 就是一個(gè)很好的例子。當(dāng)加載內(nèi)容時(shí)使用模板元素，讓用戶(hù)熟悉將要加載的內(nèi)容的整體結(jié)構(gòu)。

2、如果要加載圖片，你可以在 placeholder 中使用加載圖片的主色調(diào)。Medium 的圖片加載效果比較好。首先加載一個(gè)小型的模糊圖片，然后轉(zhuǎn)化成一個(gè)清晰的大圖片。