一、為什么需要加載？

1 給用戶反饋

加載其實就是一種反饋——讓用戶知道產(chǎn)品正在響應操作，同時通過一些加載的設計形式，吸引用戶注意力，減緩用戶等待的焦慮。

2 防止用戶跳失

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

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

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

否則，當加載時長超過3秒時（參考谷歌2017年《消費者行為文檔》），53%的用戶會選擇離開；加載超過5秒就會有74%的用戶離開（騰訊娛樂的《移動端行為報告·第一期》H5）

二、加載常見的應用場景

移動端的加載常見場景有：

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

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

……

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

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

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

1 啟動加載

因為APP的啟動需要一個過程，所以會通過啟動頁來吸引用戶的注意力。

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

品牌頁和廣告頁啟動可以單獨存在，也可以同時存在，比如考拉，此時通常品牌頁在前，廣告頁在后，廣告頁需要有跳過按鈕。

2 占位圖加載

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

這種方式適合頁面布局比較固定的頁面，此時需要注意的是，如果頁面布局進行了改版，就需要對占位圖進行對應的更新。

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

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

應用：適合頁面布局比較固定的頁面，比如簡書、facebook

3 分步加載

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

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

應用：一般用于圖片/視頻類資源比較多的頁面

4 預加載

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

瀏覽A頁面時，系統(tǒng)自動加載出B頁面，用戶無需等待，體驗比較好，但是服務器的負很大大。

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

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

缺點：服務器負擔重

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

5 漸入加載

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

優(yōu)點：相比分步加載更加直觀、色彩感強

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

6 懶加載

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

可視區(qū)加載

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

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

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

手動加載

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

優(yōu)點：比較節(jié)約用戶流量，服務器負擔也小

缺點：瀏覽時每次都需要手動進行加載，打斷用戶閱讀流

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

7 下拉刷新加載

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

動畫加文字：

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

純動畫：

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

優(yōu)點：刷新動畫可以自由設計；展示品牌形象

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

8 全屏加載

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

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

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

缺點：看不到頁面內(nèi)容，等待的時間較長。

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

9 智能加載

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

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

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

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

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

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

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

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

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

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

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

缺點：打斷用戶的行為

應用：適合下一步的操作與當前操作關(guān)聯(lián)性強的、屬于同一個流程的?；蛘吆推渌虞d方式結(jié)合，當網(wǎng)絡狀況不好或者頁面請求數(shù)據(jù)未到達時，吸引用戶注意，防止跳失。

四、總結(jié)

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

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱：10種加載的類型分析
網(wǎng)頁地址：http://jinyejixie.com/news2/318902.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、面包屑導航、服務器托管、網(wǎng)站改版、企業(yè)網(wǎng)站制作、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)