目錄：

一、為什么需要加載

二、常見(jiàn)的加載場(chǎng)景

三、加載的 10 種類型和分析

四、總結(jié)

一、為什么需要加載？

1 給用戶反饋

在上篇《尼爾森10大可用性原則》中我們說(shuō)過(guò)，系統(tǒng)應(yīng)該通過(guò)在合理時(shí)間內(nèi)的適當(dāng)反饋，向用戶通知當(dāng)前的狀態(tài)。

加載其實(shí)就是一種反饋

——讓用戶知道產(chǎn)品正在響應(yīng)操作，同時(shí)通過(guò)一些加載的設(shè)計(jì)形式，吸引用戶注意力，減緩用戶等待的焦慮。

2 防止用戶跳失

0-0.3秒內(nèi)的響應(yīng)基本上是及時(shí)的；

0.3-1秒時(shí)用戶已經(jīng)能夠察覺(jué)到延遲了。

當(dāng)遇到頁(yè)面內(nèi)信息內(nèi)存過(guò)大或者網(wǎng)絡(luò)狀況不好時(shí)，加載時(shí)間通常會(huì)比較長(zhǎng)，我們就需要針對(duì)不同的情況設(shè)計(jì)不同的加載方式。

否則，當(dāng)加載時(shí)長(zhǎng)超過(guò)3秒時(shí)（參考谷歌2017年《消費(fèi)者行為文檔》），53%的用戶會(huì)選擇離開(kāi)；加載超過(guò)5秒就會(huì)有74%的用戶離開(kāi)（騰訊娛樂(lè)的《移動(dòng)端行為報(bào)告·第一期》H5）。

二、加載常見(jiàn)的應(yīng)用場(chǎng)景

移動(dòng)端的加載常見(jiàn)場(chǎng)景有：

APP啟動(dòng)、界面跳轉(zhuǎn)、上拉加載后續(xù)內(nèi)容、下拉刷新、

瀏覽信息（文字、圖片、視頻）、下載內(nèi)容、操作反饋（提交、付款）

……

當(dāng)然這些只是通用的場(chǎng)景，不同類型的產(chǎn)品加載場(chǎng)景肯定會(huì)有差別的，在實(shí)際工作中，我們需要和開(kāi)發(fā)、數(shù)據(jù)人員一起去梳理這些加載時(shí)間過(guò)長(zhǎng)的頁(yè)面，排查原因（操作系統(tǒng)層面的問(wèn)題？服務(wù)器的問(wèn)題？），如果暫時(shí)無(wú)法解決的，或者不可控的網(wǎng)絡(luò)問(wèn)題，就需要通過(guò)加載的設(shè)計(jì)來(lái)緩解用戶等待時(shí)的焦慮，降低用戶的跳失率。

三、加載的 10 種類型和分析

我們常見(jiàn)到的大部分的加載都是非模態(tài)加載：

1 啟動(dòng)加載

因?yàn)锳PP的啟動(dòng)需要一個(gè)過(guò)程，所以會(huì)通過(guò)啟動(dòng)頁(yè)來(lái)吸引用戶的注意力。

啟動(dòng)加載的常見(jiàn)表現(xiàn)形式有品牌啟動(dòng)頁(yè)、廣告頁(yè)（外部廣告or內(nèi)部運(yùn)營(yíng)活動(dòng))。啟動(dòng)頁(yè)大部分是靜態(tài)的，也可以是動(dòng)態(tài)的，比如騰訊視頻就是動(dòng)態(tài)的品牌啟動(dòng)。

品牌頁(yè)和廣告頁(yè)啟動(dòng)可以單獨(dú)存在，也可以同時(shí)存在，比如考拉，此時(shí)通常品牌頁(yè)在前，廣告頁(yè)在后，廣告頁(yè)需要有跳過(guò)按鈕。

2 占位圖加載

先加載頁(yè)面布局和占位圖，等到后臺(tái)數(shù)據(jù)加載完成后，再加載頁(yè)面的細(xì)節(jié)內(nèi)容（文字、圖片）。占位圖通常以色塊形式呈現(xiàn)，圖片類占位通常為圖片icon或者產(chǎn)品logo。

這種方式適合頁(yè)面布局比較固定的頁(yè)面，此時(shí)需要注意的是，如果頁(yè)面布局進(jìn)行了改版，就需要對(duì)占位圖進(jìn)行對(duì)應(yīng)的更新。

有次我們?nèi)€品牌升級(jí)之后，把APP圖標(biāo)進(jìn)行了更新，但是后來(lái)測(cè)試時(shí)發(fā)現(xiàn)，商品的占位圖仍然為舊版的logo……

