大多數App都要與服(fu)務器(qi)(qi)(qi)進行數據的交(jiao)換，App向服(fu)務器(qi)(qi)(qi)發出數據請求(qiu)(qiu)，服(fu)務器(qi)(qi)(qi)接(jie)收(shou)到請求(qiu)(qiu)之后向App傳(chuan)輸相應數據，App接(jie)收(shou)成功(gong)后顯示數據內(nei)容，沒有(you)接(jie)收(shou)成功(gong)則(ze)反(fan)饋數據接(jie)收(shou)失敗。

　　在(zai)(zai)這(zhe)個(ge)數(shu)據(ju)交換過程中(zhong)，由于網絡原因(yin)，需要(yao)花費一定時間，也就(jiu)是說用戶(hu)要(yao)等待加載完成，這(zhe)個(ge)時候就(jiu)要(yao)用到loading加載機(ji)制(zhi)，它告(gao)訴用戶(hu)，App正(zheng)在(zai)(zai)努力為您加載數(shu)據(ju)，您稍安勿躁。好的loading設(she)計能減弱(ruo)用戶(hu)的等待焦慮，不合理的loading設(she)計就(jiu)會(hui)讓(rang)用戶(hu)罵爹罵娘(niang)了(le)。

　　標題欄loading：微(wei)信、釘釘

　　釘釘&微信(xin)

　　微信、釘(ding)釘(ding)等都采用了這種形式(shi)。聊天列(lie)表頁的(de)聊天記錄是儲(chu)存在本地(di)的(de)，所以(yi)頁面內容不為空。這個時(shi)候(hou)加載無需獲(huo)取用戶的(de)視覺焦點，只(zhi)要在標(biao)題欄展示App正在加載，加載成功(gong)則(ze)標(biao)題欄loading消失，若因(yin)為網絡錯誤(wu)未連接服務器，則(ze)在標(biao)題欄顯示未連接狀態。

　　白屏(ping)loading

　　當(dang)頁面(mian)內(nei)容(rong)比較單一，需(xu)要(yao)一次性(xing)加(jia)載(zai)完成(cheng)才顯示(shi)，則采用(yong)這種(zhong)白屏加(jia)載(zai)樣式。這種(zhong)加(jia)載(zai)方式用(yong)戶(hu)在(zai)完全加(jia)載(zai)完成(cheng)之(zhi)前是看(kan)不(bu)到任(ren)何內(nei)容(rong)的，所以一旦(dan)超過(guo)時(shi)間太久一定要(yao)提示(shi)用(yong)戶(hu)什么原因加(jia)載(zai)失敗，而不(bu)是一直在(zai)那轉啊轉。同時(shi)將加(jia)載(zai)圖標做得更有趣些(xie)，也(ye)會減輕用(yong)戶(hu)等待時(shi)的焦慮(上面(mian)右圖就比左圖更讓用(yong)戶(hu)感覺良(liang)好)。

　　進度條

　　Safari&微信

　　進度(du)條的(de)加載樣式(shi)，多(duo)見于瀏(liu)覽器，包括(kuo)PC端(duan)和移動端(duan)的(de)瀏(liu)覽器。一些(xie)App頁面會用H5的(de)形式(shi)去做，這種(zhong)頁面多(duo)數也都會采用進度(du)條的(de)樣式(shi)來顯示loading過程。

　　toast

　　當用(yong)(yong)戶(hu)執(zhi)行(xing)了(le)某個操(cao)(cao)作時(shi)，為了(le)防止用(yong)(yong)戶(hu)繼續(xu)操(cao)(cao)作導致數(shu)據加載失(shi)敗，則用(yong)(yong)Toast的(de)樣(yang)式(shi)來提示正在加載，同時(shi)限制用(yong)(yong)戶(hu)繼續(xu)操(cao)(cao)作。這種情況(kuang)用(yong)(yong)戶(hu)一般只能執(zhi)行(xing)返回到上一級(ji)頁面的(de)操(cao)(cao)作，其(qi)他操(cao)(cao)作都被禁用(yong)(yong)。

　　為了防(fang)止數(shu)據(ju)一直加載(zai)不(bu)出來，可以在Toast上加個(ge)取(qu)消(xiao)按鈕(niu)，讓(rang)用戶(hu)主動停止加載(zai)狀態(tai)，由于加載(zai)數(shu)據(ju)失敗的情況(kuang)極少(shao)出現，所(suo)以在Toast上加取(qu)消(xiao)按鈕(niu)的App并不(bu)多(duo)。

　　下拉刷新

　　下拉(la)刷新(xin)廣泛(fan)被(bei)運(yun)用(yong)于大多數App，這種加載(zai)機(ji)制，保證(zheng)了用(yong)戶(hu)能看到本地緩存數據的前提下，還能告知用(yong)戶(hu)頁面正在刷新(xin)，同時，用(yong)戶(hu)還可以通過下拉(la)的手勢操(cao)作(zuo)來自己選擇重新(xin)加載(zai)數據，一定程度上滿足了強迫(po)癥(zheng)患者。

　　預設圖/占位符

　　當頁面的框架(jia)固(gu)定(ding)時，只(zhi)需要加載(zai)框架(jia)內數(shu)據(ju)時，采用(yong)這種刷新樣(yang)式，即先加載(zai)框架(jia)，再加載(zai)框架(jia)內的數(shu)據(ju)。為了反之(zhi)框架(jia)內的內容為空，會用(yong)占位符或者(zhe)預設圖(tu)片(pian)來填充。

