不管如何精心設(shè)計(jì)你的用戶界面，都有可能用戶從一個(gè)頁面切換到另外一個(gè)頁面時(shí)，不得不等待一些時(shí)間讓頁面加載完成。
加載時(shí)間可能會(huì)損害你的網(wǎng)站的整體用戶體驗(yàn)，讓用戶等待時(shí)間過長。如果用戶有這樣的感覺，他們很可能會(huì)放棄繼續(xù)訪問你的網(wǎng)站，去別的地方。下面分享幾種方法讓用戶感覺等待的時(shí)間變得更快或者等待的時(shí)候更有趣。
如果用戶的連接速度很慢，它可能需要一段時(shí)間對(duì)于一個(gè)站點(diǎn)來填充屏幕上的內(nèi)容。用戶的等待時(shí)間開始的時(shí)候，他們開始行動(dòng)，而最壞的情況是當(dāng)他們沒有任何指示，該網(wǎng)站已收到它。當(dāng)你的網(wǎng)站沒有通知用戶，這需要一些時(shí)間來完成頁面加載時(shí)，用戶往往認(rèn)為沒有收到請(qǐng)求，并再次嘗試，額外的等待有很多由于缺乏反饋。讓用戶體驗(yàn)更好，我們需要給網(wǎng)站一個(gè)暗示“網(wǎng)站正在發(fā)生的事情，提供視覺反饋”。
靜態(tài)提示是有一個(gè)進(jìn)度靜止圖像或文本的，如“加載中…”或“請(qǐng)稍候…”表示已收到請(qǐng)求。雖然比沒有任何反饋強(qiáng)，但靜態(tài)提示也并不是一個(gè)好的體驗(yàn)。網(wǎng)站沒有提示內(nèi)容被加載的進(jìn)度，所以他們不知道是否加載被卡住了或者要等待的時(shí)長也不知道。
提示用戶需要等待的時(shí)間，為了減少用戶對(duì)事情的不確定性，使用進(jìn)度提示，加載頁面需要的時(shí)間比。
短時(shí)間的加載提示動(dòng)畫
最簡單的形式是加載提示動(dòng)畫這種類型的視覺反饋就說明了一個(gè)事實(shí)：用戶必須等待，但并沒有說他們應(yīng)該等多久。作為一般規(guī)則，你應(yīng)該快速行動(dòng)，使用這種類型的加載提示動(dòng)畫（2–10秒）。
一個(gè)旋轉(zhuǎn)的灰色線從中心點(diǎn)輻射是一個(gè)標(biāo)準(zhǔn)的方法。
加載動(dòng)態(tài)圖通常用下拉刷新手勢一起使用。它作為UI的兩態(tài)之間的中介，幫助用戶理解屏幕變化狀態(tài)。
蘋果的iOS郵件應(yīng)用程序
需要等待長時(shí)間的加載提示動(dòng)畫
如果需要用戶花較長的時(shí)間等待，那么你應(yīng)該給用戶一個(gè)明確的指示，告訴他們需要等待多長時(shí)間，你應(yīng)該使用百分比做動(dòng)畫告訴用戶需要更長的等待時(shí)間（可能需要10秒或更多）。
或者你可以提供一個(gè)運(yùn)行總時(shí)間估計(jì)，不用是精確的，一個(gè)簡單的，“這可能需要一分鐘就可以告知用戶，并鼓勵(lì)他們等待。
在Mac OS X安裝軟件更新
如何快速讓您的內(nèi)容加載在用戶的頭腦，當(dāng)試圖網(wǎng)站加載有一個(gè)更快的用戶體驗(yàn)，你可以縮短感知的時(shí)間比實(shí)際的時(shí)間短。你可以填補(bǔ)等待時(shí)間使用內(nèi)容、動(dòng)畫、或行動(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)度條感覺更快的簡單技術(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)度條在開始緩慢加速到最終給用戶一個(gè)快速的完成時(shí)間。
展示頁面的骨架
頁面的骨架基本上是一個(gè)空白的頁面，信息逐步加載。它對(duì)傳統(tǒng)動(dòng)畫的指標(biāo)提供了一種替代。而不是顯示一個(gè)抽象的部件，骨架屏幕創(chuàng)建的預(yù)期是什么來讓用戶專注于過程而不是等待時(shí)間。
頁面的骨架加載迅速因?yàn)樗且粋€(gè)小的圖像，通常是由簡單的形狀。這些技術(shù)可以兼容移動(dòng)應(yīng)用程序，因?yàn)楣羌苣０蹇梢栽诒镜卮鎯?chǔ)在應(yīng)用程序的數(shù)據(jù)。臉譜網(wǎng)的應(yīng)用為iOS顯示用戶的灰色塊和線條來表示圖像和文本為應(yīng)用程序加載。一旦它完成加載，圖片和文字的地方出現(xiàn)在頁面的骨架位置上，這讓用戶關(guān)注在加載過程而忽略等待的時(shí)長。
漸進(jìn)圖像加載
新的應(yīng)用程序和網(wǎng)站有更多的圖像，但他們的加載過程是好的，因?yàn)樗鼤?huì)影響性能和用戶體驗(yàn)?？梢詣?chuàng)建一個(gè)漸進(jìn)圖像加載的模糊效果。
一個(gè)很好的例子中，模糊后的圖像以及圖像覆蓋在帖子內(nèi)容直到圖像完全加載。首先，它加載一個(gè)小模糊的圖像（縮略圖）進(jìn)而過渡到大的圖像。縮略圖很小（只有幾KB）結(jié)合模糊效果可以比純色更好的占位符，在不犧牲有效載荷。
介質(zhì)使用模糊創(chuàng)建一個(gè)漸進(jìn)圖像加載效果
視覺干擾
你應(yīng)該總是嘗試如果不能縮短線路使等待更愉快，保證用戶不厭倦在等待一些事情的發(fā)生，為他們提供一些分心動(dòng)畫。好的動(dòng)畫可以分散用戶關(guān)注等待的時(shí)長，讓他們忽略了等待的時(shí)間。
