本文作者將加載劃分為6種類型，分別適用于不同的場(chǎng)景，各有優(yōu)缺點(diǎn)。設(shè)計(jì)師在設(shè)計(jì)時(shí)，可以根據(jù)用戶的使用場(chǎng)景和環(huán)境設(shè)計(jì)適合的加載。

設(shè)計(jì)師在進(jìn)行APP設(shè)計(jì)時(shí)，往往會(huì)更加專注于界面的布局、界面和界面之間怎么跳轉(zhuǎn)、操作反饋，卻往往忽略掉一個(gè)比較重要的環(huán)節(jié)，就是APP數(shù)據(jù)加載中的設(shè)計(jì)。那么我們?cè)趺刺幚砗媒缑娼换ブ械募虞d設(shè)計(jì)，保證體驗(yàn)無(wú)縫銜接，保證用戶沒有漫長(zhǎng)的等待感呢？

依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個(gè)范圍擴(kuò)大，分類里面不僅僅含有組件和控件，所以請(qǐng)不要在意細(xì)節(jié)。）

什么是加載？

用戶在客戶端的界面上進(jìn)行操作，客戶端發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器處理請(qǐng)求，返回?cái)?shù)據(jù)給客戶端，并顯示給用戶。這一過程成為加載。區(qū)別于緩存，緩存是主動(dòng)的，加載為被動(dòng)的。

全屏加載

這種加載比較簡(jiǎn)單，一般運(yùn)用在頁(yè)面內(nèi)容比較單一的情況下，所以直接一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容。

1、優(yōu)點(diǎn)

能保證內(nèi)容的整體性，全部加載完才能夠系統(tǒng)化的閱讀。

2、缺點(diǎn)

比較明顯，就是有非常強(qiáng)烈的等待感，3s以上會(huì)產(chǎn)生焦躁情緒。所以，在地鐵等信號(hào)不好的地方，使用手機(jī)網(wǎng)頁(yè)獲取內(nèi)容實(shí)在是比較災(zāi)難的一件事情。

3、使用場(chǎng)景

常見的是從上一級(jí)界面進(jìn)入下一級(jí)界面；或者H5中常使用。

一般這種情況會(huì)配合有明確進(jìn)度標(biāo)識(shí)的加載loading。

分步加載

當(dāng)有文字和圖片時(shí)，圖片會(huì)比文字加載的慢，這個(gè)時(shí)候往往文字先加載出來(lái)，圖片在加載過程中使用占位符，直到圖片加載成功。當(dāng)加載的頁(yè)面內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。通過先加載頁(yè)面框架，設(shè)計(jì)占位符等形式可以提前讓用戶知道整個(gè)界面的架構(gòu)，提高產(chǎn)品的體驗(yàn)感。

1、優(yōu)點(diǎn)

可以幫助用戶快速了解整個(gè)界面的信息布局。

2、缺點(diǎn)

開始瞬間會(huì)丟失掉重要的關(guān)鍵信息，用戶初次感知會(huì)認(rèn)為產(chǎn)品出問題了

3、使用場(chǎng)景

適用于多圖片布局的界面。比較消耗流量的界面

下拉加載

用戶下拉時(shí)，出現(xiàn)loading動(dòng)畫，對(duì)整個(gè)頁(yè)面的重新加載刷新?，F(xiàn)在很多的產(chǎn)品重新設(shè)計(jì)loading加載動(dòng)畫，使得加載過程更加具有情感化，人性化和品牌化。

1、優(yōu)點(diǎn)

方便用戶刷新當(dāng)前界面，獲取新數(shù)據(jù)。

2、缺點(diǎn)

非首屏?xí)r，無(wú)法進(jìn)行該手勢(shì)操作。

3、使用場(chǎng)景

界面信息可以刷新加載時(shí)使用。

上拉加載

用戶在瀏覽界面的過程中，對(duì)于未加載的信息，上拉過程中自動(dòng)加載。

1、優(yōu)點(diǎn)

把用戶代入無(wú)盡瀏覽模式，讓用戶一直向下滾動(dòng)，不需要手動(dòng)點(diǎn)擊下一頁(yè)。

2、缺點(diǎn)

沒有盡頭，容易迷失，不方便快速索引定位到某個(gè)內(nèi)容。

3、使用場(chǎng)景

適用于瀑布流、長(zhǎng)列表、商品列表等情況。

預(yù)加載

當(dāng)用戶在停留一個(gè)界面時(shí)候，將對(duì)應(yīng)當(dāng)前界面通向下一界面的所有信息都加載出來(lái)。使用這個(gè)加載方式會(huì)使得使用過程中很快減少時(shí)間等待。

1、優(yōu)點(diǎn)

用戶進(jìn)入下一級(jí)頁(yè)面無(wú)需加載過程，使用給用戶流暢之感。

2、缺點(diǎn)

在非WiFi情況下，浪費(fèi)用戶流量。

3、使用場(chǎng)景

信息需要即時(shí)刷新，同時(shí)預(yù)加載后消耗流量較少的場(chǎng)景，例如IM或郵件。這種加載機(jī)制的好處就是進(jìn)入下一頁(yè)無(wú)需加載，使用流程。

智能加載

根據(jù)用戶的網(wǎng)絡(luò)情況，加載不同質(zhì)量的圖片內(nèi)容。例如在WiFi情況下，加載出來(lái)的圖片是高清，在非WiFi情況下加載出來(lái)的圖片是標(biāo)清的。

1、優(yōu)點(diǎn)

是根據(jù)具體場(chǎng)景來(lái)控制流量和加載速度。

2、缺點(diǎn)

不一定是真實(shí)有效的命中用戶需求。

3、使用場(chǎng)景

適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP。

上述一共將加載劃分為6種類型。6種類型適用于不同的場(chǎng)景，各有優(yōu)缺點(diǎn)。設(shè)計(jì)師在設(shè)計(jì)時(shí)，可以根據(jù)用戶的使用場(chǎng)景和環(huán)境設(shè)計(jì)適合的加載。

相關(guān)閱讀

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：導(dǎo)航類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：引導(dǎo)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：網(wǎng)絡(luò)異常類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：空數(shù)據(jù)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：提示類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：操作類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：?jiǎn)卧丶?/a>