如果用戶的連接速度很慢，則站點(diǎn)可能需要一段時(shí)間才能在屏幕上填充內(nèi)容

無(wú)論您的用戶界面設(shè)計(jì)得多么好，無(wú)論何時(shí)何地，使用它的人們都必須等待加載某些內(nèi)容。

杭州網(wǎng)站建設(shè)時(shí)間可能會(huì)損害整體體驗(yàn)。讓用戶等待太久才能加載您的應(yīng)用程序可能會(huì)使用戶不耐煩。如果用戶有這種感覺，他們將放棄您的網(wǎng)站并轉(zhuǎn)到其他地方。值得慶幸的是，您可以采取一些措施來(lái)加快用戶的時(shí)間感，使他們感覺自己的內(nèi)容加載速度比實(shí)際速度要快。

 
1.切勿讓用戶在沒(méi)有反饋的情況下等待
如果用戶的連接速度很慢，則站點(diǎn)可能需要一段時(shí)間才能在屏幕上填充內(nèi)容。用戶的等待時(shí)間始于他們開始執(zhí)行操作的時(shí)間，最糟糕的情況是他們沒(méi)有任何跡象表明該站點(diǎn)已收到該操作。

當(dāng)您的站點(diǎn)未能通知用戶它需要一些時(shí)間才能完成操作時(shí)，用戶通常會(huì)認(rèn)為它沒(méi)有收到請(qǐng)求，因此他們會(huì)重試。由于缺乏反饋，導(dǎo)致大量額外的水龍頭。讓別人快樂(lè)，我們需要給一個(gè)跡象表明，事情正在發(fā)生，提供視覺反饋。

 
2.避免使用靜態(tài)進(jìn)度指示器
靜態(tài)進(jìn)度指示器是圖像或文本不動(dòng)的指示器，例如“正在加載...”或“請(qǐng)稍候...”以指示已接收到請(qǐng)求。雖然任何反饋總比沒(méi)有好，但靜態(tài)指標(biāo)卻是糟糕的UX。用戶沒(méi)有任何指示正在加載內(nèi)容的指示符，因此他們不確定該過(guò)程是否真的卡住了。

 
3.使用動(dòng)畫加載指示符
等待時(shí)間的心理學(xué)研究表明，等待一秒鐘后，用戶的注意力開始轉(zhuǎn)移，而沒(méi)有任何反饋。為了減少用戶的不確定性，請(qǐng)使用進(jìn)度指示器來(lái)執(zhí)行比該時(shí)間更長(zhǎng)的任何操作。（注意：不建議您在少于一秒鐘的時(shí)間內(nèi)加載動(dòng)畫，因?yàn)橛脩艨赡軙?huì)擔(dān)心屏幕上閃爍的內(nèi)容）。

無(wú)限負(fù)載旋轉(zhuǎn)器，可實(shí)現(xiàn)相當(dāng)快的操作
動(dòng)畫指標(biāo)的最簡(jiǎn)單形式是加載微調(diào)器。這種類型的視覺反饋僅說(shuō)明了用戶必須等待的事實(shí)，但沒(méi)有說(shuō)明他們應(yīng)該等待多長(zhǎng)時(shí)間。通常，應(yīng)將此類進(jìn)度指示器用于快速操作（2-10秒）。


從中心點(diǎn)放射出的灰線旋轉(zhuǎn)器是一種標(biāo)準(zhǔn)方法。

加載微調(diào)器通常與“拉動(dòng)刷新”手勢(shì)一起使用。它充當(dāng)UI的兩種狀態(tài)之間的中介，并幫助用戶了解屏幕更改時(shí)發(fā)生的情況。



完成百分比的動(dòng)畫可實(shí)現(xiàn)持久的操作
加載微調(diào)器不是指示持久加載的正確方法。如果我們知道什么時(shí)候會(huì)發(fā)生，等待它會(huì)更可忍。因此，要進(jìn)行長(zhǎng)時(shí)間的操作，您應(yīng)該清楚地指示用戶需要等待多長(zhǎng)時(shí)間。作為一般經(jīng)驗(yàn)法則，對(duì)于需要10秒鐘或更長(zhǎng)時(shí)間的較長(zhǎng)過(guò)程，應(yīng)使用“完成百分比”動(dòng)畫。



或者，您可以提供操作的一般時(shí)間估算。不要試圖精確，一個(gè)簡(jiǎn)單的“這可能需要一分鐘”就足以通知用戶并鼓勵(lì)他們等待。

 