優(yōu)點(diǎn)：減少用戶心理等待時(shí)間，體驗(yàn)比較流暢

應(yīng)用：適合頁(yè)面布局比較固定的頁(yè)面，比如簡(jiǎn)書、facebook

3 分步加載

此時(shí)會(huì)優(yōu)先加載內(nèi)存較小的元素，通常是先加載出文字、圖標(biāo)等，最后加載圖片、視頻。圖片視頻類資源也是逐步加載出來(lái)的。

優(yōu)點(diǎn)：即時(shí)響應(yīng)，用戶能夠先看到部分內(nèi)容

應(yīng)用：一般用于圖片/視頻類資源比較多的頁(yè)面

4 預(yù)加載

提前加載后續(xù)內(nèi)容，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。

瀏覽A頁(yè)面時(shí)，系統(tǒng)自動(dòng)加載出B頁(yè)面，用戶無(wú)需等待，體驗(yàn)比較好，但是服務(wù)器的負(fù)很大大。

比如頭條，在首頁(yè)瀏覽時(shí)，我們嘗試斷掉網(wǎng)，打開(kāi)瀏覽過(guò)的任意一個(gè)新聞的詳情頁(yè)，可以看到它已經(jīng)把這些新聞的文字內(nèi)容都加載好了

優(yōu)點(diǎn)：使用流暢、無(wú)需等待頁(yè)面跳轉(zhuǎn)

缺點(diǎn)：服務(wù)器負(fù)擔(dān)重

應(yīng)用：適用于服務(wù)器配置高的產(chǎn)品；且下個(gè)頁(yè)面內(nèi)容是確定的

5 漸入加載

圖片出來(lái)的時(shí)候，預(yù)先呈現(xiàn)出與圖片較為相似的色彩值，或者高斯模糊的圖片，直到圖片加載完全，會(huì)有種漸入的效果。

優(yōu)點(diǎn)：相比分步加載更加直觀、色彩感強(qiáng)

應(yīng)用：一般用于圖片類產(chǎn)品，比如谷歌的搜圖、pinterest、unsplash

6 懶加載

當(dāng)頁(yè)面內(nèi)容豐富，圖片數(shù)量多，而且比較大時(shí)，通常會(huì)使用懶加載的方式。通常應(yīng)用于feed流上拉加載后續(xù)內(nèi)容。

可視區(qū)加載

僅加載用戶可視區(qū)域，一般會(huì)在距下面內(nèi)容一定距離時(shí)開(kāi)始加載，這樣能保證用戶拉下時(shí)正好能看到內(nèi)容，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)。能給用戶一種無(wú)縫銜接的感覺(jué)，比如網(wǎng)易新聞

優(yōu)點(diǎn)：無(wú)需用戶操作，自動(dòng)加載后續(xù)內(nèi)容，營(yíng)造沉浸式體驗(yàn)。

應(yīng)用：適合feed流、列表、算法推薦類的內(nèi)容

手動(dòng)加載

手動(dòng)加載意味著用戶操作后才能觸發(fā)的加載，比如點(diǎn)擊加載更多、上拉加載更多。

優(yōu)點(diǎn)：比較節(jié)約用戶流量，服務(wù)器負(fù)擔(dān)也小

缺點(diǎn)：瀏覽時(shí)每次都需要手動(dòng)進(jìn)行加載，打斷用戶閱讀流

應(yīng)用：比較適合服務(wù)器配置有限的產(chǎn)品

7 下拉刷新加載

下拉刷新可以讓用戶在看到本地?cái)?shù)據(jù)的同時(shí)加載新數(shù)據(jù)。下拉動(dòng)畫能夠給用戶驚喜，下拉加載一般分為兩種形式：

動(dòng)畫加文字：

文字通常表示狀態(tài)，如騰訊動(dòng)漫下拉刷新：正在連接漫星球——嗶嗶，連接成功

純動(dòng)畫：

常規(guī)為刷新小圈圈，也有很多產(chǎn)品用展示品牌形象相關(guān)的動(dòng)畫，比如下圖美團(tuán)的刷新動(dòng)畫。

優(yōu)點(diǎn)：刷新動(dòng)畫可以自由設(shè)計(jì)；展示品牌形象

應(yīng)用：適合頁(yè)面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品；不適合固定內(nèi)容的頁(yè)面。比如微信的聊天頁(yè)面下拉是小程序，支付寶的下拉刷新在頁(yè)面中間。

8 全屏加載

全屏加載顧名思義就是整個(gè)頁(yè)面的內(nèi)容一同加載，頁(yè)面內(nèi)容全部加載出來(lái)，或者全部都加載不出來(lái)。此時(shí)頁(yè)面通常為空白頁(yè)，會(huì)通過(guò)進(jìn)度指示器（小菊花或者進(jìn)度條）來(lái)表示進(jìn)度。

