一文了解頁面資料載入
本文作者詳細的跟大家介紹了資料載入的相關知識,一起來文中看看~
在專案程序中,遇到了一個數據載入常見的問題:前端向伺服器傳送資源請求,服務端在返回資料的過程中,可能會因為網路或者返回路徑出錯等問題,導致資源沒有辦法順暢的在前端進行展示,可能會出現載入延遲或者載入失敗。
這時為了保持較好的使用者體驗,需要給到前端一個載入佔位圖和載入失敗的狀態提示。在解決這些問題的過程中,對於資料載入有了更多的認識,並整理了出來。
一、載入的業務場景/觸發事件
(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協議