不管如何精心設(shè)計(jì)你的用戶界面，都有可能用戶從一個(gè)頁(yè)面切換到另外一個(gè)頁(yè)面時(shí)，不得不等待一些時(shí)間讓頁(yè)面加載完成。

加載時(shí)間可能會(huì)損害你的網(wǎng)站的整體用戶體驗(yàn)，讓用戶等待時(shí)間過(guò)長(zhǎng)。如果用戶有這樣的感覺(jué)，他們很可能會(huì)放棄繼續(xù)訪問(wèn)你的網(wǎng)站，去別的地方。下面分享幾種方法讓用戶感覺(jué)等待的時(shí)間變得更快或者等待的時(shí)候更有趣。

一、不要讓用戶等待，提供視覺(jué)反饋

如果用戶的連接速度很慢，它可能需要一段時(shí)間對(duì)于一個(gè)站點(diǎn)來(lái)填充屏幕上的內(nèi)容。用戶的等待時(shí)間開(kāi)始的時(shí)候，他們開(kāi)始行動(dòng)，而最壞的情況是當(dāng)他們沒(méi)有任何指示，該網(wǎng)站已收到它。當(dāng)你的網(wǎng)站沒(méi)有通知用戶，這需要一些時(shí)間來(lái)完成頁(yè)面加載時(shí)，用戶往往認(rèn)為沒(méi)有收到請(qǐng)求，并再次嘗試，額外的等待有很多由于缺乏反饋。讓用戶體驗(yàn)更好，我們需要給網(wǎng)站一個(gè)暗示"網(wǎng)站正在發(fā)生的事情，提供視覺(jué)反饋"。

二、避免使用靜態(tài)進(jìn)度的提示

靜態(tài)提示是有一個(gè)進(jìn)度靜止圖像或文本的，如"加載中…"或"請(qǐng)稍候…"表示已收到請(qǐng)求。雖然比沒(méi)有任何反饋強(qiáng)，但靜態(tài)提示也并不是一個(gè)好的體驗(yàn)。網(wǎng)站沒(méi)有提示內(nèi)容被加載的進(jìn)度，所以他們不知道是否加載被卡住了或者要等待的時(shí)長(zhǎng)也不知道。

三、使用動(dòng)態(tài)加載的提示

提示用戶需要等待的時(shí)間，為了減少用戶對(duì)事情的不確定性，使用進(jìn)度提示，加載頁(yè)面需要的時(shí)間比。

短時(shí)間的加載提示動(dòng)畫(huà)

最簡(jiǎn)單的形式是加載提示動(dòng)畫(huà)這種類型的視覺(jué)反饋就說(shuō)明了一個(gè)事實(shí)：用戶必須等待，但并沒(méi)有說(shuō)他們應(yīng)該等多久。作為一般規(guī)則，你應(yīng)該快速行動(dòng)，使用這種類型的加載提示動(dòng)畫(huà)（2–10秒）。

一個(gè)旋轉(zhuǎn)的灰色線從中心點(diǎn)輻射是一個(gè)標(biāo)準(zhǔn)的方法。

加載動(dòng)態(tài)圖通常用下拉刷新手勢(shì)一起使用。它作為UI的兩態(tài)之間的中介，幫助用戶理解屏幕變化狀態(tài)。

蘋(píng)果的iOS郵件應(yīng)用程序

需要等待長(zhǎng)時(shí)間的加載提示動(dòng)畫(huà)

如果需要用戶花較長(zhǎng)的時(shí)間等待，那么你應(yīng)該給用戶一個(gè)明確的指示，告訴他們需要等待多長(zhǎng)時(shí)間，你應(yīng)該使用百分比做動(dòng)畫(huà)告訴用戶需要更長(zhǎng)的等待時(shí)間（可能需要10秒或更多）。

或者你可以提供一個(gè)運(yùn)行總時(shí)間估計(jì)，不用是精確的，一個(gè)簡(jiǎn)單的，"這可能需要一分鐘就可以告知用戶，并鼓勵(lì)他們等待。

