作為UI設(shè)計(jì)師，我相信大家都是專注于界面設(shè)計(jì)的好不好看，至于界面與界面之間如何交互，點(diǎn)擊之后如何反饋，是一個(gè)比較容易被忽略的重要環(huán)節(jié)。

那么我們?cè)趺刺幚砗媒缑娼换ブ械募虞d設(shè)計(jì)，減少用戶因等待產(chǎn)生的焦慮情緒，保證整個(gè)體驗(yàn)無縫銜接，今天這篇文章就來總結(jié)下APP中數(shù)據(jù)加載模式設(shè)計(jì)。

一、為什么要加載？

1、用戶在進(jìn)行某些操作時(shí)，都要從后臺(tái)請(qǐng)求數(shù)據(jù)，這個(gè)過程都需要時(shí)間，系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)做出適當(dāng)?shù)姆答?，讓用戶了解正在發(fā)生的事情，讓用戶知道此時(shí)的操作是有反應(yīng)，減緩用戶因等待而產(chǎn)生的焦慮感。同時(shí)加載方式也可以做的有趣，吸引用戶注意力，增加沉浸式體驗(yàn)，讓用戶輕松自在的享受等待；

2、體驗(yàn)無縫銜接，減少用戶跳失，正常的等待加載時(shí)間是0.3秒以內(nèi)，同時(shí)不同場(chǎng)景對(duì)應(yīng)有不同的加載方式。

二、常見的加載場(chǎng)景及方式

a.加載場(chǎng)景：

不同場(chǎng)景有不同的加載方式，常見的加載場(chǎng)景一般有以下幾種：下拉刷新、上拉加載、切換新頁面的數(shù)據(jù)加載、頁面局部模塊的加載、啟動(dòng)頁加載、操作按鈕加載。實(shí)際工作中，要根據(jù)不同的場(chǎng)景搭配不同的加載樣式，才能更好的做到緩解用戶等待焦慮，降低用戶的跳失率。

b.加載方式：

1、全屏加載

主要出現(xiàn)在手機(jī)H5頁面，例如微信的文章詳情頁。一般會(huì)有進(jìn)度條或有趣的動(dòng)畫設(shè)計(jì)，減輕用戶等待時(shí)的焦慮感。加載失敗后，頁面通常為空白頁，且有重新刷新操作按鈕。

優(yōu)點(diǎn)：將整個(gè)頁面的內(nèi)容都加載出來才展現(xiàn)給用戶，能保證內(nèi)容的整體性，全部加載完才能夠系統(tǒng)化的閱讀。

缺點(diǎn)：一般等待的時(shí)間較長，容易產(chǎn)生焦躁情緒，尤其是遇到網(wǎng)絡(luò)不好的情況

2、下拉刷新加載

主要出現(xiàn)在頁面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品，通過刷新加載新數(shù)據(jù)，加載的loading樣式可以結(jié)合產(chǎn)品logo或IP形象進(jìn)行設(shè)計(jì)，增加趣味性，吸引用戶注意力。

3.占位圖加載

如果頁面布局樣式比較固定，可以采用占位圖加載機(jī)制，先加載頁面布局和占位圖，先給用戶展示頁面框架，后加載頁面圖片細(xì)節(jié)部分，這種加載方式相對(duì)于直接展示白屏來說，呈現(xiàn)給用戶無縫銜接的感覺，體驗(yàn)更加流暢。

4.分布加載

當(dāng)頁面中有文字和圖片時(shí)，優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素，如先加載文字，后加載圖片，圖片加載完成前使用占位符顯示，保證用戶可以順暢閱讀，縮短用戶的等待時(shí)間，提高產(chǎn)品體驗(yàn)。

優(yōu)點(diǎn)：可以幫助用戶快速閱讀內(nèi)容，了解信息。

這種加載形式更加適用于內(nèi)容閱讀型的APP或圖片、視頻類資源比較多的頁面。

5.自動(dòng)加載（懶加載）

當(dāng)瀏覽信息時(shí)，不停的向上滑動(dòng)，新的內(nèi)容會(huì)不停的從底部出現(xiàn)，這種方式稱為自動(dòng)加載。對(duì)于自動(dòng)加載，要注意每次加載多少條內(nèi)容，或者多少屏的內(nèi)容。一般會(huì)在距下面內(nèi)容一定距離時(shí)開始加載，當(dāng)網(wǎng)速非?？斓臅r(shí)候，用戶并不能感知懶加載的動(dòng)作，這樣可以營造一種無極限瀏覽的錯(cuò)覺，很容易的把用戶吸引住。

優(yōu)點(diǎn)：無需用戶操作，自動(dòng)加載后續(xù)內(nèi)容，營造沉浸式體驗(yàn)。

應(yīng)用：適合feed流、瀑布流、算法推薦類的內(nèi)容。

6.預(yù)加載

