前陣子設(shè)計(jì)一款從0到1的產(chǎn)品，到了測(cè)試環(huán)節(jié)，突然有同學(xué)提了一下數(shù)據(jù)加載的問(wèn)題。對(duì)于數(shù)據(jù)加載的問(wèn)題，我一直是一個(gè)模糊的狀態(tài)。因?yàn)槟：赃M(jìn)行設(shè)計(jì)時(shí)經(jīng)常模棱兩可，這次一定要把數(shù)據(jù)加載搞清楚。

一、理解數(shù)據(jù)加載對(duì)我們有什么幫助

弄清楚數(shù)據(jù)加載可以讓我們?cè)诤线m的業(yè)務(wù)場(chǎng)景使用恰當(dāng)?shù)募虞d方式，就像擁有一個(gè)工具箱，知道什么工具可以做什么事，事半功倍。

同時(shí)，做好數(shù)據(jù)加載可以讓我們的用戶降低等待焦慮，獲得更好的用戶體驗(yàn)。

二、加載和刷新

加載：指的是請(qǐng)求更多的數(shù)據(jù)

刷新：指的是請(qǐng)求最新的數(shù)據(jù)

這兩個(gè)場(chǎng)景結(jié)合「知乎」應(yīng)該更好理解，你可以通過(guò)下拉刷新來(lái)獲取最新的推薦問(wèn)題，也可以通過(guò)上滑查看更多的數(shù)據(jù)：

三、數(shù)據(jù)加載的場(chǎng)景

1. 從后臺(tái)切回應(yīng)用

涉及到跨平臺(tái)任務(wù)的場(chǎng)景，當(dāng)切回過(guò)程是很短的間隔則無(wú)需數(shù)據(jù)加載，超過(guò)一定時(shí)間間隔可以設(shè)定追加事件刷新。

2. 啟動(dòng)App

當(dāng)應(yīng)用出現(xiàn)異常關(guān)閉、應(yīng)用閃退等情況需要重新啟動(dòng)app，需要進(jìn)行數(shù)據(jù)加載。

3. 觸發(fā)加載事件

一般包含兩種情況：用戶手動(dòng)觸發(fā)、系統(tǒng)自動(dòng)加載。

用戶手動(dòng)觸發(fā)：也就是常見(jiàn)的下拉刷新和上滑加載，也包含點(diǎn)擊按鈕重新加載。

系統(tǒng)自動(dòng)加載：當(dāng)前內(nèi)容展示完畢，預(yù)加載下一頁(yè)內(nèi)容。

4. 頁(yè)面跳轉(zhuǎn)

涉及頁(yè)面跳轉(zhuǎn)，可能是原生跳轉(zhuǎn)原生頁(yè)面，也能可以原生跳轉(zhuǎn)到h5頁(yè)面。

既然都有頁(yè)面跳轉(zhuǎn)，加載新數(shù)據(jù)是必然的。

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

在特定時(shí)間內(nèi)，頁(yè)面會(huì)進(jìn)行刷新和數(shù)據(jù)加載，運(yùn)營(yíng)活動(dòng)居多。

例如排行榜每天23：59更新，亦或是某些限時(shí)活動(dòng)，這里我找了一個(gè)最近支付寶消費(fèi)券的例子。

6. 即時(shí)消息推送

微信的消息采用實(shí)時(shí)推送機(jī)制，不需要用戶手動(dòng)刷新和加載。

這就是微信小程序的入口可以大膽地做到一個(gè)下拉刷新位置的原因。

四、數(shù)據(jù)加載方式

在具體介紹數(shù)據(jù)加載方式的基礎(chǔ)之前先明確兩個(gè)加載邏輯：懶加載和預(yù)加載。

• 懶加載：顧名思義，懶模式，進(jìn)入頁(yè)面時(shí)，再加載數(shù)據(jù)。
• 預(yù)加載：預(yù)加載數(shù)據(jù)，再展示頁(yè)面。

大部分場(chǎng)景使用的是懶加載，節(jié)約性能，但是預(yù)加載能提前預(yù)測(cè)用戶的瀏覽行為，保證體驗(yàn)。

1. 整體加載

整體加載是指加載所有內(nèi)容后再展現(xiàn)給用戶，具體的表現(xiàn)形式是空白頁(yè)加載。

• 優(yōu)點(diǎn)：能保證內(nèi)容的整體性，不會(huì)造成信息缺失。
• 缺點(diǎn)：非常容易造成等待焦慮。

2. 分布加載

分布加載也成為優(yōu)先加載，將頁(yè)面內(nèi)容重要的部分提前加載出來(lái)，具體的表現(xiàn)形式有：分塊加載、分頁(yè)加載和分屏加載。

（1）分塊加載

可以根據(jù)數(shù)據(jù)類型進(jìn)行先后加載，如資訊類應(yīng)用，優(yōu)先加載文字而后加載圖片。

優(yōu)點(diǎn)：可以保證用戶快速獲取內(nèi)容。

缺點(diǎn)：部分內(nèi)容因?yàn)榧虞d速度限制而被用戶忽略，從而造成信息缺失。

（2）分頁(yè)加載

