本文和大家分享的主要是產(chǎn)品設(shè)計(jì)中移動應(yīng)用數(shù)據(jù)加載相關(guān)內(nèi)容，通過講解組合使用技術(shù)、交互和界面這三個(gè)層次的常用策略，詳細(xì)剖析移動數(shù)據(jù)加載相關(guān)設(shè)計(jì)，一起來看看吧，希望對大家有所幫助。

　　一、研究問題的方式

組合使用技術(shù)、交互和界面策略來解決具體問題及目標(biāo)

　　用全面的思考來做出更好的決策，這三個(gè)層次的思考永遠(yuǎn)是相關(guān)的。

　　本文通過講解這三個(gè)層次的常用策略，希望能驅(qū)動你更好的決策。

　　二、技術(shù)策略

　　因?yàn)榧虞d的本質(zhì)是通信的過程（此處只涉及數(shù)據(jù)傳輸，不涉及系統(tǒng)底層進(jìn)程，但是原理相同），例如有些游戲進(jìn)度條加載時(shí)會提示「加載不消耗流量」，此時(shí)的加載屬于系統(tǒng)硬件加載，沒有產(chǎn)生數(shù)據(jù)通信，所以暫不考慮。

　　1、同步加載

　　（1）什么是同步？

　　我們來講一個(gè)小朋友的故事：有一天大雄正在學(xué)校做數(shù)學(xué)作業(yè)（當(dāng)前任務(wù)），有個(gè)特別強(qiáng)壯的同學(xué)胖虎走了過來，把作業(yè)本猛的丟到大雄桌子上叫到「先把我的做完，我就在這看著你！」（收到同步任務(wù)），大雄對比了一下身型差距，敢怒不敢言，只好先拿過胖虎的作業(yè)本開始做（中斷當(dāng)前任務(wù)，開始處理同步任務(wù)），直到做完了胖虎的作業(yè)，很不情愿的交給胖虎（返還任務(wù)數(shù)據(jù)），等到胖虎美滋滋的走掉了，大雄才開始繼續(xù)做自己的（繼續(xù)之前的任務(wù)）。

　　這個(gè)持強(qiáng)凌弱的故事就和同步的原理類似：同步加載請求執(zhí)行某一任務(wù)，直至該請求返回?cái)?shù)據(jù)之前，請求端什么也不干就在旁邊等待。這種方式類似產(chǎn)品開發(fā)流程中的瀑布模型，產(chǎn)品設(shè)計(jì)之后才能交付開發(fā)，開發(fā)完成之后才能交付測試。還有某些應(yīng)用，有新版本更新時(shí)彈出一個(gè)模態(tài)提醒（一種必須操作的提醒樣式），點(diǎn)擊「更新」之后就在模態(tài)提醒內(nèi)下載，此時(shí)不能返回不能退出也不能進(jìn)行任何操作，除非你殺死應(yīng)用進(jìn)程。

　　（2）為什么用同步加載？

　?。?nbsp;即時(shí)性，加載完成／失敗會立即得到反饋結(jié)果，上下步操作關(guān)聯(lián)性強(qiáng)

　　． 技術(shù)上更易于實(shí)現(xiàn)，避免了異步加載產(chǎn)生的各種資源利用和同步問題（比如在客戶端更改某屬性值，因?yàn)榫W(wǎng)絡(luò)延遲，服務(wù)器沒有收到更改消息，而客戶端顯示已經(jīng)更改成功，于是去請求了其它數(shù)據(jù)產(chǎn)生錯(cuò)誤。PS：真實(shí)情況要復(fù)雜得多）

　　（3）同步加載適用情況

　?。?nbsp;登錄注冊，提交訂單，上傳資料等下一步操作與當(dāng)前操作相關(guān)的情況，俗稱順序操作（例如登陸之后才能發(fā)帖）

　?。?nbsp;掃碼支付，修改重要資料等獲得操作結(jié)果特別重要的情況

　　． 產(chǎn)品開發(fā)資源不足的情況，程序猿開發(fā)異步是要工時(shí)的（亂加需求是要被打的哈哈）

　　2、異步加載

　　（1）什么是異步？

　　回到剛才的故事，大雄被人欺負(fù)心里很苦悶，晚上回家找到正在吃魚的哆啦A夢，對它說「能不能給我做個(gè)道具收拾胖虎，等你做好叫我一聲」（收到異步任務(wù)），然后就去做別的事情了，哆啦A夢抬頭看看他繼續(xù)吃魚（繼續(xù)之前任務(wù)），而大雄就等著什么時(shí)候收到道具收拾胖虎了（等待返還任務(wù)數(shù)據(jù)）。

　　異步加載在發(fā)送信息之后，繼續(xù)執(zhí)行下一步操作，等什么時(shí)候收到請求的信息，再進(jìn)行處理。舉個(gè)不太恰當(dāng)?shù)睦?，異步加載就相當(dāng)于產(chǎn)品開發(fā)流程中的敏捷開發(fā)，現(xiàn)在可以研發(fā)工作和測試工作交叉進(jìn)行了（同時(shí)開展，完成不同任務(wù)）。在同步加載小節(jié)更新應(yīng)用的例子里就是，點(diǎn)擊「更新」之后，下載任務(wù)跑到后臺下載去了，你依舊可以在應(yīng)用里隨便玩，終于不怕突然點(diǎn)錯(cuò)什么卡住啦。

