如何讓杭州建設(shè)網(wǎng)站4個技巧使加載時間更快

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

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

?

1.切勿讓用戶在沒有反饋的情況下等待

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

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

?

2.避免使用靜態(tài)進(jìn)度指示器

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

?

3.使用動畫加載指示符

等待時間的心理學(xué)研究表明，用戶等待一秒鐘后就開始轉(zhuǎn)移注意力而沒有任何反饋。為了減少用戶的不確定性，請使用進(jìn)度指示器執(zhí)行任何比此更長的時間。（注意：不建議您在少于一秒鐘的時間內(nèi)加載動畫，因為用戶可能會擔(dān)心屏幕上閃爍的內(nèi)容）。

無限負(fù)載旋轉(zhuǎn)器，可實現(xiàn)相當(dāng)快的操作

動畫指標(biāo)的最簡單形式是加載微調(diào)器。這種類型的視覺反饋僅說明了用戶必須等待的事實，但沒有說明他們應(yīng)該等待多長時間。通常，應(yīng)將此類進(jìn)度指示器用于快速操作（2-10秒）。

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

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

適用于iOS的Apple Mail應(yīng)用程序

完成百分比的動畫可實現(xiàn)持久的操作

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

圖片來源：Behance

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

在Mac OS X中安裝軟件更新

?

4.調(diào)整用戶對時間的感知

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

進(jìn)度條

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

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

圖片來源：Dribbble

骨架屏幕

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

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

后臺操作

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

漸進(jìn)式圖像加載

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

高端網(wǎng)站設(shè)計例子是中，它模糊了帖子圖像的封面以及帖子內(nèi)容中的圖像，直到圖像完全加載為止。首先，它加載小的模糊圖像（縮略圖），然后過渡到大圖像。縮略圖很?。ㄖ挥袔浊ё止?jié)），加上模糊效果，可以提供比純色更好的占位符，而不會犧牲有效負(fù)載。