數(shù)據(jù)加載發(fā)生在用戶觸發(fā)特定操作后，客戶端向服務器發(fā)送請求碉渡，服務器處理并返回數(shù)據(jù)給客戶端的過程滞诺。該過程中由于網絡異常习霹、解析出錯或服務器異常等問題常常會導致數(shù)據(jù)加載失敗或延時淋叶。
而用戶是沒有耐心的煞檩，這時候需要產品在前端進行一定的設計來緩解用戶等待焦慮栅贴，并在加載失敗時給出一定的反饋提示檐薯，防止用戶由于漫長等待時間而離開坛缕。
下面將通過淘寶的加載實例來分析一些常見的數(shù)據(jù)加載方式赚楚，體驗設備：iPhone 8 v12.3宠页。
目錄：
- 啟動頁
- 下拉刷新加載
- 分頁加載
- 全屏加載
- 占位加載
- 模糊加載
- 模態(tài)加載
補充：關于加載的一些細節(jié)設計
總結
1. 啟動頁
啟動app時需要進行初始化工作膨俐，基本所有產品都會設置啟動頁來緩沖用戶的等待時間焚刺，提升用戶體驗乳愉。通常有以下幾種：
- 展示產品logo和slogan蔓姚，宣傳定位
- 展示具有品牌形象和產品情懷的封面圖慨丐，建立品牌認知
- 更多的是兩者結合房揭，利用展示logo和slogan的時間加載廣告或活動頁捅暴，同時繼續(xù)初始化app界面
2. 下拉刷新加載
常用于內容可變的界面或列表蓬痒，頂部刷新屬于用戶的主動行為梧奢，比起常見的文字提示亲轨，更多app都是采用比較有趣的設計瓶埋，提高趣味性同時展示產品形象养筒。
淘寶首頁刷新使用動態(tài)懸浮圓圈樣式，每次刷新除了展示商品的變化挤悉，還伴隨廣告展示装悲，同樣在下拉刷新展示廣告的還有愛優(yōu)騰之類的視頻播放軟件：
首頁以外的頁面刷新頻次不高洞渤，采用了簡單的文字刷新提示属瓣，刷新成功會有對應的 Toast 提示抡蛙，給予適當?shù)姆答仯?/p>
像斗魚粗截、虎牙熊昌、B站等偏娛樂的app采取的則是比較有趣的動畫浴捆，讓用戶忍不住盯著看选泻，有效緩解用戶等待過程的無聊感：
Gif效果圖：
3. 分頁加載
當當前頁面的數(shù)據(jù)量太多時需要對數(shù)據(jù)進行分頁厢呵，每次只加載一頁的信息呈現(xiàn)給用戶，分為自動加載碌奉、手動加載赐劣、翻頁加載魁兼。
（1）自動加載
滑動到列表底部時會自動加載下一頁數(shù)據(jù)咐汞，這種加載方式不會中斷用戶操作，應用場景多為沉浸式體驗的信息流列表几晤。
自動加載通常在上一頁瀏覽結束前就開始預加載锌仅，用戶基本察覺不到加載過程热芹，因此不需要做過于復雜的樣式伊脓，大多數(shù) app 都采用加載圓圈和文字提示的方式：
（2）手動加載
需要用戶手動點擊加載才拉取下一頁的數(shù)據(jù)报腔，這種加載方式多應用于移動端H5頁面纯蛾，好處是用戶對頁面有掌控權纵隔，能知道當前瀏覽進度翻诉，不會因為被動接收源源不斷的列表信息產生負面情緒，而且如果頁尾有重要信息提供時不會因為列表自動加載而一直無法被瀏覽到捌刮。
淘寶H5頁面采取了客戶端的形式碰煌，以商品展示為主，并沒有用手動加載绅作。采用手動加載的大部分都是以資訊芦圾、在線閱讀等文字信息為主的產品俄认，如虎嗅个少、簡書、起點中文網：
（3）翻頁加載
翻頁加載可以理解為另一種形式的手動加載眯杏，不同之處在于其通過頁數(shù)告知用戶信息量大小夜焦，且用戶對當前瀏覽位置有清晰的認知，可以自主選擇跳轉瀏覽的頁面役拴。
這種方式在移動端較少見糊探，常見于PC端產品：
無論列表尾部采取何種加載方式，看似對用戶影響不大，相信大部分用戶在瀏覽列表時都是自動加載完就接著看科平，看到提示點擊就點一下褥紫，但當長時間集中注意力于頁面內容卻不知道瀏覽的進度，或者一次次閱讀到文章底部又自動加載出一大段文字時瞪慧，難免會出現(xiàn)焦躁感髓考，這時候就需要產品在細節(jié)處下功夫，給用戶提供用戶本身都沒有意識到的需求弃酌。
4. 全屏加載
當頁面內容過于單一或布局多變時氨菇，可以在數(shù)據(jù)全部加載完畢時再顯示，但這個過程中頁面是空白的妓湘，因此加載過程最好配合趣味性設計查蓉，可以緩解用戶無聊情緒，還可以結合產品形象設計榜贴，提升好感度豌研。全屏加載可細分為進度條加載和白屏加載：
（1）進度條加載
網上大多數(shù)說法是先快后慢的進度條是用戶感知最快的加載方式，我找了很多資料也沒找到有力的論據(jù)驗證這一說法唬党，根據(jù)個人體驗鹃共，普遍做法是“快 - 勻速 - 快”，這個過程在心理感受上也是比較流暢的體驗驶拱，重點在于不要一直卡在一個點不動霜浴，等待久了接收不到任何反饋，用戶就會因為急躁感而離開蓝纲。
淘寶阴孟、Safari和微博在弱網情況下會在一開始就卡住很長一段時間，而對比之下驻龟，微信公眾號先快后勻加速加載的方式體驗起來要更流暢一些温眉。
（2）白屏加載
比進度條加載趣味性更強，一般會配合圖像和動畫進行設計翁狐，缺點是無法知悉具體加載進度。淘寶的加載設計比較中規(guī)中矩：
做得比較好的有虎牙凌蔬、B站露懒、每日優(yōu)鮮，加載動畫有趣生動砂心，且十分貼合產品形象：
Gif效果圖：
5. 占位加載
使用矩形色塊代替未加載完成的數(shù)據(jù)懈词，一般用于頁面布局固定的H5設計，如信息流列表辩诞、資訊詳情頁等坎弯，加載過程中用戶可以提前看到即將展示的界面框架，有個心理預期。
經典且比較出色的占位加載產品莫過于FaceBook了抠忘，按模塊細分進行不同占位加載撩炊，而且加載過程中色塊有漸變效果：
不過對客戶端來說，采用這種加載方式對性能要求較高崎脉，可能會出現(xiàn)加載慢或不流暢的情況拧咳。
還有一種占位加載是優(yōu)先加載文字和框架，針對加載較慢的圖片囚灼、視頻進行占位加載骆膝，多用默認色塊或者缺省圖進行占位：
6. 模糊加載
適用于圖片較多的界面，加載完畢前先展示模糊處理的圖片灶体，用戶能大致看清圖片輪廓阅签，等待意愿更強，過渡效果也比使用缺省圖或黑色畫布更自然：
7. 模態(tài)加載
客戶端對話框設計中可分為模態(tài)和非模態(tài)對話框蝎抽，模態(tài)對話框是指在用戶想要進行下一步操作時政钟，必須先對該對話框進行響應。顧名思義织中，模態(tài)加載也會阻斷用戶操作锥涕，除了終止或返回上一頁，必須等待當前加載完畢才可進行下一步動作狭吼。
模態(tài)加載主要用來限制一些關鍵性操作层坠，如創(chuàng)建訂單、支付刁笙、提交信息等破花，多以Toast結合圖案的形式展示：
補充：關于加載的一些細節(jié)設計
1. 選擇合適的加載方式
為了更快讓用戶看到信息，通常會對加載頁面的設計配合技術層面的數(shù)據(jù)加載方式來提高加載速度疲吸，最常見的為懶加載座每、預加載、智能加載和分步加載摘悴。
(1)懶加載
當內容出現(xiàn)在界面區(qū)域時再進行加載峭梳，節(jié)省用戶流量同時適當減輕服務器壓力，很多信息流產品都采取這種加載方式蹂喻，一般只針對加載較慢的圖片和視頻進行懶加載：
(2)預加載
用戶在瀏覽當前頁面的時候葱椭，預先加載下一級頁面的內容。應用場景多為資訊類口四，通常在用戶瀏覽列表的時候就已經加載好了資訊詳情的內容孵运，這樣即使突然網絡異常也不影響用戶查看文章。
采取預加載時需要結合實際場景蔓彩，預測用戶行為治笨，如果用戶瀏覽當前頁面的時候就已經離開了驳概，會造成流量的浪費。而且為了適當節(jié)省流量和減輕服務器壓力旷赖，通常只針對用戶當前瀏覽的界面進行預加載顺又。
微信公眾號和今日頭條都采用了預加載方式：
(3)智能加載
針對不同網絡情況采取不同的加載方式，比如：
- 觀看視頻時杠愧，3G/4G情況下默認選取低分辨率畫面節(jié)省流量待榔，WiFi情況下則選取高清模式
- 非Wifi情況下瀏覽信息時，不加載圖片/視頻或需要用戶手動點擊加載
(4)分步加載
對重點模塊或加載速度較快的內容進行分步加載流济，優(yōu)先級一般為界面布局>文字>圖片>視頻锐锣，具體表現(xiàn)形式跟前面提到的占位加載有些類似。
2. 后臺加載
加載過程中用戶退到后臺時绳瘟，是否繼續(xù)加載雕憔？
再次返回客戶端時是否重新加載？是自動重新加載還是手動糖声？
3. 不那么起眼的加載
你可能沒有留意到斤彼，有的加載提示并不會采用明顯的方式，目的是盡量不影響用戶操作和注意力蘸泻，通常直接在按鈕上改變文字或在文字旁添加一個小菊花加載圖標來提醒用戶加載的狀態(tài)：
4. 異常提示
根據(jù)著名的「尼爾森十大可用性原則」中的容錯原則和人性化幫助原則琉苇，在設計加載樣式過程中應當考慮加載異常的情況，加載時間過長或斷網導致加載失敗都應及時給予用戶反饋悦施，并盡可能提供說明引導和解決方案：
淘寶加載失敗的情況還有個小細節(jié)并扇，如果點擊重新加載幾次后依然加載失敗，會增加Toast再次強調提示抡诞，這時候用戶更容易意識到：可能是手機網絡真的有問題穷蛹，不會因為一遍又一遍刷新失敗而感到焦躁。
5. 加載完畢的交互
數(shù)據(jù)加載成功后是直接顯示昼汗，還是漸變或其他過渡效果肴熏？是否伴隨另外的提示信息？這些都是需要考慮的顷窒。應用場景多為信息流app列表刷新后頂部提示：
6. 多種加載方式結合
采取某一種加載方式來設計頁面的局限性較大蛙吏，而且表現(xiàn)形式單一，因此更多的app采取的是多種加載方式結合的設計鞋吉，這樣加載更加靈活高效出刷，用戶體驗也更完善。多種加載方式的結合非常多樣化坯辩，下面只列舉兩種比較常見的：
（1）列表尾部：自動加載和手動加載結合
前面提到過手動加載多見于網頁端產品，對于移動端H5目前僅發(fā)現(xiàn)36氪采取該加載方式：
這是一種比較折衷的方式：在用戶剛開始瀏覽的一段時間采用自動加載崩侠，專注于被動接受信息的沉浸式體驗漆魔，當用戶連續(xù)瀏覽了一定的頁數(shù)，說明到達了一定的使用時長，可能會產生注意力不集中和視覺疲勞的感覺改抡，這時候把加載的主動權交回用戶手上矢炼，不僅能緩解服務器加載壓力，也能有效避免用戶由于長時間不斷接受信息而出現(xiàn)負面情緒阿纤。
（2）頁面加載：進度條加載和白屏加載結合
由于白屏加載時頁面是沒有內容的句灌，就算配合動畫轉移注意力，用戶仍然無法知悉加載的進度欠拾，所以把進度條加載和白屏加載結合的情況也十分常見胰锌，比如Mori手賬和淘寶，而且可以看到結合情況下對進度條加載做了弱化處理藐窄，放在了導航欄甚至狀態(tài)欄的上方：
總結
關于數(shù)據(jù)加載采取哪種加載方式和樣式并沒有嚴格的限制资昧，重點在于以用戶為中心，靈活運用適合的加載方式荆忍，以盡可能快的速度和流暢的效果給用戶呈現(xiàn)出完整的數(shù)據(jù)格带。