　　（2）為什么用異步加載

　　． 有效的提升用戶體驗(yàn)，界面跳轉(zhuǎn)動畫和異步加載會讓用戶覺得反饋很靈敏，增強(qiáng)操作的流暢度，避免用戶被阻塞在等待界面產(chǎn)生負(fù)(bao)面(zao)情緒，但是操作之間關(guān)聯(lián)性差，若異步處理不好容易讓用戶產(chǎn)生疑惑

　　． 如果同步加載速度太慢，很可能會長時(shí)間停留在加載界面，讓人欲罷不能（不過現(xiàn)在有些應(yīng)用已經(jīng)開始提供同步加載時(shí)的用戶出口）

　　（3）異步加載適用情況

　?。?nbsp;只要不涉及重要資料和順序操作的數(shù)據(jù)加載都適合異步加載

　?。?nbsp;大量圖片／視頻的頁面

　?。?nbsp;大量item的列表頁

　　． 涉及大量數(shù)據(jù)計(jì)算的頁面

　?。?nbsp;體量龐大的H5頁面

　　3、回調(diào)

　　（1）什么是回調(diào)？

　　簡單來講，就是你給別人發(fā)個(gè)郵件，他處理完之后給你回郵件，回郵件的過程就是回調(diào)。微信登錄就是典型的回調(diào)過程，在你的應(yīng)用里點(diǎn)擊微信登陸，然后調(diào)用微信，微信授權(quán)成功之后，再回調(diào)登錄成功的信息給你的應(yīng)用，你的應(yīng)用就知道「噢，他登錄成功了」。

　　（2）回調(diào)的意義

　　回調(diào)是異步實(shí)現(xiàn)的基礎(chǔ)，回調(diào)實(shí)現(xiàn)了應(yīng)用間數(shù)據(jù)傳輸，服務(wù)器和客戶端之間的主動數(shù)據(jù)交互等，在此就不多說了，在數(shù)據(jù)加載這里我們就按同步異步來講就好。

　　三、交互策略

　　此處要注重強(qiáng)調(diào)一下，不同的交互策略運(yùn)用了不同的技術(shù)策略，這是兩個(gè)維度，并不是簡單的一對一關(guān)系，要學(xué)會配合使用。

　　1、啟動頁加載

　　同步加載時(shí)的常用策略是：加載完某些數(shù)據(jù)才能進(jìn)入應(yīng)用，適合對某些關(guān)鍵數(shù)據(jù)進(jìn)行檢查，例如檢查用戶身份信息，此種策略為了保證一些關(guān)鍵數(shù)據(jù)的可控性。

　　異步加載的常用策略是：進(jìn)入應(yīng)用內(nèi)在加載使用的數(shù)據(jù)，例如進(jìn)入應(yīng)用再刷新首頁，這種策略為了提高進(jìn)入應(yīng)用的速度。

　　2、當(dāng)前頁加載

　　大部分都是的同步加載，要在當(dāng)前頁面完成數(shù)據(jù)加載，才能進(jìn)入下一頁面。網(wǎng)不好？那就在這呆著吧（；￣ェ￣）。

　　不過一般會在加載期間顯示一些小動畫，例如小菊花，來減緩用戶等待的阻塞感＝ ＝。

　　在APP里，一般加載失敗留在當(dāng)前頁面；而在H5頁面里，一般加載失敗，頁面為空或報(bào)錯(cuò)。

　　3、下一頁加載

　　為保證用戶體驗(yàn)，現(xiàn)在大多數(shù)應(yīng)用都采用下一頁面加載策略，畢竟在當(dāng)前頁面卡住和在下一頁面卡住是兩種不同的感受哦，用戶心理如是也-_-#，而且網(wǎng)絡(luò)差導(dǎo)致頁面加載過慢時(shí)，在下一頁加載能一定程度上轉(zhuǎn)移仇恨，讓用戶感覺進(jìn)不去界面是因?yàn)榫W(wǎng)絡(luò)或者其它原因，而我們（APP）可是在很努力的幫他加載呢，千萬不要怪我們呦～

　　敲黑板：「下一頁加載不等同于異步加載」

　　（1）白屏加載

　　這種就是下一頁加載的同步加載版本，一進(jìn)入頁面出現(xiàn)一個(gè)大白屏，直到加載完成一次性顯示全部頁面。

　　（2）分步加載

　　一般我們說的分布加載都是異步加載，但是異步加載不是分布加載，要分清楚包含關(guān)系呦～

　?。?nbsp;分布加載一般先加載占網(wǎng)絡(luò)資源小的元素，隨后再加載圖片、視頻等占大量網(wǎng)絡(luò)資源的元素，這種方式多用在大量圖片／視頻的頁面

　?。?nbsp;另一種形式是先加載頁面的框架，然后再加載框架里的內(nèi)容，這種方式多用在頁面元素有層級關(guān)系的頁面（例如嵌套），可以保證頁面打開后顯示的格式可控