對(duì)于一些列表或卡片信息，可以使用自動(dòng)或手動(dòng)的分頁(yè)加載。

優(yōu)點(diǎn)：可以較快地展示比較完整的內(nèi)容。

缺點(diǎn)：可能會(huì)對(duì)信息檢索造成一定影響。

（3）分屏加載

先加載出全局頁(yè)面框架，而后隨頁(yè)面停留，再具體加載相應(yīng)內(nèi)容。

優(yōu)點(diǎn)：節(jié)省資源，方便聚焦內(nèi)容。

缺點(diǎn)：只適用一些數(shù)據(jù)量較大的頁(yè)面，信息不滿足。

3. 智能加載

智能加載通過(guò)用戶的網(wǎng)絡(luò)狀態(tài)選擇不同加載方案。

非WiFi模式下：暫不加載資源，提示用戶需要耗費(fèi)流量，等用戶確認(rèn)后進(jìn)行加載

WIFI模式下：自動(dòng)加載所有資源

優(yōu)點(diǎn)：比較貼心，適用于視頻、音樂(lè)等需要占用比較大流量的產(chǎn)品

缺點(diǎn)：會(huì)造成路徑訪問(wèn)的阻滯。

4. 緩存加載

也就是過(guò)去提到的離線加載，通過(guò)現(xiàn)有Wifi資源將服務(wù)器內(nèi)容緩存到本地，無(wú)網(wǎng)絡(luò)或是弱網(wǎng)環(huán)境下讀取緩存加載。

優(yōu)點(diǎn)：可以解決無(wú)網(wǎng)或弱網(wǎng)情況下數(shù)據(jù)獲取的問(wèn)題

缺點(diǎn)：可能會(huì)占用本地的存儲(chǔ)空間，以及后續(xù)的緩存處理需要考慮。

5. 漸進(jìn)式加載

點(diǎn)擊圖片會(huì)先看到高斯模糊的圖片，然后加載詳細(xì)圖片。

優(yōu)點(diǎn)：降低等待，節(jié)省資源。

缺點(diǎn)：使用必須根據(jù)數(shù)據(jù)類型，有一定局限性。

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

數(shù)據(jù)加載的業(yè)務(wù)流程并不復(fù)雜。具體如下：

分支情況：沒(méi)有更多新內(nèi)容、空頁(yè)面、頁(yè)面被刪除。

異常情況：網(wǎng)絡(luò)連接異常、刷新過(guò)于頻繁、網(wǎng)絡(luò)狀態(tài)切換、服務(wù)器崩潰。

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

六、加載優(yōu)化策略

數(shù)據(jù)加載流程的優(yōu)化可以通過(guò)兩個(gè)維度來(lái)進(jìn)行優(yōu)化：

1. 交互層面優(yōu)化

（1）盡可能考慮預(yù)加載

使用預(yù)加載可能極大提高用戶體驗(yàn)，而消耗的性能卻并不算多。

（2）使用異步處理

某些關(guān)鍵頁(yè)面可以采用異步處理數(shù)據(jù)，等恢復(fù)網(wǎng)絡(luò)環(huán)境的時(shí)候再與服務(wù)器校對(duì)。具有一定的門檻和風(fēng)險(xiǎn)，需要技術(shù)評(píng)估后使用。

（3）使用緩存

需要注意數(shù)據(jù)存儲(chǔ)的數(shù)據(jù)類型、更新規(guī)則，配合緩存加載可以讓用戶降低等待，又不會(huì)用占用大量的本地存儲(chǔ)空間。

（4）盡量使用非模態(tài)加載

非模態(tài)地加載：不會(huì)打擾用戶，可以讓用戶轉(zhuǎn)移注意力而降低等待焦慮。

模態(tài)加載：只能完成當(dāng)前加載后其他的事，原生應(yīng)用內(nèi)使用模態(tài)，一定要考慮提供取消按鈕，提供給用戶掌控權(quán)。

（5）提前加載布局

在一些不太需要完整性的頁(yè)面，盡量先將頁(yè)面布局展示出來(lái)。

（6）進(jìn)度條顯示

應(yīng)用內(nèi)打開H5頁(yè)面盡量提供進(jìn)度條，先慢后快，盡可能消減用戶等待焦慮。

2. UI層面優(yōu)化

（1）加載動(dòng)畫

使用情感化加載動(dòng)畫，可以讓等待過(guò)程變得輕松、愉悅。

（2）加載占位圖

如一些品牌元素，可以讓用戶在使用過(guò)程中加深對(duì)應(yīng)用的印象，形成品牌感知。

（3）加載色塊

如一些圖片瀑布流應(yīng)用，花瓣網(wǎng)、Pinterst，則會(huì)采用圖片色塊流的形式優(yōu)先展示底色，降低等待焦慮。

因?yàn)楸救斯ατ邢蓿瑢?duì)數(shù)據(jù)加載的理解止步于此，歡迎各位同學(xué)積極探討，相互交流成長(zhǎng)！

參考資料：

6種常見(jiàn)加載方式的優(yōu)缺點(diǎn)及設(shè)計(jì)策略

作者：瓦解Pen；公眾號(hào)：否定設(shè)計(jì)師，歡迎關(guān)注，一起成長(zhǎng)！

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

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