????加載（Loading）在APP中非常常見(jiàn)屹耐，這次我們開(kāi)發(fā)的APP上線后期奔，發(fā)現(xiàn)開(kāi)發(fā)很多地方都做了加載動(dòng)畫(huà)，而其實(shí)并沒(méi)有必要加那么多加載動(dòng)畫(huà)仿畸，也是前期需求的忽視食棕，所以我也趁著這次總結(jié)了一下APP加載設(shè)計(jì)，目錄如下：
????一错沽、 加載設(shè)計(jì)的意義與作用
????二簿晓、加載設(shè)計(jì)分類(lèi)
????三、不同分類(lèi)的常見(jiàn)應(yīng)用場(chǎng)景
????四千埃、不同場(chǎng)景下選擇的加載方式
????五憔儿、加載動(dòng)畫(huà)選擇
? 一、 ?加載設(shè)計(jì)的意義與作用
????我簡(jiǎn)單總結(jié)為放可，對(duì)于產(chǎn)品端：給予服務(wù)器響應(yīng)的時(shí)間谒臼；對(duì)于用戶端：緩解用戶因響應(yīng)時(shí)間而產(chǎn)生的等待焦慮朝刊； 滿足用戶對(duì)可能存在的未知情況的掌控。
? 二蜈缤、 加載設(shè)計(jì)分類(lèi)：1. 自動(dòng)加載 ?2. 手動(dòng)加載
? ? ?自動(dòng)加載：因產(chǎn)品需要自動(dòng)請(qǐng)求數(shù)據(jù)庫(kù)而產(chǎn)生的等待拾氓，我把這種產(chǎn)品的加載稱(chēng)為自動(dòng)加載。手動(dòng)加載：因用戶需要底哥，需每次手動(dòng)觸發(fā)請(qǐng)求數(shù)據(jù)庫(kù)而產(chǎn)品的等待咙鞍，我把這種加載稱(chēng)之為手動(dòng)加載。
三趾徽、不同分類(lèi)的常見(jiàn)應(yīng)用場(chǎng)景
自動(dòng)加載常見(jiàn)的應(yīng)用場(chǎng)景包括：1）應(yīng)用啟動(dòng) ?2）注冊(cè)以及登錄 3）進(jìn)入新的頁(yè)面 ?4）保存數(shù)據(jù) ?5）上傳奶陈、下載 ?6）點(diǎn)贊等
手動(dòng)加載常見(jiàn)的應(yīng)用場(chǎng)景包括：1）下拉刷新 ? 2）上拉加載更多 ?
????四、不同場(chǎng)景下選擇的加載方式
自動(dòng)加載方式大致分為以下7 種：
1. ?全屏加載
全屏加載是指頁(yè)面內(nèi)容區(qū)域全部空白附较，只留進(jìn)度條或轉(zhuǎn)圈式加載動(dòng)畫(huà)以表示頁(yè)面正在加載中，以保留閱讀內(nèi)容的完整性潦俺，但當(dāng)網(wǎng)絡(luò)狀況不佳時(shí)拒课，易給人造成頁(yè)面卡死的感覺(jué)，如圖：
2. 分步加載
分步加載是指優(yōu)先加載占用網(wǎng)絡(luò)資源小的元素事示，如文字以及默認(rèn)圖標(biāo)早像、圖片占位圖等，如圖：
3. 懶加載
懶加載就是延遲加載肖爵，當(dāng)用戶觸發(fā)到某些條件時(shí)卢鹦，才去請(qǐng)求服務(wù)器。這樣做一方面減少用戶的網(wǎng)絡(luò)資源耗費(fèi)劝堪，另一面也減少服務(wù)器的請(qǐng)求次數(shù)冀自。常見(jiàn)的如長(zhǎng)列表、瀑布流等秒啦，當(dāng)用戶即將瀏覽完已加載的20條熬粗，再去加載后20條，給用戶帶來(lái)無(wú)痕的瀏覽體驗(yàn)余境。
4. 預(yù)加載
預(yù)加載是指在用戶瀏覽前驻呐，預(yù)先加載內(nèi)容到本地緩存中，當(dāng)用戶查看頁(yè)面時(shí)芳来，從本地緩存中直接渲染含末，減少用戶等待時(shí)長(zhǎng)。但提前加載也會(huì)造成資源的浪費(fèi)即舌，消耗服務(wù)器的性能佣盒，是以服務(wù)器性能換取用戶良好的用戶體驗(yàn)。
5. 智能加載
智能加載主要是指根據(jù)網(wǎng)絡(luò)狀況不同顽聂，智能的調(diào)整加載方式沼撕。當(dāng)用戶處于 Wi-Fi 環(huán)境下宋雏，可優(yōu)先加載視頻、大圖片等务豺，當(dāng)用戶處于非 Wi-Fi 環(huán)境下磨总，加載小圖、無(wú)圖或者圖片/視頻占位圖笼沥。
6. 后臺(tái)加載
后臺(tái)加載是指前后端分離的加載方式蚪燕，前臺(tái)正常回應(yīng)用戶的操作奔浅，后臺(tái)慢慢處理用戶請(qǐng)求馆纳，如點(diǎn)贊功能，在用戶點(diǎn)贊后汹桦，點(diǎn)贊數(shù)立刻+1鲁驶，其實(shí)這個(gè)+1在1、2秒內(nèi)都是假數(shù)據(jù)舞骆，在請(qǐng)求數(shù)據(jù)1钥弯、2秒后才是真實(shí)+1。再例如我們發(fā)朋友圈督禽，內(nèi)容也是會(huì)立刻顯示在朋友圈脆霎，但其實(shí)對(duì)于一些圖片都是后臺(tái)加載，也要延遲一會(huì)才能被其他人看到狈惫。這樣前臺(tái)及時(shí)反饋用戶睛蛛，后臺(tái)處理數(shù)據(jù)的方式就是用戶完全不用關(guān)心加載情況，也無(wú)加載提示胧谈，看起來(lái)不用用戶的絲毫等待忆肾，提升用戶體驗(yàn)。
7. 離線加載
離線加載其實(shí)就是預(yù)加載與本地緩存的結(jié)合菱肖，當(dāng)用戶處于Wi-Fi模式下难菌，自動(dòng)加載數(shù)據(jù)，這樣在用戶處于非Wi-Fi 模式下就可以查看緩存內(nèi)容蔑滓。這種加載方式最好在設(shè)置里讓用戶去選擇是否開(kāi)啟郊酒，畢竟有些內(nèi)容可能會(huì)占用大量緩存空間，而用戶可根據(jù)自身手機(jī)內(nèi)存空間大小键袱，去選擇是否開(kāi)啟離線加載燎窘。
手動(dòng)加載采用的加載方式，大多都是懶加載蹄咖。
????五褐健、加載動(dòng)畫(huà)選擇
加載動(dòng)畫(huà)即與用戶進(jìn)行交互的等待動(dòng)畫(huà)，主要為緩解用戶等待的焦慮感。加載動(dòng)畫(huà)的形式有很多種蚜迅，分為中斷用戶操作和非中斷用戶操作舵匾，專(zhuān)業(yè)一點(diǎn)中斷用戶操作也稱(chēng)為模態(tài)加載，非中斷用戶操作稱(chēng)為非模態(tài)加載谁不。
中斷用戶操作（模態(tài)加載）：主要以蒙版彈窗的形式進(jìn)行加載坐梯，比如登錄中、退出中刹帕、支付吵血、APP的強(qiáng)制更新等，只有當(dāng)這操作完成后偷溺，才能操作其他功能蹋辅。而這時(shí)候加載動(dòng)畫(huà)，最好選擇生動(dòng)有趣一點(diǎn)的挫掏，有條件的情況下侦另，可讓UI自己設(shè)計(jì)個(gè)小動(dòng)畫(huà)，以提高用戶體驗(yàn)尉共。對(duì)于一些耗時(shí)較長(zhǎng)的加載褒傅，需要提示目前進(jìn)度情況，例如進(jìn)度條爸邢、完成數(shù)，再生動(dòng)點(diǎn)可用動(dòng)畫(huà)表示目前進(jìn)度拿愧，以緩解用戶因等待而產(chǎn)生的焦慮杠河。
非中斷用戶操作（非模態(tài)加載）：主要以導(dǎo)航欄加載、頂部/底部進(jìn)度條加載浇辜、頁(yè)面轉(zhuǎn)圈等形式進(jìn)行加載券敌，不影響用戶點(diǎn)擊其他操作按鈕，這種加載方式我的心得是盡量不打擾到用戶柳洋，所選擇的加載控件也盡量淡化待诅、弱化，不給用戶產(chǎn)生視覺(jué)負(fù)擔(dān)熊镣。
另外卑雁，下拉刷新操作其實(shí)是滿足用戶對(duì)最新消息的掌控需求，那么采用情趣化的加載動(dòng)畫(huà)去與用戶交互绪囱，我覺(jué)得是個(gè)很好的方式测蹲。
以上就是我對(duì)APP加載設(shè)計(jì)的總結(jié)，不妥之處鬼吵，不吝賜教扣甲。
- E N D -
如有問(wèn)題或更好建議，歡迎進(jìn)群與我討論齿椅，QQ群號(hào)：304459226