4.調(diào)整用戶對(duì)時(shí)間的感知
用戶會(huì)想到內(nèi)容加載的速度。當(dāng)嘗試創(chuàng)建更快的用戶體驗(yàn)時(shí)，您可以縮短感知時(shí)間而不是實(shí)際時(shí)間。為此，您可以使用內(nèi)容，動(dòng)畫或用戶可以執(zhí)行的操作來(lái)填充等待時(shí)間。

進(jìn)度條
進(jìn)度條使用戶可以期望處理動(dòng)作的速度。進(jìn)度條的移動(dòng)方式會(huì)影響他們對(duì)加載時(shí)間的感知。為了使一個(gè)進(jìn)度條，感覺速度更快的用戶可以使用如下簡(jiǎn)單的技巧：

進(jìn)度欄永遠(yuǎn)都不應(yīng)停止，否則用戶會(huì)認(rèn)為該站點(diǎn)已凍結(jié)。最糟糕的情況是進(jìn)度條接近99％并突然停止。大多數(shù)用戶會(huì)對(duì)這種行為感到沮喪。
您可以通過(guò)立即穩(wěn)定地移動(dòng)進(jìn)度條來(lái)掩飾小延遲。
在開始時(shí)緩慢移動(dòng)進(jìn)度條，并在結(jié)束時(shí)加快進(jìn)度條，以使用戶快速了解完成時(shí)間。


骨架屏幕
等待時(shí)間是骨架屏幕（又稱臨時(shí)信息容器）的合適時(shí)間。骨架屏幕本質(zhì)上是頁(yè)面的空白版本，在該頁(yè)面中逐漸加載信息。它提供了傳統(tǒng)動(dòng)畫指示符的替代方法。骨架屏幕不是顯示抽象的小部件，而是創(chuàng)建對(duì)即將發(fā)生的事情的預(yù)期，并使用戶專注于進(jìn)度而不是等待時(shí)間。

骨架圖像加載迅速，因?yàn)樗ǔＪ怯珊?jiǎn)單形狀組成的小圖像。由于骨架模板可以與應(yīng)用程序的數(shù)據(jù)一起存儲(chǔ)在本地，因此在移動(dòng)應(yīng)用程序中可以進(jìn)一步采用這些技術(shù)。Facebook的iOS應(yīng)用程序向用戶顯示灰色塊和線條，以表示應(yīng)用程序加載時(shí)的圖像和文本。完成加載后，圖像和文本將顯示在臨時(shí)容器的位置。這并不比具有帶有微調(diào)器的加載屏幕快，但是在用戶的腦海中，感覺確實(shí)如此。


您可以使用的另一個(gè)速度技巧是后臺(tái)操作。打包到后臺(tái)操作中的動(dòng)作有兩個(gè)好處-用戶看不見它們，并且在用戶實(shí)際要求它們之前發(fā)生。在后臺(tái)進(jìn)行過(guò)程時(shí)，為用戶提供其他需要關(guān)注的內(nèi)容。一個(gè)很好的例子是在Instagram上上傳圖片。用戶選擇要分享的圖片后，就會(huì)開始上傳。該應(yīng)用程序邀請(qǐng)用戶在后臺(tái)上傳圖片時(shí)添加標(biāo)題和標(biāo)簽。當(dāng)用戶準(zhǔn)備好按“共享”按鈕時(shí)，上傳將完成，并且可以立即共享其圖片。

漸進(jìn)式圖像加載
隨著現(xiàn)代應(yīng)用程序和網(wǎng)站加載越來(lái)越多的圖像，請(qǐng)考慮其加載過(guò)程，因?yàn)檫@會(huì)影響性能和用戶體驗(yàn)。使用模糊效果可以創(chuàng)建漸進(jìn)式圖像加載效果。

一個(gè)很好的例子是中，它使帖子圖像的封面以及帖子內(nèi)容中的圖像模糊，直到圖像完全加載為止。首先，它加載小的模糊圖像（縮略圖），然后過(guò)渡到大圖像?？s略圖很?。ㄖ挥袔浊ё止?jié)），結(jié)合了模糊效果，可以提供比純色更好的占位符，而不會(huì)犧牲有效負(fù)載。



視覺分散
如果您不能縮短排隊(duì)時(shí)間，則應(yīng)始終嘗試使等待更加愉快。為了確保人們?cè)诘却虑榘l(fā)生時(shí)不會(huì)感到無(wú)聊，請(qǐng)給他們一些分心的東西。精美的動(dòng)畫可以分散您的訪問(wèn)者的注意力，并使他們忽略較長(zhǎng)的加載時(shí)間。