一文了解頁(yè)面數(shù)據(jù)加載

5 評(píng)論 9114 瀏覽 141 收藏 8 分鐘

本文作者詳細(xì)的跟大家介紹了數(shù)據(jù)加載的相關(guān)知識(shí),一起來(lái)文中看看~

在項(xiàng)目進(jìn)程中,遇到了一個(gè)數(shù)據(jù)加載常見的問題:前端向服務(wù)器發(fā)送資源請(qǐng)求,服務(wù)端在返回?cái)?shù)據(jù)的過(guò)程中,可能會(huì)因?yàn)榫W(wǎng)絡(luò)或者返回路徑出錯(cuò)等問題,導(dǎo)致資源沒有辦法順暢的在前端進(jìn)行展示,可能會(huì)出現(xiàn)加載延遲或者加載失敗。

這時(shí)為了保持較好的用戶體驗(yàn),需要給到前端一個(gè)加載占位圖和加載失敗的狀態(tài)提示。在解決這些問題的過(guò)程中,對(duì)于數(shù)據(jù)加載有了更多的認(rèn)識(shí),并整理了出來(lái)。

一、加載的業(yè)務(wù)場(chǎng)景/觸發(fā)事件

(1)從后臺(tái)切回前臺(tái)(一定時(shí)間內(nèi))

若切到后臺(tái)并在很短時(shí)間內(nèi)切回前臺(tái)(視業(yè)務(wù)需要而定),則不加載新數(shù)據(jù),繼續(xù)顯示原頁(yè)面和提示框;若時(shí)間間隔超過(guò)一定值,則需要追加事件刷新當(dāng)前頁(yè)面并加載新數(shù)據(jù)。

(2)啟動(dòng)APP

當(dāng)異常關(guān)閉、應(yīng)用閃退、進(jìn)程被殺等情況出現(xiàn)時(shí),點(diǎn)擊需要重新啟動(dòng)APP,展示啟動(dòng)頁(yè)或者直接加載首頁(yè)。

(3)頁(yè)面內(nèi)事件觸發(fā)加載:用戶手動(dòng)加載、系統(tǒng)自動(dòng)加載

用戶手動(dòng)加載,一般通過(guò)下拉或者點(diǎn)擊操作刷新頁(yè)面,加載新數(shù)據(jù);系統(tǒng)自動(dòng)加載的方式一般為,當(dāng)前內(nèi)容已經(jīng)展示完畢后隨即加載并刷新出新的內(nèi)容。

(4)定時(shí)數(shù)據(jù)刷新

一些排行榜或者限時(shí)活動(dòng),需要在特定時(shí)間進(jìn)行頁(yè)面刷新和數(shù)據(jù)加載。

(5)實(shí)時(shí)消息推送

IM消息采用實(shí)時(shí)推送機(jī)制,一般不需要用戶手動(dòng)去加載或刷新。

二、如何加載/加載邏輯

(1)懶加載和預(yù)加載

  • 懶加載(一般默認(rèn)使用懶加載):進(jìn)入頁(yè)面,再加載數(shù)據(jù);
  • 預(yù)加載(Wi-Fi情況下考慮使用):預(yù)加載數(shù)據(jù),再展示頁(yè)面。

(2)整體加載

加載完頁(yè)面所有內(nèi)容后,再展示給用戶,可以保證內(nèi)容的完整性,應(yīng)用于一些對(duì)內(nèi)容完整性有要求的頁(yè)面,如購(gòu)物車。若加載時(shí)間過(guò)長(zhǎng),需要給予用戶一定反饋和提示。

(3)分塊加載

可以根據(jù)資源類型等進(jìn)行先后加載,比如資訊類文章優(yōu)先加載文字,其后加載圖片??梢员WC用戶最快獲取內(nèi)容,但是部門內(nèi)容由于加載慢可能被用戶忽略。

(4)分頁(yè)加載

對(duì)于一些列表或者卡片信息,可以使用自動(dòng)或者手動(dòng)的分頁(yè)加載。這樣可以展示比較豐富的內(nèi)容,但是也對(duì)信息的檢索帶來(lái)一定麻煩。

