一(one)、爲(for)什麽需要(want)加載？
1 給用(use)戶反饋
在(exist)上(superior)篇《尼爾森10大(big)可用(use)性原則》中我(I)們(them)說過，系統應該通過在(exist)合理時(hour)間内的(of)适當反饋，向用(use)戶通知當前的(of)狀态。
加載其實就是(yes)一(one)種反饋
——讓用(use)戶知道産品正在(exist)響應操作(do)，同時(hour)通過一(one)些加載的(of)設計形式，吸引用(use)戶注意力，減緩用(use)戶等待的(of)焦慮。
2 防止用(use)戶跳失
0-0.3秒内的(of)響應基本上(superior)是(yes)及時(hour)的(of)；
0.3-1秒時(hour)用(use)戶已經能夠察覺到(arrive)延遲了(Got it)。
當遇到(arrive)頁面内信息内存過大(big)或者網絡狀況不(No)好時(hour)，加載時(hour)間通常會比較長，我(I)們(them)就需要(want)針對不(No)同的(of)情況設計不(No)同的(of)加載方式。
否則，當加載時(hour)長超過3秒時(hour)（參考谷歌2017年《消費者行爲(for)文檔》），53%的(of)用(use)戶會選擇離開；加載超過5秒就會有74%的(of)用(use)戶離開（騰訊娛樂的(of)《移動端行爲(for)報告·第一(one)期》H5）。
二、加載常見的(of)應用(use)場景
移動端的(of)加載常見場景有：
APP啓動、界面跳轉、上(superior)拉加載後續内容、下拉刷新、
浏覽信息（文字、圖片、視頻）、下載内容、操作(do)反饋（提交、付款）
……
當然這(this)些隻是(yes)通用(use)的(of)場景，不(No)同類型的(of)産品加載場景肯定會有差别的(of)，在(exist)實際工作(do)中，我(I)們(them)需要(want)和(and)開發、數據人(people)員一(one)起去梳理這(this)些加載時(hour)間過長的(of)頁面，排查原因（操作(do)系統層面的(of)問題？服務器的(of)問題？），如果暫時(hour)無法解決的(of)，或者不(No)可控的(of)網絡問題，就需要(want)通過加載的(of)設計來(Come)緩解用(use)戶等待時(hour)的(of)焦慮，降低用(use)戶的(of)跳失率。
三、加載的(of) 10 種類型和(and)分析
我(I)們(them)常見到(arrive)的(of)大(big)部分的(of)加載都是(yes)非模态加載：
1 啓動加載
因爲(for)APP的(of)啓動需要(want)一(one)個(indivual)過程，所以(by)會通過啓動頁來(Come)吸引用(use)戶的(of)注意力。
啓動加載的(of)常見表現形式有品牌啓動頁、廣告頁（外部廣告or内部運營活動)。啓動頁大(big)部分是(yes)靜态的(of)，也可以(by)是(yes)動态的(of)，比如騰訊視頻就是(yes)動态的(of)品牌啓動。
品牌頁和(and)廣告頁啓動可以(by)單獨存在(exist)，也可以(by)同時(hour)存在(exist)，比如考拉，此時(hour)通常品牌頁在(exist)前，廣告頁在(exist)後，廣告頁需要(want)有跳過按鈕。
2 占位圖加載
先加載頁面布局和(and)占位圖，等到(arrive)後台數據加載完成後，再加載頁面的(of)細節内容（文字、圖片）。占位圖通常以(by)色塊形式呈現，圖片類占位通常爲(for)圖片icon或者産品logo。
這(this)種方式适合頁面布局比較固定的(of)頁面，此時(hour)需要(want)注意的(of)是(yes)，如果頁面布局進行了(Got it)改版，就需要(want)對占位圖進行對應的(of)更新。
有次我(I)們(them)全線品牌升級之後，把APP圖标進行了(Got it)更新，但是(yes)後來(Come)測試時(hour)發現，商品的(of)占位圖仍然爲(for)舊版的(of)logo……
優點：減少用(use)戶心理等待時(hour)間，體驗比較流暢
應用(use)：适合頁面布局比較固定的(of)頁面，比如簡書、facebook
3 分步加載
此時(hour)會優先加載内存較小的(of)元素，通常是(yes)先加載出(out)文字、圖标等，最後加載圖片、視頻。圖片視頻類資源也是(yes)逐步加載出(out)來(Come)的(of)。
優點：即時(hour)響應，用(use)戶能夠先看到(arrive)部分内容
應用(use)：一(one)般用(use)于(At)圖片/視頻類資源比較多的(of)頁面
4 預加載
提前加載後續内容，當用(use)戶需要(want)查看時(hour)可直接從本地(land)緩存中渲染。
浏覽A頁面時(hour)，系統自動加載出(out)B頁面，用(use)戶無需等待，體驗比較好，但是(yes)服務器的(of)負很大(big)大(big)。
比如頭條，在(exist)首頁浏覽時(hour)，我(I)們(them)嘗試斷掉網，打開浏覽過的(of)任意一(one)個(indivual)新聞的(of)詳情頁，可以(by)看到(arrive)它已經把這(this)些新聞的(of)文字内容都加載好了(Got it)
優點：使用(use)流暢、無需等待頁面跳轉
缺點：服務器負擔重
應用(use)：适用(use)于(At)服務器配置高的(of)産品；且下個(indivual)頁面内容是(yes)确定的(of)
5 漸入加載
圖片出(out)來(Come)的(of)時(hour)候，預先呈現出(out)與圖片較爲(for)相似的(of)色彩值，或者高斯模糊的(of)圖片，直到(arrive)圖片加載完全，會有種漸入的(of)效果。
優點：相比分步加載更加直觀、色彩感強
應用(use)：一(one)般用(use)于(At)圖片類産品，比如谷歌的(of)搜圖、pinterest、unsplash
6 懶加載
當頁面内容豐富，圖片數量多，而且比較大(big)時(hour)，通常會使用(use)懶加載的(of)方式。通常應用(use)于(At)feed流上(superior)拉加載後續内容。
可視區加載
僅加載用(use)戶可視區域，一(one)般會在(exist)距下面内容一(one)定距離時(hour)開始加載，這(this)樣能保證用(use)戶拉下時(hour)正好能看到(arrive)内容，這(this)個(indivual)主要(want)由監控滾動條來(Come)實現。能給用(use)戶一(one)種無縫銜接的(of)感覺，比如網易新聞
優點：無需用(use)戶操作(do)，自動加載後續内容，營造沉浸式體驗。
應用(use)：适合feed流、列表、算法推薦類的(of)内容
手動加載
手動加載意味着用(use)戶操作(do)後才能觸發的(of)加載，比如點擊加載更多、上(superior)拉加載更多。
優點：比較節約用(use)戶流量，服務器負擔也小
缺點：浏覽時(hour)每次都需要(want)手動進行加載，打斷用(use)戶閱讀流
應用(use)：比較适合服務器配置有限的(of)産品
7 下拉刷新加載
下拉刷新可以(by)讓用(use)戶在(exist)看到(arrive)本地(land)數據的(of)同時(hour)加載新數據。下拉動畫能夠給用(use)戶驚喜，下拉加載一(one)般分爲(for)兩種形式：
動畫加文字：
文字通常表示狀态，如騰訊動漫下拉刷新：正在(exist)連接漫星球——哔哔，連接成功
純動畫：
常規爲(for)刷新小圈圈，也有很多産品用(use)展示品牌形象相關的(of)動畫，比如下圖美團的(of)刷新動畫。
優點：刷新動畫可以(by)自由設計；展示品牌形象
應用(use)：适合頁面内容爲(for)推薦類、或者信息更新頻次高的(of)産品；不(No)适合固定内容的(of)頁面。比如微信的(of)聊天頁面下拉是(yes)小程序，支付寶的(of)下拉刷新在(exist)頁面中間。
8 全屏加載
全屏加載顧名思義就是(yes)整個(indivual)頁面的(of)内容一(one)同加載，頁面内容全部加載出(out)來(Come)，或者全部都加載不(No)出(out)來(Come)。此時(hour)頁面通常爲(for)空白頁，會通過進度指示器（小菊花或者進度條）來(Come)表示進度。
也有很多産品使用(use)品牌形象，以(by)及各種創意動畫來(Come)吸引用(use)戶的(of)注意力，緩解用(use)戶焦慮。
優點：将整個(indivual)頁面的(of)内容都加載出(out)來(Come)才展現給用(use)戶，能夠保證整個(indivual)頁面的(of)完整性。
缺點：看不(No)到(arrive)頁面内容，等待的(of)時(hour)間較長。
應用(use)：新頁面的(of)内容不(No)确定時(hour)；各種H5 頁面。
9 智能加載
智能加載是(yes)根據不(No)同的(of)網絡狀況來(Come)加載不(No)同的(of)内容，比如在(exist)Wi-Fi等網絡環境較好的(of)情況下，自動加載内容會直接加載高質量的(of)圖片、音頻、視頻等信息。
而流量模式下或者網速較差時(hour)，隻加載文字或者小圖。
優點：能根據用(use)戶的(of)網絡環境進行對應的(of)加載，用(use)戶體驗較好；
缺點：采用(use)的(of)方式并不(No)一(one)定是(yes)用(use)戶想要(want)的(of)。（所以(by)很多産品支持自定義智能加載模式，比如頭條、搜狗浏覽器
應用(use)：适合大(big)量視頻、圖片信息的(of)産品。
當然，随着帶寬、流量的(of)擴增，用(use)流量觀看視頻對很多用(use)戶已經不(No)再是(yes)問題了(Got it)，所以(by)目前許多産品隻是(yes)在(exist)觀看時(hour)提醒用(use)戶——當前爲(for)移動網絡，比如抖音和(and)愛奇藝
除了(Got it)上(superior)面的(of)9種以(by)外，還有以(by)模态彈框形式呈現的(of)加載。
10 模态彈框加載
模态加載會阻斷用(use)戶，此時(hour)用(use)戶不(No)能進行其他(he)操作(do)，用(use)戶隻能等待加載結束。通常用(use)于(At)舊命令正在(exist)處理中，當前不(No)允許你再修改請求。比如支付中、微信發紅包；
除此之外，當客戶端向服務器請求信息、還沒有收到(arrive)服務器的(of)數據時(hour)，也會用(use)模态加載來(Come)表達“後台正在(exist)工作(do)，馬上(superior)好了(Got it)，先别走哦~”
優點：引起用(use)戶重視，防止用(use)戶進行其他(he)操作(do)
缺點：打斷用(use)戶的(of)行爲(for)
應用(use)：适合下一(one)步的(of)操作(do)與當前操作(do)關聯性強的(of)、屬于(At)同一(one)個(indivual)流程的(of)。或者和(and)其他(he)加載方式結合，當網絡狀況不(No)好或者頁面請求數據未到(arrive)達時(hour)，吸引用(use)戶注意，防止跳失。
四、總結
本文總結了(Got it)10種加載的(of)類型，以(by)及分析了(Got it)其優缺點和(and)應用(use)場景。一(one)起來(Come)回顧一(one)下~
我(I)們(them)需要(want)考慮到(arrive)産品的(of)類型、頁面的(of)類型、甚至服務器的(of)限制，來(Come)選用(use)合适的(of)加載方式。當然，用(use)什麽加載方式并不(No)是(yes)一(one)個(indivual)單選題，爲(for)了(Got it)讓用(use)戶體驗更流暢，很多産品會根據場景組合使用(use)這(this)些加載方式。
比如pinterest一(one)開始爲(for)全屏加載，請求到(arrive)數據後，開始分步加載出(out)頁面，頁面繼續往下滑到(arrive)第二屏第三屏，采用(use)的(of)是(yes)懶加載。