　?。?nbsp;還有一種形式是加載固定數(shù)量的item，現(xiàn)在有大量內(nèi)容的列表頁面的產(chǎn)品，在Feed流頁面普遍使用分布加載，來保證用戶流量和閱讀體驗(yàn)的平衡

　　（3）延遲加載

　　有些內(nèi)容不是界面初始化的時(shí)候就需要的，可能在用戶下一步操作（例如上滑頁面）的時(shí)候才會出現(xiàn)的，而這些內(nèi)容又占用很多的網(wǎng)絡(luò)資源（比如圖片、視頻）這時(shí)就使用到延遲加載的策略，延遲加載也屬于分步加載。

　　例如淘寶，用戶瀏覽時(shí)只加載當(dāng)前屏幕的圖片，直至上滑界面使新的圖片進(jìn)入可視區(qū)域時(shí)，才會加載新圖片，這樣可以節(jié)省用戶流量，同時(shí)保證用戶操作的可用性。

　　（4）預(yù)加載

　　我們和延遲加載對比一下：延遲加載是進(jìn)入可視區(qū)域后才會加載，預(yù)加載就是在進(jìn)入可視區(qū)域前加載。

　　預(yù)加載是一種在節(jié)省流量和流暢體驗(yàn)二者中向流暢性優(yōu)化的例子，理想情況下是使用戶感覺不到內(nèi)容的加載過程，滑到哪就能看到哪。

　　5、智能加載

　　斷網(wǎng)或弱網(wǎng)時(shí)，緩存加載策略能有效提升用戶體驗(yàn)，在頁面中顯示之前緩存在本地的內(nèi)容，使頁面不至于出現(xiàn)大白屏或者錯(cuò)誤代碼等。

　　6、漸進(jìn)加載

　　傅立葉變換的實(shí)際應(yīng)用，主要用于高清圖片的加載，在傳輸大圖的過程中，先顯示一個(gè)模糊效果，隨著下載數(shù)據(jù)的增多，逐漸精細(xì)圖片的細(xì)節(jié)，形成一個(gè)平滑的加載過程（形成平滑的用戶體驗(yàn)），最終變成完整分辨率的清晰圖片。

　　漸進(jìn)式加載要預(yù)先處理圖片和優(yōu)化應(yīng)用支持，這有點(diǎn)麻煩，所以有一些替代方案的嘗試，舉例如下：

　　． 微信的加載方式：先顯示一個(gè)小圖／縮略圖，隨后加載完成大圖／高清圖再顯示大圖；

　?。?nbsp;傳統(tǒng)的加載方式：圖片從上至下／從左至右顯示完成，類似打印機(jī)逐行掃描；

　　四、界面策略

　　在UI設(shè)計(jì)里，關(guān)于數(shù)據(jù)加載的表現(xiàn)形式千變?nèi)f化，具體處理方式總結(jié)起來大概有以下幾種。諾，你看

　　1、狀態(tài)欄加載

　　2、導(dǎo)航欄加載

　　3、白屏加載

　　簡單粗暴你看是不是？

　　4、Toast加載

　　5、進(jìn)度條加載

　　6、下拉刷新加載

額外提一下，細(xì)膩的下拉動畫是包含下拉加載、釋放加載、正在加載三種狀態(tài)的呦～

　　7、頁面上滑加載

　　8、全屏加載

白屏加載的變種，加入了用戶體驗(yàn)的優(yōu)化，別說效果就是不一樣，在解決問題上的每一點(diǎn)探索都值得尊重，所以我單獨(dú)把它列為一類（啟動應(yīng)用加載也屬于全屏加載）

　　五、策略組合

　　如果能看到這里，你一定對技術(shù)、交互、和UI三個(gè)層面的數(shù)據(jù)加載解決方案有了大致的了解。非常重要的是，在實(shí)際設(shè)計(jì)中，這三個(gè)層次的解決方案是互相交叉組合來匹配具體的應(yīng)用場景的，使用不同的策略優(yōu)勢互補(bǔ)，配合解決復(fù)雜問題，其目的都是為了更好的用戶體驗(yàn)或完善業(yè)務(wù)邏輯。

　　此處就先不討論具體策略組合來解決場景問題的方案了，希望正在看文章的你也能思考思考，有哪些有意思的策略組合，解決了復(fù)雜場景的問題，可以留言我們一起討論交流～

　　本文從技術(shù)、交互、UI三個(gè)角度梳理了移動應(yīng)用數(shù)據(jù)加載的常見設(shè)計(jì)模式。但是大家一定要記住，模式只是一些比較成熟的解決方案，在實(shí)際設(shè)計(jì)中不要被模式約束，也不要濫用模式，要深入剖析每個(gè)設(shè)計(jì)模式是在什么環(huán)境下為解決什么問題而設(shè)計(jì)的，明確問題環(huán)境的約束，找到合適的妥協(xié)點(diǎn)，完成你自己的設(shè)計(jì)。

 

 

來源：人人都是產(chǎn)品經(jīng)理