一文了解頁面資料載入
本文作者詳細的跟大家介紹了資料載入的相關知識，一起來文中看看~
在專案程序中，遇到了一個數據載入常見的問題：前端向伺服器傳送資源請求，服務端在返回資料的過程中，可能會因為網路或者返回路徑出錯等問題，導致資源沒有辦法順暢的在前端進行展示，可能會出現載入延遲或者載入失敗。
這時為了保持較好的使用者體驗，需要給到前端一個載入佔位圖和載入失敗的狀態提示。在解決這些問題的過程中，對於資料載入有了更多的認識，並整理了出來。
一、載入的業務場景/觸發事件
（1）從後臺切回前臺（一定時間內）
若切到後臺並在很短時間內切回前臺（視業務需要而定），則不載入新資料，繼續顯示原頁面和提示框；若時間間隔超過一定值，則需要追加事件重新整理當前頁面並載入新資料。
（2）啟動APP
當異常關閉、應用閃退、程序被殺等情況出現時，點選需要重新啟動APP，展示啟動頁或者直接載入首頁。
（3）頁面內事件觸發載入：使用者手動載入、系統自動載入
使用者手動載入，一般通過下拉或者點選操作重新整理頁面，載入新資料；系統自動載入的方式一般為，當前內容已經展示完畢後隨即載入並刷新出新的內容。
（4）定時資料重新整理
一些排行榜或者限時活動，需要在特定時間進行頁面重新整理和資料載入。
（5）實時訊息推送
IM訊息採用實時推送機制，一般不需要使用者手動去載入或重新整理。
二、如何載入/載入邏輯
（1）懶載入和預載入
- 懶載入（一般預設使用懶載入）：進入頁面，再載入資料；
- 預載入（Wi-Fi情況下考慮使用）：預載入資料，再展示頁面。
（2）整體載入
載入完頁面所有內容後，再展示給使用者，可以保證內容的完整性，應用於一些對內容完整性有要求的頁面，如購物車。若載入時間過長，需要給予使用者一定反饋和提示。
（3）分塊載入
可以根據資源型別等進行先後載入，比如資訊類文章優先載入文字，其後載入圖片。可以保證使用者最快獲取內容，但是部門內容由於載入慢可能被使用者忽略。
（4）分頁載入
對於一些列表或者卡片資訊，可以使用自動或者手動的分頁載入。這樣可以展示比較豐富的內容，但是也對資訊的檢索帶來一定麻煩。
（5）分屏載入
先載入頁面框架，頁面滾動到哪裡再載入相應內容。適用於一些資料量比較大的頁面。
（6）智慧載入
根據使用者的網路狀況選擇不同的載入方案。非Wi-Fi下，暫不載入圖片和文字，使用者點選確認後，才載入資源；Wi-Fi情況下，載入所有資源。
（7）Wi-Fi預先載入+讀取快取
Wi-Fi情況下預先載入資料，快取到本地；在沒有網路時，直接讀取本地快取。可以解決無網路時獲取資料的問題，節省流量，但是會佔用本地儲存空間。
三、載入優化
（1）在Wi-Fi條件下，考慮預載入
（2）非同步處理
例如：支付寶弱網情況下的扣費處理（客戶端告知使用者扣費成功並將使用者扣費行為記錄下來，等待網路環境變好之後再上報伺服器並進行扣費操作）。
（3）使用快取
需要注意儲存的資料型別、更新規則、是否要清除快取、清除規則、使用者是否可以手動清除。
四、載入的業務流程設計
（1）主流程
觸發事件——（載入邏輯）——頁面重新整理規則（載入多少資料、展示規則）——刷新出新內容——使用者提示文案。
（2）分支流程
沒有更多新內容、空頁面、頁面被刪除、頁面被限制。
（3）異常流程
網路連線失敗、重新整理操作過於頻繁、網路狀態切換、弱網、 伺服器崩潰。
五、載入的功能流程設計
（1）功能
下拉重新整理、點選重新整理、系統自動重新整理、重新載入按鈕。
（2）載入狀態展示
網路情況不佳是否有載入佔位圖、載入進度條（先慢後快）、載入動畫、載入成功與失敗提示。
六、載入佔位圖
（1）原理
通過css控制，可以實現載入網路圖片時，未載入完成的時候顯示本地一張佔位圖，載入完成後顯示網路圖片。
（2）設計原則
a. 載入品牌元素或其他元素（提示可能展現的內容）
優點：給予使用者預期，提升品牌感知；缺點：需要適配
b. 載入色塊：通過讀取圖片顏色或預設顏色來佔位
優點：適配方便，需提供色庫，畫面不枯燥；缺點：需要調節顏色
c. 載入佈局：簡單，但是視覺效果有時不夠好
d. 載入預設灰色圖
e. 使用高斯模糊：效果炫酷；但是有一定功耗，載入慢
七、啟動頁/閃屏
（1）使用場景
在點選啟動APP圖示，到APP首頁的出現，是存在一個時間，這個時間的長短取決於裝置的效能和網路環境，從幾百毫秒到幾秒不等。在這段空白時間，為了不讓使用者感到困惑或因為等待而產生焦慮。
iOS的設計規範規定，要在啟動APP時，設計一個啟動頁，來填補這段使用者等待的時間。由於APP啟動的過程很短，從幾百毫秒到幾秒不等，所以啟動頁也被稱為閃屏。
但是，現在的啟動頁不僅僅應用於這一場景。許多啟動頁還擔負了廣告展示、H5活動展示、APP跳轉等功能。
（2）設計原則
- 快速啟動類：和首屏頁面類似，最大程度減少割裂感
- 品牌類：提現品牌logo、名稱、slogan等元素
- 情感共鳴：弱化品牌元素，增進情感設計
- 廣告類：啟動頁展示廣告位，流量變現。一般是先顯示品牌頁，再顯示廣告頁，使用者可以選擇跳過
- 節日類：為特定節日量身製作啟動頁，給使用者新鮮感、親切感
- 其他：例如成為H5頁面、其他APP入口等
（3）業務流程
啟動APP——檢測本地閃屏資源——-顯示閃屏（同時進行登入狀態、使用者許可權、閃屏業務檢測）——點選跳轉到落地頁/直接進入首頁。
本文由 @lemon 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議