提前加載好頁面信息內(nèi)容，這樣當(dāng)網(wǎng)絡(luò)不好的時(shí)候，可直接從本地緩存中渲染，就不用再加載了。

比如用戶在看A頁面的時(shí)候，App在后臺(tái)加載完B頁，等用戶打開B頁的時(shí)候就不需要等待加載了，因?yàn)锳pp已經(jīng)幫用戶提前加載好了，給用戶提供無縫鏈接的感覺，弊端就是服務(wù)器壓力很大，就是要預(yù)測(cè)用戶行為，加載其他數(shù)據(jù)，這樣會(huì)消耗不少流量，所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制，而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機(jī)制。

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

一般出現(xiàn)在圖片類產(chǎn)品，比如pinterest、unsplash等，當(dāng)瀏覽圖片的時(shí)候，經(jīng)常是先看到一張模糊圖或與圖片較為相似的色彩值圖片，然后再漸漸的變得清晰，這種效果就叫做漸進(jìn)式加載。漸進(jìn)式加載能夠大大的提升體驗(yàn)感。

8.后臺(tái)加載(異步處理)

用戶在前端執(zhí)行操作后，客戶端立即給予操作成功反饋提示，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互，這一過程用戶是看不到的，也不需要等待，體驗(yàn)是非常棒的。

例如在用微信發(fā)朋友圈時(shí)，會(huì)覺得特別流暢，即使在網(wǎng)絡(luò)不好的情況下，會(huì)看到你的動(dòng)態(tài)立即展示在朋友圈列表，并不會(huì)提示你網(wǎng)絡(luò)不好，操作失敗，全部以操作成功來顯示，其實(shí)它只是將你發(fā)布的操作記錄了下來，等網(wǎng)絡(luò)一好就將動(dòng)態(tài)上傳到服務(wù)器，從而完成發(fā)布行為，微信的點(diǎn)贊也是同樣的操作，你給好友點(diǎn)了贊，并不會(huì)提示你網(wǎng)絡(luò)不好，操作失敗，而是提示你點(diǎn)贊成功了，其實(shí)它只是將你點(diǎn)贊的操作記錄了下來，等網(wǎng)絡(luò)一好就將點(diǎn)贊的行為上傳到服務(wù)器，從而完成點(diǎn)贊行為會(huì)，給用戶帶來體驗(yàn)流暢的感覺。

所以這種加載方式是需要根據(jù)具體使用場(chǎng)景來權(quán)衡使用的，對(duì)于一些重要的操作，建議還是使用模態(tài)的方式加載，對(duì)于一些小操作，如點(diǎn)贊、訂閱、關(guān)注，可采用后臺(tái)加載的方式。

9.模態(tài)加載

以上幾種方式都是采用非模態(tài)加載，不會(huì)對(duì)用戶造成干擾，用戶可以做別的事情，不需要等待加載完成，大大降低了等待的焦躁感。

模態(tài)加載對(duì)用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結(jié)束，因?yàn)槿绻脩魣?zhí)行了其他操作就會(huì)打斷正在進(jìn)行的加載過程，實(shí)現(xiàn)不了用戶的目標(biāo)。

應(yīng)用：用戶執(zhí)行的操作本身不能和其他操作同時(shí)進(jìn)行，例如登錄，退出，應(yīng)用啟動(dòng)，手機(jī)支付等場(chǎng)景。

三、具體實(shí)施方法小結(jié)

1、能用非模態(tài)加載的盡量不要去用模態(tài)加載，如果非得用模態(tài)加載，也盡量給一個(gè)能取消的按鈕，方便用戶在不愿意等待的情況下取消操作。

2、如果加載的時(shí)間比較長，最好能告知用戶加載進(jìn)度，讓用戶心理有個(gè)預(yù)期，這樣用戶更愿意等待，不會(huì)因?yàn)榈却a(chǎn)生焦慮感，分分鐘卸載你的產(chǎn)品。科學(xué)的實(shí)驗(yàn)證實(shí)，先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計(jì)，這是因?yàn)橛脩糇钊菀子涀∽詈笠凰查g的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。

3、數(shù)據(jù)加載本身就是很考驗(yàn)用戶心態(tài)感受，所以盡量通過一些有趣的動(dòng)畫來轉(zhuǎn)移用戶的注意力，營造沉浸式體驗(yàn)，同時(shí)增加了趣味性，給予了產(chǎn)品人性化的設(shè)計(jì)。

 

總結(jié)

作為產(chǎn)品設(shè)計(jì)人員，盡量給用戶好的體驗(yàn)，我們應(yīng)該讓產(chǎn)品自己去解決問題，而不是把問題拋給用戶。在考慮人與客戶端交互的同時(shí)也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來，站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品，才能設(shè)計(jì)出體驗(yàn)更好的數(shù)據(jù)加載方案。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。