(5)分屏加載

先加載頁(yè)面框架,頁(yè)面滾動(dòng)到哪里再加載相應(yīng)內(nèi)容。適用于一些數(shù)據(jù)量比較大的頁(yè)面。

(6)智能加載

根據(jù)用戶的網(wǎng)絡(luò)狀況選擇不同的加載方案。非Wi-Fi下,暫不加載圖片和文字,用戶點(diǎn)擊確認(rèn)后,才加載資源;Wi-Fi情況下,加載所有資源。

(7)Wi-Fi預(yù)先加載+讀取緩存

Wi-Fi情況下預(yù)先加載數(shù)據(jù),緩存到本地;在沒有網(wǎng)絡(luò)時(shí),直接讀取本地緩存??梢越鉀Q無(wú)網(wǎng)絡(luò)時(shí)獲取數(shù)據(jù)的問題,節(jié)省流量,但是會(huì)占用本地存儲(chǔ)空間。

三、加載優(yōu)化

(1)在Wi-Fi條件下,考慮預(yù)加載

(2)異步處理

例如:支付寶弱網(wǎng)情況下的扣費(fèi)處理(客戶端告知用戶扣費(fèi)成功并將用戶扣費(fèi)行為記錄下來(lái),等待網(wǎng)絡(luò)環(huán)境變好之后再上報(bào)服務(wù)器并進(jìn)行扣費(fèi)操作)。

(3)使用緩存

需要注意存儲(chǔ)的數(shù)據(jù)類型、更新規(guī)則、是否要清除緩存、清除規(guī)則、用戶是否可以手動(dòng)清除。

四、加載的業(yè)務(wù)流程設(shè)計(jì)

(1)主流程

觸發(fā)事件——(加載邏輯)——頁(yè)面刷新規(guī)則(加載多少數(shù)據(jù)、展示規(guī)則)——刷新出新內(nèi)容——用戶提示文案。

(2)分支流程

沒有更多新內(nèi)容、空頁(yè)面、頁(yè)面被刪除、頁(yè)面被限制。

(3)異常流程

網(wǎng)絡(luò)連接失敗、刷新操作過(guò)于頻繁、網(wǎng)絡(luò)狀態(tài)切換、弱網(wǎng)、 服務(wù)器崩潰。

五、加載的功能流程設(shè)計(jì)

(1)功能

下拉刷新、點(diǎn)擊刷新、系統(tǒng)自動(dòng)刷新、重新加載按鈕。

(2)加載狀態(tài)展示

網(wǎng)絡(luò)情況不佳是否有加載占位圖、加載進(jìn)度條(先慢后快)、加載動(dòng)畫、加載成功與失敗提示。

六、加載占位圖

(1)原理

通過(guò)css控制,可以實(shí)現(xiàn)加載網(wǎng)絡(luò)圖片時(shí),未加載完成的時(shí)候顯示本地一張占位圖,加載完成后顯示網(wǎng)絡(luò)圖片。

(2)設(shè)計(jì)原則

a. 加載品牌元素或其他元素(提示可能展現(xiàn)的內(nèi)容)

優(yōu)點(diǎn):給予用戶預(yù)期,提升品牌感知;缺點(diǎn):需要適配

b. 加載色塊:通過(guò)讀取圖片顏色或默認(rèn)顏色來(lái)占位

優(yōu)點(diǎn):適配方便,需提供色庫(kù),畫面不枯燥;缺點(diǎn):需要調(diào)節(jié)顏色

c. 加載布局:簡(jiǎn)單,但是視覺效果有時(shí)不夠好

d. 加載默認(rèn)灰色圖

e. 使用高斯模糊:效果炫酷;但是有一定功耗,加載慢

七、啟動(dòng)頁(yè)/閃屏

(1)使用場(chǎng)景