在Mac OS X安裝軟件更新

四、調(diào)整用戶對(duì)時(shí)間的感覺(jué)

如何快速讓您的內(nèi)容加載在用戶的頭腦，當(dāng)試圖網(wǎng)站加載有一個(gè)更快的用戶體驗(yàn)，你可以縮短感知的時(shí)間比實(shí)際的時(shí)間短。你可以填補(bǔ)等待時(shí)間使用內(nèi)容、動(dòng)畫(huà)、或行動(dòng)用戶可以操作的內(nèi)容。

進(jìn)度條

一個(gè)進(jìn)度條，讓用戶期望網(wǎng)站如何快速的行動(dòng)正在處理。你的進(jìn)度條的移動(dòng)會(huì)影響他們?nèi)绾慰创?fù)載時(shí)間的方式。為了使一個(gè)進(jìn)度條感覺(jué)更快的簡(jiǎn)單技術(shù)：

1、進(jìn)度欄應(yīng)從未停止，否則用戶會(huì)認(rèn)為網(wǎng)站凍結(jié)，最糟糕的情況是當(dāng)進(jìn)度條的方法99%、突然停止，大多數(shù)用戶會(huì)被這種行為感到沮喪。

2、你可以偽裝你的進(jìn)度條小延遲移動(dòng)即時(shí)穩(wěn)定。

3、將進(jìn)度條在開(kāi)始緩慢加速到最終給用戶一個(gè)快速的完成時(shí)間。

展示頁(yè)面的骨架

頁(yè)面的骨架基本上是一個(gè)空白的頁(yè)面，信息逐步加載。它對(duì)傳統(tǒng)動(dòng)畫(huà)的指標(biāo)提供了一種替代。而不是顯示一個(gè)抽象的部件，骨架屏幕創(chuàng)建的預(yù)期是什么來(lái)讓用戶專注于過(guò)程而不是等待時(shí)間。

頁(yè)面的骨架加載迅速因?yàn)樗且粋€(gè)小的圖像，通常是由簡(jiǎn)單的形狀。這些技術(shù)可以兼容移動(dòng)應(yīng)用程序，因?yàn)楣羌苣０蹇梢栽诒镜卮鎯?chǔ)在應(yīng)用程序的數(shù)據(jù)。臉譜網(wǎng)的應(yīng)用為iOS顯示用戶的灰色塊和線條來(lái)表示圖像和文本為應(yīng)用程序加載。一旦它完成加載，圖片和文字的地方出現(xiàn)在頁(yè)面的骨架位置上，這讓用戶關(guān)注在加載過(guò)程而忽略等待的時(shí)長(zhǎng)。

漸進(jìn)圖像加載

新的應(yīng)用程序和網(wǎng)站有更多的圖像，但他們的加載過(guò)程是好的，因?yàn)樗鼤?huì)影響性能和用戶體驗(yàn)?？梢詣?chuàng)建一個(gè)漸進(jìn)圖像加載的模糊效果。

一個(gè)很好的例子中，模糊后的圖像以及圖像覆蓋在帖子內(nèi)容直到圖像完全加載。首先，它加載一個(gè)小模糊的圖像（縮略圖）進(jìn)而過(guò)渡到大的圖像。縮略圖很?。ㄖ挥袔譑B）結(jié)合模糊效果可以比純色更好的占位符，在不犧牲有效載荷。

介質(zhì)使用模糊創(chuàng)建一個(gè)漸進(jìn)圖像加載效果

視覺(jué)干擾

你應(yīng)該總是嘗試如果不能縮短線路使等待更愉快，保證用戶不厭倦在等待一些事情的發(fā)生，為他們提供一些分心動(dòng)畫(huà)。好的動(dòng)畫(huà)可以分散用戶關(guān)注等待的時(shí)長(zhǎng)，讓他們忽略了等待的時(shí)間。