設(shè)計(jì)師在進(jìn)行APP設(shè)計(jì)時(shí)补憾，往往會(huì)更加專注于界面長(zhǎng)什么樣，界面和界面之間怎么跳轉(zhuǎn)腾窝，給予用戶什么樣的操作反饋缀踪，卻偏偏特別容易忽略掉一個(gè)比較重要的環(huán)節(jié)，就是APP數(shù)據(jù)加載中的設(shè)計(jì)虹脯，所以會(huì)導(dǎo)致我們看到的APP驴娃，往往有著華麗的啟動(dòng)界面，然后就是漫長(zhǎng)的數(shù)據(jù)加載等待循集，甚至在無網(wǎng)絡(luò)的時(shí)候唇敞，整個(gè)處于不可用狀態(tài)。那么我們?cè)趺刺幚砗媒缑娼换ブ械募虞d設(shè)計(jì)暇榴，保證體驗(yàn)無縫銜接厚棵，保證用戶沒有漫長(zhǎng)的等待感蕉世，而可以輕松自在的享受等待蔼紧，對(duì)加載后的內(nèi)容有明確的預(yù)期呢？
今天這篇文章狠轻，會(huì)介紹6種常見的加載模式設(shè)計(jì)奸例，和3種減少等待感的具體手法，希望對(duì)追求極致體驗(yàn)的產(chǎn)品人有幫助。
一查吊、6種常見的數(shù)據(jù)加載模式
目前APP設(shè)計(jì)中谐区，合理的數(shù)據(jù)加載方式，主要分如下六種：1.全屏加載 2.優(yōu)先加載 3.整頁加載 4.自動(dòng)加載 5.智能加載 ?6.離線加載逻卖，這六種方式宋列，適用于不同的需求場(chǎng)景，也適用于不同類型的APP评也，讓我們來一一解讀炼杖。
1. 全屏加載
全屏加載就是整個(gè)屏幕白屏進(jìn)行數(shù)據(jù)加載，一般會(huì)有菊花轉(zhuǎn)配合盗迟，常用于手機(jī)網(wǎng)頁的加載中坤邪。
優(yōu)點(diǎn)：是能保證內(nèi)容的整體性，全部加載完才能夠系統(tǒng)化的閱讀罚缕。
缺點(diǎn)：比較明顯艇纺，就是有非常強(qiáng)烈的等待感，3s以上會(huì)產(chǎn)生焦躁情緒邮弹，所以在地鐵等信號(hào)不好的地方黔衡，使用手機(jī)網(wǎng)頁獲取內(nèi)容實(shí)在是比較災(zāi)難的一件事情。
一般這種情況會(huì)配合有明確進(jìn)度標(biāo)識(shí)的進(jìn)度條腌乡。
2.優(yōu)先加載
如果一個(gè)頁面有圖片有文字员帮，加載圖片比較慢的情況下，可以先把文字都加載出來导饲，保證用戶可以順暢閱讀捞高，然后再加載比較費(fèi)流量的圖片。如果是用這一種加載方式渣锦，活動(dòng)頁什么的硝岗，千萬不能重要信息全部放在頭圖上，導(dǎo)致加載不出來袋毙。重要操作也不能用圖片按鈕型檀，否則也會(huì)有操作顯示不出來的風(fēng)險(xiǎn)。
優(yōu)點(diǎn)：是可以幫助用戶快速閱讀內(nèi)容听盖，了解信息胀溺。
缺點(diǎn)：是也許會(huì)丟失掉重要的關(guān)鍵信息，無法建立信息獲取的閉環(huán)皆看。
這種加載形式更加適用于內(nèi)容閱讀型的APP仓坞。
3.整頁加載
當(dāng)當(dāng)前頁與下一頁是整頁切換的時(shí)候，可以考慮采用整頁加載的形式腰吟，但是要保證每個(gè)頁面的數(shù)據(jù)量不是特別的大无埃。
優(yōu)點(diǎn)：是能保證每個(gè)頁面的完整性，體驗(yàn)比較整體。
缺點(diǎn)：是不好保證整頁的加載效率嫉称，且有可能影響瀏覽的流暢度侦镇。
一般適用于宮格圖片模式、全屏圖片模式织阅、網(wǎng)狀詳情頁模式壳繁。
4.自動(dòng)加載
自動(dòng)加載適用于長(zhǎng)列表的情況，可以設(shè)定規(guī)則荔棉，默認(rèn)加載20條氮趋，滾動(dòng)第20條的時(shí)候，自動(dòng)再加載20條江耀。用這種手法剩胁，可以營(yíng)造一種無極限瀏覽的錯(cuò)覺，很容易的把用戶吸引住祥国，一直向下滾昵观，一直向下滾。
優(yōu)點(diǎn)：是把用戶代入無盡瀏覽模式舌稀，讓用戶一直向下滾動(dòng)啊犬，不需要手動(dòng)點(diǎn)擊下一頁。
缺點(diǎn)：是沒有盡頭壁查，容易迷失觉至，不方便快速索引定位到某個(gè)內(nèi)容。
適用于瀑布流睡腿、長(zhǎng)列表语御、商品列表等情況。
5.智能加載
當(dāng)用戶處于WiFi下時(shí)席怪，不會(huì)受限于流量和訪問速度应闯，大可以加載大圖片、大圖標(biāo)挂捻，甚至直接播放視頻動(dòng)畫碉纺，但是如果用戶處于非WiFi的模式下，則需要差異化的處理成小圖或者無圖模式刻撒，視頻和動(dòng)畫直接用一個(gè)占位符標(biāo)識(shí)就好了骨田，這種根據(jù)網(wǎng)絡(luò)狀況，智能調(diào)整的加載方式声怔，叫做智能加載态贤。
例如淘寶APP，當(dāng)網(wǎng)絡(luò)切換到GPRS或3G的時(shí)候捧搞，首先會(huì)提醒用戶網(wǎng)絡(luò)變化抵卫，然后查看商品詳情的時(shí)候，圖片從自動(dòng)下載胎撇，變換成點(diǎn)擊加載介粘，并且加載的只是精簡(jiǎn)版圖文詳情，防止多圖造成的流浪浪費(fèi)晚树。
優(yōu)點(diǎn)：是根據(jù)具體場(chǎng)景來控件流量和加載速度姻采。
缺點(diǎn)：是不一定真實(shí)有效的命中用戶需求，所以還是需要給予用戶一定的查看詳情的入口爵憎，或者是設(shè)置項(xiàng)慨亲。
適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP宝鼓。
6.離線加載
當(dāng)用戶沒網(wǎng)的時(shí)候刑棵，往往很多功能都不能用了，內(nèi)容也無法加載出來愚铡，導(dǎo)致APP變得根本不可用蛉签，這時(shí)候就要考慮預(yù)加載+離線緩存的設(shè)計(jì)了。首先在有網(wǎng)的時(shí)候把數(shù)據(jù)提前加載下來沥寥，緩存到本地碍舍，當(dāng)沒網(wǎng)的時(shí)候，直接加載已經(jīng)緩存下來的內(nèi)容邑雅。一般會(huì)提供給用戶選擇片橡，是否開啟有WiFi的情況下預(yù)加載功能，或者是否開始WiFi下全部離線緩存的功能淮野。這樣就能保證在地鐵上捧书，過個(gè)隧道就看不了內(nèi)容的尷尬了。
優(yōu)點(diǎn)：是解決了沒網(wǎng)獲取數(shù)據(jù)的問題骤星，且節(jié)約了流量鳄厌，保證了流暢。
缺點(diǎn)：是占用本地存儲(chǔ)空間妈踊，而且有時(shí)候預(yù)加載的內(nèi)容根本沒有用到了嚎。
適用于小說閱讀、新聞閱讀廊营、視頻類APP歪泳。
二、4種減少等待感的具體手法
1. 用非模態(tài)的加載方式
盡量使用非模態(tài)的加載方式露筒，就是加載的過程是不打擾用戶呐伞，不需要等待加載完就可以做別的事情的，如下示意：
用非模態(tài)的加載方式慎式，用戶可以利用做別的事情伶氢，打發(fā)等待的時(shí)間趟径，而不用傻傻等待數(shù)據(jù)加載完成，大大降低了等待的焦躁感癣防。即便是模態(tài)的加載蜗巧，也要給一個(gè)取消的選項(xiàng)，放在不耐煩的情況下還沒法取消蕾盯。
2. 情趣化的加載動(dòng)畫
加載的過程如此的枯燥乏味幕屹，為什么我們不能做點(diǎn)什么讓用戶覺得好受一點(diǎn)呢？有創(chuàng)意的設(shè)計(jì)師們?cè)O(shè)計(jì)了各種呆萌可愛的加載動(dòng)畫级遭。
這些加載動(dòng)畫讓等待的過程變成了一種享受望拖，用戶能感受到設(shè)計(jì)師的情懷，體會(huì)新鮮有趣的等待過程挫鸽。提升了產(chǎn)品情趣化的設(shè)計(jì)語言说敏，讓等待的焦躁感一掃而空。
3. 漫長(zhǎng)加載告知進(jìn)度
如果是時(shí)間較長(zhǎng)的加載過程丢郊，最好能清晰的告知過程進(jìn)度像云，這時(shí)候就需要采用有進(jìn)度的加載設(shè)計(jì)了。
瀏覽器的進(jìn)度條是一種較為常見的進(jìn)度告知設(shè)計(jì)蚂夕，通過這個(gè)進(jìn)度告知迅诬，讓用戶有了更加明確的知情權(quán)，也能更好的預(yù)期到加載完成的時(shí)間
但即便是小小的進(jìn)度條婿牍，也有很多的設(shè)計(jì)技巧在里面侈贷。一個(gè)非常經(jīng)典的體驗(yàn)設(shè)問，同樣是3s的加載時(shí)間等脂，勻速的進(jìn)度條俏蛮、先慢后快的進(jìn)度條、先快后慢的進(jìn)度條上遥，哪個(gè)讓用戶感覺上最快搏屑？經(jīng)過科學(xué)的實(shí)驗(yàn)證實(shí)，先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計(jì)粉楚。這是因?yàn)橛脩糇钊菀子涀∽詈笠凰查g的感覺辣恋，如果最后一瞬間，感知到了快模软，就覺得順暢了伟骨。
4. 盡量提前加載
盡可能的利用預(yù)加載或有WiFi的情況下離線緩存的方式，把內(nèi)容提前加載下來燃异，這樣能做到最大限度的降低加載給用戶帶來的卡頓感携狭。如果能判斷出來用戶下一步要做的事情，提前幫用戶加載相應(yīng)的內(nèi)容回俐，肯定是最符合需求場(chǎng)景的事情逛腿。當(dāng)我開始讀第一頁的時(shí)候稀并，第二頁第三頁就開始陸續(xù)緩存下來了
轉(zhuǎn)載自elay