在點(diǎn)擊啟動(dòng)APP圖標(biāo),到APP首頁(yè)的出現(xiàn),是存在一個(gè)時(shí)間,這個(gè)時(shí)間的長(zhǎng)短取決于設(shè)備的性能和網(wǎng)絡(luò)環(huán)境,從幾百毫秒到幾秒不等。在這段空白時(shí)間,為了不讓用戶感到困惑或因?yàn)榈却a(chǎn)生焦慮。

iOS的設(shè)計(jì)規(guī)范規(guī)定,要在啟動(dòng)APP時(shí),設(shè)計(jì)一個(gè)啟動(dòng)頁(yè),來(lái)填補(bǔ)這段用戶等待的時(shí)間。由于APP啟動(dòng)的過(guò)程很短,從幾百毫秒到幾秒不等,所以啟動(dòng)頁(yè)也被稱為閃屏。

但是,現(xiàn)在的啟動(dòng)頁(yè)不僅僅應(yīng)用于這一場(chǎng)景。許多啟動(dòng)頁(yè)還擔(dān)負(fù)了廣告展示、H5活動(dòng)展示、APP跳轉(zhuǎn)等功能。

(2)設(shè)計(jì)原則

  • 快速啟動(dòng)類:和首屏頁(yè)面類似,最大程度減少割裂感
  • 品牌類:提現(xiàn)品牌logo、名稱、slogan等元素
  • 情感共鳴:弱化品牌元素,增進(jìn)情感設(shè)計(jì)
  • 廣告類:?jiǎn)?dòng)頁(yè)展示廣告位,流量變現(xiàn)。一般是先顯示品牌頁(yè),再顯示廣告頁(yè),用戶可以選擇跳過(guò)
  • 節(jié)日類:為特定節(jié)日量身制作啟動(dòng)頁(yè),給用戶新鮮感、親切感
  • 其他:例如成為H5頁(yè)面、其他APP入口等

(3)業(yè)務(wù)流程

啟動(dòng)APP——檢測(cè)本地閃屏資源——-顯示閃屏(同時(shí)進(jìn)行登錄狀態(tài)、用戶權(quán)限、閃屏業(yè)務(wù)檢測(cè))——點(diǎn)擊跳轉(zhuǎn)到落地頁(yè)/直接進(jìn)入首頁(yè)。

 

本文由 @lemon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很感謝,整理的很好

    來(lái)自重慶 回復(fù)
  2. 是不是4G了,流量不限量了,只有在個(gè)別信號(hào)差的場(chǎng)景下,才要按照這些數(shù)據(jù)加載分類?產(chǎn)品先判斷網(wǎng)速?很是疑惑。

    來(lái)自浙江 回復(fù)
    1. 可以找個(gè)app抓包看一下比較能理解,文字/視頻/圖片通常來(lái)自不同的服務(wù)器或者不同的響應(yīng)。1. 請(qǐng)求數(shù)據(jù) 2.獲取 文字 2.獲取圖片。文字可能只是一個(gè)json文件很小,圖片看情況,有的只是個(gè)縮略圖(比如頭像)也就幾K,有的清晰大圖就很大,會(huì)在感覺上他們不是一起出現(xiàn)的,其實(shí)他們通常是一起接收的(忽略響應(yīng)時(shí)間略有細(xì)微不同),只是圖片比較大,網(wǎng)速不好的時(shí)候就會(huì)慢一些,需要一個(gè)占位圖。

      來(lái)自北京 回復(fù)
    2. 加載總是需要時(shí)間的,不同的媒體類型加載快慢不同,網(wǎng)絡(luò)環(huán)境不同加載快慢也不同,要考慮到這些情況。加載占位圖是寫在本地的,在服務(wù)端資源返回之前優(yōu)先展示出來(lái),據(jù)我所知是不需要判斷網(wǎng)速的,就是邏輯上的先后問題。

      來(lái)自廣東 回復(fù)
  3. 一直對(duì)頁(yè)面加載這塊有點(diǎn)疑惑,這還是我見過(guò)最全的,贊一個(gè)

    來(lái)自浙江 回復(fù)