　　上面簡(jian)單(dan)將(jiang)六種常見的loading加(jia)(jia)載(zai)樣式(shi)介紹了一下，樣式(shi)雖然有(you)(you)六種，但是其實只有(you)(you)兩種加(jia)(jia)載(zai)原理：一種是整體(ti)加(jia)(jia)載(zai)頁面數(shu)據，加(jia)(jia)載(zai)完成后一次顯示;第二種是先加(jia)(jia)載(zai)部分內(nei)容，再加(jia)(jia)載(zai)剩余內(nei)容(先加(jia)(jia)載(zai)文字(zi)再加(jia)(jia)載(zai)圖(tu)片;先加(jia)(jia)載(zai)框(kuang)架(jia)再加(jia)(jia)載(zai)框(kuang)架(jia)內(nei)的數(shu)據)。

　　我常說的(de)一句話(hua)是設(she)計形(xing)式(shi)(shi)永遠(yuan)是服務于(yu)產(chan)品(pin)功能的(de)，而(er)產(chan)品(pin)功能則是為(wei)了滿足(zu)用(yong)戶(hu)需求。了解(jie)了這(zhe)些loading加載的(de)設(she)計形(xing)式(shi)(shi)，進一步深度思考一下(xia)：這(zhe)些形(xing)式(shi)(shi)是為(wei)了減少用(yong)戶(hu)等(deng)待(dai)數據加載時的(de)焦慮感。那么有(you)沒有(you)更好的(de)機(ji)制(zhi)來降低用(yong)戶(hu)等(deng)待(dai)時的(de)焦慮感?當(dang)然有(you)。

　　第一：優化App的(de)加(jia)載算法，使得App與(yu)服務器交互數據的(de)時間簡短。這(zhe)個需(xu)要(yao)開發人(ren)員的(de)精(jing)(jing)益求精(jing)(jing)了。這(zhe)個是從根(gen)本上解決了問題，因(yin)為直接減(jian)少了加(jia)載數據的(de)時間，也就是減(jian)少了用(yong)戶需(xu)要(yao)等待的(de)時間。

　　第(di)二：采用(yong)預(yu)(yu)(yu)加(jia)(jia)載(zai)機(ji)制(zhi)(zhi)。拿閱讀App打比方，當用(yong)戶(hu)在(zai)(zai)(zai)看第(di)一頁(ye)的時(shi)候(hou)，App在(zai)(zai)(zai)后(hou)臺加(jia)(jia)載(zai)完后(hou)面的幾頁(ye)，等用(yong)戶(hu)翻到第(di)二頁(ye)的時(shi)候(hou)就不(bu)需要(yao)(yao)等待加(jia)(jia)載(zai)了，因為App已經幫用(yong)戶(hu)提前(qian)加(jia)(jia)載(zai)好了。這種加(jia)(jia)載(zai)機(ji)制(zhi)(zhi)對(dui)用(yong)戶(hu)體驗(yan)特別好，但是存在(zai)(zai)(zai)一個問題(ti)，就是要(yao)(yao)預(yu)(yu)(yu)測用(yong)戶(hu)行(xing)為，加(jia)(jia)載(zai)其他數(shu)據，這樣會消耗不(bu)少流量(liang)，所(suo)以建議在(zai)(zai)(zai)WiFi網絡(luo)環境下(xia)采取這種預(yu)(yu)(yu)加(jia)(jia)載(zai)機(ji)制(zhi)(zhi)，而在(zai)(zai)(zai)蜂窩網絡(luo)狀(zhuang)態下(xia)則不(bu)采用(yong)預(yu)(yu)(yu)加(jia)(jia)載(zai)機(ji)制(zhi)(zhi)。這個要(yao)(yao)和(he)開發人員討(tao)論溝通(tong)，確保預(yu)(yu)(yu)加(jia)(jia)載(zai)機(ji)制(zhi)(zhi)完美(mei)運行(xing)。

　　第三(san)：異步(bu)處理。這一點做得(de)好(hao)的App莫過于Instagram，不(bu)(bu)(bu)知道你(ni)有(you)沒有(you)發現，用(yong)Instagram的時候會覺(jue)得(de)特別流暢，即使在(zai)網(wang)絡(luo)(luo)不(bu)(bu)(bu)好(hao)的情況(kuang)下(xia)。這是(shi)(shi)為什么?因為在(zai)網(wang)絡(luo)(luo)不(bu)(bu)(bu)好(hao)的情況(kuang)下(xia)，你(ni)給好(hao)友點了贊(zan)，Instagram并不(bu)(bu)(bu)會提示(shi)你(ni)網(wang)絡(luo)(luo)不(bu)(bu)(bu)好(hao)，操(cao)作(zuo)失敗，而(er)是(shi)(shi)提示(shi)你(ni)點贊(zan)成功(gong)了，其實將(jiang)它只是(shi)(shi)將(jiang)你(ni)點贊(zan)的操(cao)作(zuo)記錄(lu)了下(xia)來，等網(wang)絡(luo)(luo)一好(hao)就將(jiang)點贊(zan)的行為上傳到服務器，從(cong)而(er)完成點贊(zan)行為。這就是(shi)(shi)減少用(yong)戶的操(cao)作(zuo)負擔，讓(rang)產品自己去(qu)解決問(wen)題，而(er)不(bu)(bu)(bu)是(shi)(shi)把(ba)問(wen)題拋給用(yong)戶。

　　請(qing)記住，目前App常見(jian)的(de)(de)loading加載樣(yang)(yang)式就這六種，當然還有其他的(de)(de)加載設計樣(yang)(yang)式，但是這有什么關系?你已經(jing)掌握了(le)產品加載的(de)(de)原(yuan)理，真正理解(jie)了(le)加載機制，這樣(yang)(yang)你才可以不變(bian)(bian)應萬變(bian)(bian)。