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

那么我們怎么處理好界面交互中的加載設(shè)計，減少用戶因等待產(chǎn)生的焦慮情緒，保證整個體驗無縫銜接，今天這篇文章就來總結(jié)下APP中數(shù)據(jù)加載模式設(shè)計。

一、為什么要加載？

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

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

二、常見的加載場景及方式

a.加載場景：

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

b.加載方式：

1、全屏加載

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

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

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

2、下拉刷新加載

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

3.占位圖加載

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

4.分布加載

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

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

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

5.自動加載（懶加載）

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

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

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

6.預(yù)加載

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

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

7.漸進式加載

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

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

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

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

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

9.模態(tài)加載

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

模態(tài)加載對用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結(jié)束，因為如果用戶執(zhí)行了其他操作就會打斷正在進行的加載過程，實現(xiàn)不了用戶的目標(biāo)。

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

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

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

2、如果加載的時間比較長，最好能告知用戶加載進度，讓用戶心理有個預(yù)期，這樣用戶更愿意等待，不會因為等待產(chǎn)生焦慮感，分分鐘卸載你的產(chǎn)品?？茖W(xué)的實驗證實，先慢后快的進度條是讓用戶心理感受上最快的設(shè)計，這是因為用戶最容易記住最后一瞬間的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。

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

 

總結(jié)

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

轉(zhuǎn)自-站酷

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