也有很多產(chǎn)品使用品牌形象，以及各種創(chuàng)意動(dòng)畫來(lái)吸引用戶的注意力，緩解用戶焦慮。

優(yōu)點(diǎn)：將整個(gè)頁(yè)面的內(nèi)容都加載出來(lái)才展現(xiàn)給用戶，能夠保證整個(gè)頁(yè)面的完整性。

缺點(diǎn)：看不到頁(yè)面內(nèi)容，等待的時(shí)間較長(zhǎng)。

應(yīng)用：新頁(yè)面的內(nèi)容不確定時(shí)；各種H5 頁(yè)面。

9 智能加載

智能加載是根據(jù)不同的網(wǎng)絡(luò)狀況來(lái)加載不同的內(nèi)容，比如在Wi-Fi等網(wǎng)絡(luò)環(huán)境較好的情況下，自動(dòng)加載內(nèi)容會(huì)直接加載高質(zhì)量的圖片、音頻、視頻等信息。

而流量模式下或者網(wǎng)速較差時(shí)，只加載文字或者小圖。

優(yōu)點(diǎn)：能根據(jù)用戶的網(wǎng)絡(luò)環(huán)境進(jìn)行對(duì)應(yīng)的加載，用戶體驗(yàn)較好；

缺點(diǎn)：采用的方式并不一定是用戶想要的。（所以很多產(chǎn)品支持自定義智能加載模式，比如頭條、搜狗瀏覽器

應(yīng)用：適合大量視頻、圖片信息的產(chǎn)品。

當(dāng)然，隨著帶寬、流量的擴(kuò)增，用流量觀看視頻對(duì)很多用戶已經(jīng)不再是問(wèn)題了，所以目前許多產(chǎn)品只是在觀看時(shí)提醒用戶——當(dāng)前為移動(dòng)網(wǎng)絡(luò)，比如抖音和愛(ài)奇藝

除了上面的9種以外，還有以模態(tài)彈框形式呈現(xiàn)的加載。

10 模態(tài)彈框加載

模態(tài)加載會(huì)阻斷用戶，此時(shí)用戶不能進(jìn)行其他操作，用戶只能等待加載結(jié)束。通常用于舊命令正在處理中，當(dāng)前不允許你再修改請(qǐng)求。比如支付中、微信發(fā)紅包；

除此之外，當(dāng)客戶端向服務(wù)器請(qǐng)求信息、還沒(méi)有收到服務(wù)器的數(shù)據(jù)時(shí)，也會(huì)用模態(tài)加載來(lái)表達(dá)“后臺(tái)正在工作，馬上好了，先別走哦~”

優(yōu)點(diǎn)：引起用戶重視，防止用戶進(jìn)行其他操作

缺點(diǎn)：打斷用戶的行為

應(yīng)用：適合下一步的操作與當(dāng)前操作關(guān)聯(lián)性強(qiáng)的、屬于同一個(gè)流程的。或者和其他加載方式結(jié)合，當(dāng)網(wǎng)絡(luò)狀況不好或者頁(yè)面請(qǐng)求數(shù)據(jù)未到達(dá)時(shí)，吸引用戶注意，防止跳失。

四、總結(jié)

本文總結(jié)了10種加載的類型，以及分析了其優(yōu)缺點(diǎn)和應(yīng)用場(chǎng)景。一起來(lái)回顧一下~

我們需要考慮到產(chǎn)品的類型、頁(yè)面的類型、甚至服務(wù)器的限制，來(lái)選用合適的加載方式。當(dāng)然，用什么加載方式并不是一個(gè)單選題，為了讓用戶體驗(yàn)更流暢，很多產(chǎn)品會(huì)根據(jù)場(chǎng)景組合使用這些加載方式。

比如pinterest一開(kāi)始為全屏加載，請(qǐng)求到數(shù)據(jù)后，開(kāi)始分步加載出頁(yè)面，頁(yè)面繼續(xù)往下滑到第二屏第三屏，采用的是懶加載。

參考：

1】The consumer behaviors shaping the next generation of mobile experiences：https://www.thinkwithgoogle.com/advertising-channels/mobile-marketing/consumer-behavior-mobile-digital-experiences/

2】騰訊娛樂(lè)《移動(dòng)頁(yè)面用戶行為報(bào)告》：https://www.digitaling.com/company/articles/11462

3】懶加載和預(yù)加載：https://www.jianshu.com/p/4876a4fe7731

4】選擇合適的加載方式，減少用戶的等待：https://mp.weixin.qq.com/s/IOqznxow8tr-rnIK5ZHq_Q

著作權(quán)歸作者所有。