起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識淘寶實例分析：常見的七種app加載樣式設計
本文筆者將以淘寶數據加載為例，來分析常見的七種app加載方式。
數據加載發生在用戶觸發特定操作后，客戶端向服務器發送請求，服務器處理并返回數據給客戶端的過程。
該過程中由于網絡異常、解析出錯或服務器異常等問題常常會導致數據加載失敗或延時。而用戶是沒有耐心的，這時候需要產品在前端進行一定的設計來緩解用戶等待焦慮，并在加載失敗時給出一定的反饋提示，防止用戶由于漫長等待時間而離開。
下面將通過淘寶的加載實例，來分析一些常見的數據加載方式，體驗設備：iPhone 8 v12.3。
目錄
- 啟動頁
- 下拉刷新加載
- 分頁加載
- 全屏加載
- 占位加載
- 模糊加載
- 模態加載
補充：關于加載的一些細節設計、總結
一、啟動頁
啟動app時需要進行初始化工作，基本所有產品都會設置啟動頁來緩沖用戶的等待時間，提升用戶體驗。
通常有以下幾種：
- 展示產品logo和slogan，宣傳定位。
- 展示具有品牌形象和產品情懷的封面圖，建立品牌認知。
- 更多的是兩者結合，利用展示logo和slogan的時間加載廣告或活動頁，同時繼續初始化app界面。
二、下拉刷新加載
常用于內容可變的界面或列表，頂部刷新屬于用戶的主動行為，比起常見的文字提示，更多app都是采用比較有趣的設計，提高趣味性同時展示產品形象。
淘寶首頁刷新使用動態懸浮圓圈樣式，每次刷新除了展示商品的變化，還伴隨廣告展示。
同樣在下拉刷新展示廣告的，還有愛優騰之類的視頻播放軟件：
首頁以外的頁面刷新頻次不高，采用了簡單的文字刷新提示，刷新成功會有對應的 Toast 提示，給予適當的反饋：
像斗魚、虎牙、B站等偏娛樂的app采取的則是比較有趣的動畫，讓用戶忍不住盯著看，有效緩解用戶等待過程的無聊感：
Gif效果圖：
斗魚下拉刷新.gif
虎牙下拉刷新.gif
bilibili下拉刷新.gif
三、分頁加載
當當前頁面的數據量太多時需要對數據進行分頁，每次只加載一頁的信息呈現給用戶，分為：自動加載、手動加載、翻頁加載。
1. 自動加載
滑動到列表底部時會自動加載下一頁數據，這種加載方式不會中斷用戶操作，應用場景多為沉浸式體驗的信息流列表。
自動加載通常在上一頁瀏覽結束前就開始預加載，用戶基本察覺不到加載過程。因此不需要做過于復雜的樣式，大多數 app 都采用加載圓圈和文字提示的方式。
2. 手動加載
需要用戶手動點擊加載才拉取下一頁的數據，這種加載方式多應用于移動端H5頁面。
好處是用戶對頁面有掌控權，能知道當前瀏覽進度，不會因為被動接收源源不斷的列表信息產生負面情緒，而且如果頁尾有重要信息提供時不會因為列表自動加載而一直無法被瀏覽到。
淘寶H5頁面采取了客戶端的形式，以商品展示為主，并沒有用手動加載。采用手動加載的大部分都是以資訊、在線閱讀等文字信息為主的產品，如虎嗅、簡書、起點中文網。
3. 翻頁加載
翻頁加載可以理解為另一種形式的手動加載，不同之處在于其通過頁數告知用戶信息量大小，且用戶對當前瀏覽位置有清晰的認知，可以自主選擇跳轉瀏覽的頁面。
這種方式在移動端較少見，常見于PC端產品：
無論列表尾部采取何種加載方式，看似對用戶影響不大，相信大部分用戶在瀏覽列表時都是自動加載完就接著看，看到提示點擊就點一下，但當長時間集中注意力于頁面內容卻不知道瀏覽的進度，或者一次次閱讀到文章底部又自動加載出一大段文字時，難免會出現焦躁感。
這時候就需要產品在細節處下功夫，給用戶提供用戶本身都沒有意識到的需求。
四、全屏加載
當頁面內容過于單一或布局多變時，可以在數據全部加載完畢時再顯示，但這個過程中頁面是空白的。因此，加載過程最好配合趣味性設計，可以緩解用戶無聊情緒，還可以結合產品形象設計，提升好感度。
全屏加載可細分為：進度條加載和白屏加載。
1. 進度條加載
網上大多數說法是先快后慢的進度條是用戶感知最快的加載方式，我找了很多資料也沒找到有力的論據驗證這一說法。
根據個人體驗，普遍做法是“快 – 勻速 – 快”，這個過程在心理感受上也是比較流暢的體驗，重點在于不要一直卡在一個點不動，等待久了接收不到任何反饋，用戶就會因為急躁感而離開。
淘寶、Safari和微博在弱網情況下會在一開始就卡住很長一段時間，而對比之下，微信公眾號先快后勻加速加載的方式體驗起來要更流暢一些。
2. 白屏加載
比進度條加載趣味性更強，一般會配合圖像和動畫進行設計，缺點是無法知悉具體加載進度。
淘寶的加載設計比較中規中矩：
做得比較好的有虎牙、B站、每日優鮮，加載動畫有趣生動，且十分貼合產品形象：
Gif效果圖：
虎牙頁面刷新.gif
bilibili頁面刷新.gif
每日優鮮頁面刷新.gif
五、占位加載
使用矩形色塊代替未加載完成的數據，一般用于頁面布局固定的H5設計，如信息流列表、資訊詳情頁等，加載過程中用戶可以提前看到即將展示的界面框架，有個心理預期。
經典且比較出色的占位加載產品莫過于FaceBook了，按模塊細分進行不同占位加載，而且加載過程中色塊有漸變效果：
Gif效果圖：
FaceBook占位加載.gif
不過對客戶端來說，采用這種加載方式對性能要求較高，可能會出現加載慢或不流暢的情況。
還有一種占位加載是優先加載文字和框架，針對加載較慢的圖片、視頻進行占位加載，多用默認色塊或者缺省圖進行占位：
六、模糊加載
適用于圖片較多的界面，加載完畢前先展示模糊處理的圖片，用戶能大致看清圖片輪廓，等待意愿更強，過渡效果也比使用缺省圖或黑色畫布更自然。
七、模態加載
客戶端對話框設計中可分為模態和非模態對話框，模態對話框是指在用戶想要進行下一步操作時，必須先對該對話框進行響應。顧名思義，模態加載也會阻斷用戶操作，除了終止或返回上一頁，必須等待當前加載完畢才可進行下一步動作。
模態加載主要用來限制一些關鍵性操作，如創建訂單、支付、提交信息等，多以Toast結合圖案的形式展示：
補充：關于加載的一些細節設計
1. 選擇合適的加載方式
為了更快讓用戶看到信息，通常會對加載頁面的設計配合技術層面的數據加載方式來提高加載速度，最常見的為懶加載、預加載、智能加載和分步加載。
(1) 懶加載
當內容出現在界面區域時再進行加載，節省用戶流量同時適當減輕服務器壓力，很多信息流產品都采取這種加載方式，一般只針對加載較慢的圖片和視頻進行懶加載。
(2) 預加載
用戶在瀏覽當前頁面的時候，預先加載下一級頁面的內容。應用場景多為資訊類，通常在用戶瀏覽列表的時候就已經加載好了資訊詳情的內容，這樣即使突然網絡異常也不影響用戶查看文章。
采取預加載時需要結合實際場景，預測用戶行為，如果用戶瀏覽當前頁面的時候就已經離開了，會造成流量的浪費。而且為了適當節省流量和減輕服務器壓力，通常只針對用戶當前瀏覽的界面進行預加載。
微信公眾號和今日頭條都采用了預加載方式：
(3) 智能加載
針對不同網絡情況采取不同的加載方式，比如：
- 觀看視頻時，3G/4G情況下默認選取低分辨率畫面節省流量，WiFi情況下則選取高清模式。
- 非Wifi情況下瀏覽信息時，不加載圖片/視頻或需要用戶手動點擊加載。
(4) 分步加載
對重點模塊或加載速度較快的內容進行分步加載，優先級一般為界面布局>文字>圖片>視頻，具體表現形式跟前面提到的占位加載有些類似。
2. 后臺加載
加載過程中用戶退到后臺時，是否繼續加載？ 再次返回客戶端時是否重新加載？是自動重新加載還是手動？
3. 不那么起眼的加載
你可能沒有留意到：有的加載提示并不會采用明顯的方式，目的是盡量不影響用戶操作和注意力，通常直接在按鈕上改變文字或在文字旁添加一個小菊花加載圖標來提醒用戶加載的狀態。
4. 異常提示
根據著名的「尼爾森十大可用性原則」中的容錯原則和人性化幫助原則，在設計加載樣式過程中應當考慮加載異常的情況，加載時間過長或斷網導致加載失敗都應及時給予用戶反饋，并盡可能提供說明引導和解決方案。
淘寶加載失敗的情況還有個小細節，如果點擊重新加載幾次后依然加載失敗，會增加Toast再次強調提示，這時候用戶更容易意識到：可能是手機網絡真的有問題，不會因為一遍又一遍刷新失敗而感到焦躁。
5. 加載完畢的交互
數據加載成功后是直接顯示，還是漸變或其他過渡效果？是否伴隨另外的提示信息？這些都是需要考慮的。
應用場景多為信息流app列表刷新后頂部提示：
6. 多種加載方式結合
采取某一種加載方式來設計頁面的局限性較大，而且表現形式單一，因此更多的app采取的是多種加載方式結合的設計，這樣加載更加靈活高效，用戶體驗也更完善。
多種加載方式的結合非常多樣化，下面只列舉兩種比較常見的：
（1）列表尾部：自動加載和手動加載結合
前面提到過手動加載多見于網頁端產品，對于移動端H5目前僅發現36氪采取該加載方式。
這是一種比較折衷的方式：在用戶剛開始瀏覽的一段時間采用自動加載，專注于被動接受信息的沉浸式體驗；當用戶連續瀏覽了一定的頁數，說明到達了一定的使用時長，可能會產生注意力不集中和視覺疲勞的感覺，這時候把加載的主動權交回用戶手上，不僅能緩解服務器加載壓力，也能有效避免用戶由于長時間不斷接受信息而出現負面情緒。
（2）頁面加載：進度條加載和白屏加載結合
由于白屏加載時頁面是沒有內容的，就算配合動畫轉移注意力，用戶仍然無法知悉加載的進度，所以把進度條加載和白屏加載結合的情況也十分常見，比如：Mori手賬和淘寶，而且可以看到結合情況下對進度條加載做了弱化處理，放在了導航欄甚至狀態欄的上方。
總結
關于數據加載采取哪種加載方式和樣式并沒有嚴格的限制，重點在于以用戶為中心，靈活運用適合的加載方式，以盡可能快的速度和流暢的效果給用戶呈現出完整的數據。
本文由@給予 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash, 基于CC0協議。
很優秀的文章…
還在學習進步當中 一起加油 ??
謝謝分享那么多的專業知識，發現自己還是一無所知的小白
最近負責的版本涉及加載，所以花了一些時間去學習、思考和總結，最終產出這篇文章，而在這之前我對加載設計也是只有模糊的概念。因此只要不斷學習、思考，總會有進步，有收獲，從小白進階的。
學習了，不斷學習&不斷思考，產品經理要一直一直堅持做的事情。
自我提升就是一個不斷“認知-學習-實踐-反饋-內化”的循環過程
沒想到小小的加載項有這么多學問，謝謝作者費心整理??????
只是簡單梳理了一下 還需要進行更深入的思考，共勉 ??
很是優秀
??
優秀