起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計規范 | 詳解組件控件結構體系：加載類
本文作者將加載劃分為6種類型，分別適用于不同的場景，各有優缺點。設計師在設計時，可以根據用戶的使用場景和環境設計適合的加載。
設計師在進行APP設計時，往往會更加專注于界面的布局、界面和界面之間怎么跳轉、操作反饋，卻往往忽略掉一個比較重要的環節，就是APP數據加載中的設計。那么我們怎么處理好界面交互中的加載設計，保證體驗無縫銜接，保證用戶沒有漫長的等待感呢？
依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細節。）
什么是加載？
用戶在客戶端的界面上進行操作，客戶端發送請求到服務器，服務器處理請求，返回數據給客戶端，并顯示給用戶。這一過程成為加載。區別于緩存，緩存是主動的，加載為被動的。
全屏加載
這種加載比較簡單，一般運用在頁面內容比較單一的情況下，所以直接一次性加載完所有數據后再顯示內容。
1、優點
能保證內容的整體性，全部加載完才能夠系統化的閱讀。
2、缺點
比較明顯，就是有非常強烈的等待感，3s以上會產生焦躁情緒。所以，在地鐵等信號不好的地方，使用手機網頁獲取內容實在是比較災難的一件事情。
3、使用場景
常見的是從上一級界面進入下一級界面；或者H5中常使用。
一般這種情況會配合有明確進度標識的加載loading。
分步加載
當有文字和圖片時，圖片會比文字加載的慢，這個時候往往文字先加載出來，圖片在加載過程中使用占位符，直到圖片加載成功。當加載的頁面內容有固定的框架時，可以先加載框架，再加載框架內的內容。通過先加載頁面框架，設計占位符等形式可以提前讓用戶知道整個界面的架構，提高產品的體驗感。
1、優點
可以幫助用戶快速了解整個界面的信息布局。
2、缺點
開始瞬間會丟失掉重要的關鍵信息，用戶初次感知會認為產品出問題了
3、使用場景
適用于多圖片布局的界面。比較消耗流量的界面
下拉加載
用戶下拉時，出現loading動畫，對整個頁面的重新加載刷新?，F在很多的產品重新設計loading加載動畫，使得加載過程更加具有情感化，人性化和品牌化。
1、優點
方便用戶刷新當前界面，獲取新數據。
2、缺點
非首屏時，無法進行該手勢操作。
3、使用場景
界面信息可以刷新加載時使用。
上拉加載
用戶在瀏覽界面的過程中，對于未加載的信息，上拉過程中自動加載。
1、優點
把用戶代入無盡瀏覽模式，讓用戶一直向下滾動，不需要手動點擊下一頁。
2、缺點
沒有盡頭，容易迷失，不方便快速索引定位到某個內容。
3、使用場景
適用于瀑布流、長列表、商品列表等情況。
預加載
當用戶在停留一個界面時候，將對應當前界面通向下一界面的所有信息都加載出來。使用這個加載方式會使得使用過程中很快減少時間等待。
1、優點
用戶進入下一級頁面無需加載過程，使用給用戶流暢之感。
2、缺點
在非WiFi情況下，浪費用戶流量。
3、使用場景
信息需要即時刷新，同時預加載后消耗流量較少的場景，例如IM或郵件。這種加載機制的好處就是進入下一頁無需加載，使用流程。
智能加載
根據用戶的網絡情況，加載不同質量的圖片內容。例如在WiFi情況下，加載出來的圖片是高清，在非WiFi情況下加載出來的圖片是標清的。
1、優點
是根據具體場景來控制流量和加載速度。
2、缺點
不一定是真實有效的命中用戶需求。
3、使用場景
適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP。
上述一共將加載劃分為6種類型。6種類型適用于不同的場景，各有優缺點。設計師在設計時，可以根據用戶的使用場景和環境設計適合的加載。
相關閱讀
#專欄作家#
UX，微信公眾號：UEDC，人人都是產品經理專欄作家。華為ITUX交互組組長。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
是不是還缺一個 Skeleton Screen 加載
博主 我想woshipm這里加你關注或訂閱你的ID 為何操作不了??？
題主，在下拉加載那里，你是不是漏掉了第三點或者是序號錯誤呢
哈哈、這個鍋我不背，小編加了數字，加錯數字了。4應該是3
f