數(shù)據(jù)加載發(fā)生在用戶觸發(fā)特定操作后，客戶端向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器處理并返回?cái)?shù)據(jù)給客戶端的過(guò)程。該過(guò)程中由于網(wǎng)絡(luò)異常、解析出錯(cuò)或服務(wù)器異常等問(wèn)題常常會(huì)導(dǎo)致數(shù)據(jù)加載失敗或延時(shí)。
而用戶是沒(méi)有耐心的，這時(shí)候需要產(chǎn)品在前端進(jìn)行一定的設(shè)計(jì)來(lái)緩解用戶等待焦慮，并在加載失敗時(shí)給出一定的反饋提示，防止用戶由于漫長(zhǎng)等待時(shí)間而離開(kāi)。
下面將通過(guò)淘寶的加載實(shí)例來(lái)分析一些常見(jiàn)的數(shù)據(jù)加載方式，體驗(yàn)設(shè)備：iPhone 8 v12.3。
目錄：
- 啟動(dòng)頁(yè)
- 下拉刷新加載
- 分頁(yè)加載
- 全屏加載
- 占位加載
- 模糊加載
- 模態(tài)加載
補(bǔ)充：關(guān)于加載的一些細(xì)節(jié)設(shè)計(jì)
總結(jié)
1. 啟動(dòng)頁(yè)
啟動(dòng)app時(shí)需要進(jìn)行初始化工作，基本所有產(chǎn)品都會(huì)設(shè)置啟動(dòng)頁(yè)來(lái)緩沖用戶的等待時(shí)間，提升用戶體驗(yàn)。通常有以下幾種：
- 展示產(chǎn)品logo和slogan，宣傳定位
- 展示具有品牌形象和產(chǎn)品情懷的封面圖，建立品牌認(rèn)知
- 更多的是兩者結(jié)合，利用展示logo和slogan的時(shí)間加載廣告或活動(dòng)頁(yè)，同時(shí)繼續(xù)初始化app界面
2. 下拉刷新加載
常用于內(nèi)容可變的界面或列表，頂部刷新屬于用戶的主動(dòng)行為，比起常見(jiàn)的文字提示，更多app都是采用比較有趣的設(shè)計(jì)，提高趣味性同時(shí)展示產(chǎn)品形象。
淘寶首頁(yè)刷新使用動(dòng)態(tài)懸浮圓圈樣式，每次刷新除了展示商品的變化，還伴隨廣告展示，同樣在下拉刷新展示廣告的還有愛(ài)優(yōu)騰之類(lèi)的視頻播放軟件：
首頁(yè)以外的頁(yè)面刷新頻次不高，采用了簡(jiǎn)單的文字刷新提示，刷新成功會(huì)有對(duì)應(yīng)的 Toast 提示，給予適當(dāng)?shù)姆答仯?/p>
像斗魚(yú)、虎牙、B站等偏娛樂(lè)的app采取的則是比較有趣的動(dòng)畫(huà)，讓用戶忍不住盯著看，有效緩解用戶等待過(guò)程的無(wú)聊感：
Gif效果圖：
3. 分頁(yè)加載
當(dāng)當(dāng)前頁(yè)面的數(shù)據(jù)量太多時(shí)需要對(duì)數(shù)據(jù)進(jìn)行分頁(yè)，每次只加載一頁(yè)的信息呈現(xiàn)給用戶，分為自動(dòng)加載、手動(dòng)加載、翻頁(yè)加載。
（1）自動(dòng)加載
滑動(dòng)到列表底部時(shí)會(huì)自動(dòng)加載下一頁(yè)數(shù)據(jù)，這種加載方式不會(huì)中斷用戶操作，應(yīng)用場(chǎng)景多為沉浸式體驗(yàn)的信息流列表。
自動(dòng)加載通常在上一頁(yè)瀏覽結(jié)束前就開(kāi)始預(yù)加載，用戶基本察覺(jué)不到加載過(guò)程，因此不需要做過(guò)于復(fù)雜的樣式，大多數(shù) app 都采用加載圓圈和文字提示的方式：
（2）手動(dòng)加載
需要用戶手動(dòng)點(diǎn)擊加載才拉取下一頁(yè)的數(shù)據(jù)，這種加載方式多應(yīng)用于移動(dòng)端H5頁(yè)面，好處是用戶對(duì)頁(yè)面有掌控權(quán)，能知道當(dāng)前瀏覽進(jìn)度，不會(huì)因?yàn)楸粍?dòng)接收源源不斷的列表信息產(chǎn)生負(fù)面情緒，而且如果頁(yè)尾有重要信息提供時(shí)不會(huì)因?yàn)榱斜碜詣?dòng)加載而一直無(wú)法被瀏覽到。
淘寶H5頁(yè)面采取了客戶端的形式，以商品展示為主，并沒(méi)有用手動(dòng)加載。采用手動(dòng)加載的大部分都是以資訊、在線閱讀等文字信息為主的產(chǎn)品，如虎嗅、簡(jiǎn)書(shū)、起點(diǎn)中文網(wǎng)：
（3）翻頁(yè)加載
翻頁(yè)加載可以理解為另一種形式的手動(dòng)加載，不同之處在于其通過(guò)頁(yè)數(shù)告知用戶信息量大小，且用戶對(duì)當(dāng)前瀏覽位置有清晰的認(rèn)知，可以自主選擇跳轉(zhuǎn)瀏覽的頁(yè)面。
這種方式在移動(dòng)端較少見(jiàn)，常見(jiàn)于PC端產(chǎn)品：
無(wú)論列表尾部采取何種加載方式，看似對(duì)用戶影響不大，相信大部分用戶在瀏覽列表時(shí)都是自動(dòng)加載完就接著看，看到提示點(diǎn)擊就點(diǎn)一下，但當(dāng)長(zhǎng)時(shí)間集中注意力于頁(yè)面內(nèi)容卻不知道瀏覽的進(jìn)度，或者一次次閱讀到文章底部又自動(dòng)加載出一大段文字時(shí)，難免會(huì)出現(xiàn)焦躁感，這時(shí)候就需要產(chǎn)品在細(xì)節(jié)處下功夫，給用戶提供用戶本身都沒(méi)有意識(shí)到的需求。
4. 全屏加載
當(dāng)頁(yè)面內(nèi)容過(guò)于單一或布局多變時(shí)，可以在數(shù)據(jù)全部加載完畢時(shí)再顯示，但這個(gè)過(guò)程中頁(yè)面是空白的，因此加載過(guò)程最好配合趣味性設(shè)計(jì)，可以緩解用戶無(wú)聊情緒，還可以結(jié)合產(chǎn)品形象設(shè)計(jì)，提升好感度。全屏加載可細(xì)分為進(jìn)度條加載和白屏加載：
（1）進(jìn)度條加載
網(wǎng)上大多數(shù)說(shuō)法是先快后慢的進(jìn)度條是用戶感知最快的加載方式，我找了很多資料也沒(méi)找到有力的論據(jù)驗(yàn)證這一說(shuō)法，根據(jù)個(gè)人體驗(yàn)，普遍做法是“快 - 勻速 - 快”，這個(gè)過(guò)程在心理感受上也是比較流暢的體驗(yàn)，重點(diǎn)在于不要一直卡在一個(gè)點(diǎn)不動(dòng)，等待久了接收不到任何反饋，用戶就會(huì)因?yàn)榧痹旮卸x開(kāi)。
淘寶、Safari和微博在弱網(wǎng)情況下會(huì)在一開(kāi)始就卡住很長(zhǎng)一段時(shí)間，而對(duì)比之下，微信公眾號(hào)先快后勻加速加載的方式體驗(yàn)起來(lái)要更流暢一些。
（2）白屏加載
比進(jìn)度條加載趣味性更強(qiáng)，一般會(huì)配合圖像和動(dòng)畫(huà)進(jìn)行設(shè)計(jì)，缺點(diǎn)是無(wú)法知悉具體加載進(jìn)度。淘寶的加載設(shè)計(jì)比較中規(guī)中矩：
做得比較好的有虎牙、B站、每日優(yōu)鮮，加載動(dòng)畫(huà)有趣生動(dòng)，且十分貼合產(chǎn)品形象：
Gif效果圖：
5. 占位加載
使用矩形色塊代替未加載完成的數(shù)據(jù)，一般用于頁(yè)面布局固定的H5設(shè)計(jì)，如信息流列表、資訊詳情頁(yè)等，加載過(guò)程中用戶可以提前看到即將展示的界面框架，有個(gè)心理預(yù)期。
經(jīng)典且比較出色的占位加載產(chǎn)品莫過(guò)于FaceBook了，按模塊細(xì)分進(jìn)行不同占位加載，而且加載過(guò)程中色塊有漸變效果：
不過(guò)對(duì)客戶端來(lái)說(shuō)，采用這種加載方式對(duì)性能要求較高，可能會(huì)出現(xiàn)加載慢或不流暢的情況。
還有一種占位加載是優(yōu)先加載文字和框架，針對(duì)加載較慢的圖片、視頻進(jìn)行占位加載，多用默認(rèn)色塊或者缺省圖進(jìn)行占位：
6. 模糊加載
適用于圖片較多的界面，加載完畢前先展示模糊處理的圖片，用戶能大致看清圖片輪廓，等待意愿更強(qiáng)，過(guò)渡效果也比使用缺省圖或黑色畫(huà)布更自然：
7. 模態(tài)加載
客戶端對(duì)話框設(shè)計(jì)中可分為模態(tài)和非模態(tài)對(duì)話框，模態(tài)對(duì)話框是指在用戶想要進(jìn)行下一步操作時(shí)，必須先對(duì)該對(duì)話框進(jìn)行響應(yīng)。顧名思義，模態(tài)加載也會(huì)阻斷用戶操作，除了終止或返回上一頁(yè)，必須等待當(dāng)前加載完畢才可進(jìn)行下一步動(dòng)作。
模態(tài)加載主要用來(lái)限制一些關(guān)鍵性操作，如創(chuàng)建訂單、支付、提交信息等，多以Toast結(jié)合圖案的形式展示：
補(bǔ)充：關(guān)于加載的一些細(xì)節(jié)設(shè)計(jì)
1. 選擇合適的加載方式
為了更快讓用戶看到信息，通常會(huì)對(duì)加載頁(yè)面的設(shè)計(jì)配合技術(shù)層面的數(shù)據(jù)加載方式來(lái)提高加載速度，最常見(jiàn)的為懶加載、預(yù)加載、智能加載和分步加載。
(1)懶加載
當(dāng)內(nèi)容出現(xiàn)在界面區(qū)域時(shí)再進(jìn)行加載，節(jié)省用戶流量同時(shí)適當(dāng)減輕服務(wù)器壓力，很多信息流產(chǎn)品都采取這種加載方式，一般只針對(duì)加載較慢的圖片和視頻進(jìn)行懶加載：
(2)預(yù)加載
用戶在瀏覽當(dāng)前頁(yè)面的時(shí)候，預(yù)先加載下一級(jí)頁(yè)面的內(nèi)容。應(yīng)用場(chǎng)景多為資訊類(lèi)，通常在用戶瀏覽列表的時(shí)候就已經(jīng)加載好了資訊詳情的內(nèi)容，這樣即使突然網(wǎng)絡(luò)異常也不影響用戶查看文章。
采取預(yù)加載時(shí)需要結(jié)合實(shí)際場(chǎng)景，預(yù)測(cè)用戶行為，如果用戶瀏覽當(dāng)前頁(yè)面的時(shí)候就已經(jīng)離開(kāi)了，會(huì)造成流量的浪費(fèi)。而且為了適當(dāng)節(jié)省流量和減輕服務(wù)器壓力，通常只針對(duì)用戶當(dāng)前瀏覽的界面進(jìn)行預(yù)加載。
微信公眾號(hào)和今日頭條都采用了預(yù)加載方式：
(3)智能加載
針對(duì)不同網(wǎng)絡(luò)情況采取不同的加載方式，比如：
- 觀看視頻時(shí)，3G/4G情況下默認(rèn)選取低分辨率畫(huà)面節(jié)省流量，WiFi情況下則選取高清模式
- 非Wifi情況下瀏覽信息時(shí)，不加載圖片/視頻或需要用戶手動(dòng)點(diǎn)擊加載
(4)分步加載
對(duì)重點(diǎn)模塊或加載速度較快的內(nèi)容進(jìn)行分步加載，優(yōu)先級(jí)一般為界面布局>文字>圖片>視頻，具體表現(xiàn)形式跟前面提到的占位加載有些類(lèi)似。
2. 后臺(tái)加載
加載過(guò)程中用戶退到后臺(tái)時(shí)，是否繼續(xù)加載？
再次返回客戶端時(shí)是否重新加載？是自動(dòng)重新加載還是手動(dòng)？
3. 不那么起眼的加載
你可能沒(méi)有留意到，有的加載提示并不會(huì)采用明顯的方式，目的是盡量不影響用戶操作和注意力，通常直接在按鈕上改變文字或在文字旁添加一個(gè)小菊花加載圖標(biāo)來(lái)提醒用戶加載的狀態(tài)：
4. 異常提示
根據(jù)著名的「尼爾森十大可用性原則」中的容錯(cuò)原則和人性化幫助原則，在設(shè)計(jì)加載樣式過(guò)程中應(yīng)當(dāng)考慮加載異常的情況，加載時(shí)間過(guò)長(zhǎng)或斷網(wǎng)導(dǎo)致加載失敗都應(yīng)及時(shí)給予用戶反饋，并盡可能提供說(shuō)明引導(dǎo)和解決方案：
淘寶加載失敗的情況還有個(gè)小細(xì)節(jié)，如果點(diǎn)擊重新加載幾次后依然加載失敗，會(huì)增加Toast再次強(qiáng)調(diào)提示，這時(shí)候用戶更容易意識(shí)到：可能是手機(jī)網(wǎng)絡(luò)真的有問(wèn)題，不會(huì)因?yàn)橐槐橛忠槐樗⑿率《械浇乖辍?/p>
5. 加載完畢的交互
數(shù)據(jù)加載成功后是直接顯示，還是漸變或其他過(guò)渡效果？是否伴隨另外的提示信息？這些都是需要考慮的。應(yīng)用場(chǎng)景多為信息流app列表刷新后頂部提示：
6. 多種加載方式結(jié)合
采取某一種加載方式來(lái)設(shè)計(jì)頁(yè)面的局限性較大，而且表現(xiàn)形式單一，因此更多的app采取的是多種加載方式結(jié)合的設(shè)計(jì)，這樣加載更加靈活高效，用戶體驗(yàn)也更完善。多種加載方式的結(jié)合非常多樣化，下面只列舉兩種比較常見(jiàn)的：
（1）列表尾部：自動(dòng)加載和手動(dòng)加載結(jié)合
前面提到過(guò)手動(dòng)加載多見(jiàn)于網(wǎng)頁(yè)端產(chǎn)品，對(duì)于移動(dòng)端H5目前僅發(fā)現(xiàn)36氪采取該加載方式：
這是一種比較折衷的方式：在用戶剛開(kāi)始瀏覽的一段時(shí)間采用自動(dòng)加載，專(zhuān)注于被動(dòng)接受信息的沉浸式體驗(yàn)，當(dāng)用戶連續(xù)瀏覽了一定的頁(yè)數(shù)，說(shuō)明到達(dá)了一定的使用時(shí)長(zhǎng)，可能會(huì)產(chǎn)生注意力不集中和視覺(jué)疲勞的感覺(jué)，這時(shí)候把加載的主動(dòng)權(quán)交回用戶手上，不僅能緩解服務(wù)器加載壓力，也能有效避免用戶由于長(zhǎng)時(shí)間不斷接受信息而出現(xiàn)負(fù)面情緒。
（2）頁(yè)面加載：進(jìn)度條加載和白屏加載結(jié)合
由于白屏加載時(shí)頁(yè)面是沒(méi)有內(nèi)容的，就算配合動(dòng)畫(huà)轉(zhuǎn)移注意力，用戶仍然無(wú)法知悉加載的進(jìn)度，所以把進(jìn)度條加載和白屏加載結(jié)合的情況也十分常見(jiàn)，比如Mori手賬和淘寶，而且可以看到結(jié)合情況下對(duì)進(jìn)度條加載做了弱化處理，放在了導(dǎo)航欄甚至狀態(tài)欄的上方：
總結(jié)
關(guān)于數(shù)據(jù)加載采取哪種加載方式和樣式并沒(méi)有嚴(yán)格的限制，重點(diǎn)在于以用戶為中心，靈活運(yùn)用適合的加載方式，以盡可能快的速度和流暢的效果給用戶呈現(xiàn)出完整的數(shù)據(jù)。
