起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何在不同場景下正確選擇加載樣式?
深入了解加載的樣式和方式后，可以讓我們在設計和交互中改善那些使用不合理的加載，從而提升產品的舒適度，也可以利用加載來做更多的設計，讓加載變得更有趣味性，減少用戶因等待產生的焦慮感。
目錄
- 第一部分：什么是加載
- 第二部分：模態加載與非模態加載
- 第三部分：加載的設計樣式
- 第四部分：加載方式
一、什么是加載
用戶在客戶端的界面上進行操作，客戶端發送請求到服務器，服務器處理請求，返回數據并顯示給用戶，這一過程成為加載。
簡單的說就是用戶與產品的每次互動時的等待時間。
還要說明一點加載和緩存是有區別的，緩存是主動的，加載為被動的。
二、模態加載與非模態加載
1. 模態加載
模態加載會阻斷用戶的其他操作，在加載時，用戶只能等待加載完成才能繼續操作，或者返回或者關閉正在加載的界面。通常用在關鍵的場景下使用，避免用戶反復操作。例如：付款，注冊，提交信息等，多以Toast彈窗的形式出現。
但對于用戶而已體驗不是就不是那么友好了——等同于和喜歡拍照的朋友去吃飯，要等菜上齊了，拍張照才能吃一樣的心情。
2. 非模態加載
非模態加載就比較友好了，及時正在加載，也不會影響用戶對產品的使用，用戶也可以一邊看內容，一邊等待加載的完成。非模態加載通常用于下拉刷新、上拉加載、圖片文字加載等。
加載提醒可以放在狀態欄、導航欄、操作欄等，位置很靈活。
三、加載的設計樣式
1. 狀態欄加載
通常是系統默認的配置加載樣式。
使用場景：網路信號不好使，手機頂部便會出現加載樣式。
2. 導航欄加載
將導航欄標題臨時變成加載信息的文字提醒，當收取或信息時標題欄展示正在加載，加載成功則標題欄loading消失，若因為網絡錯誤未連接服務器，則在標題欄顯示未連接狀態。
使用場景：多用于社交類產品，信息的收取，不需要獲取用戶的視覺焦點。
3. 下拉刷新加載
下拉刷新已經在App中被普遍應用，保證了用戶即可以看到本地的內容，也可以選擇主動下拉對當前內容進行更新，加載的樣式也可以做出進一步的設計，例如美團的效果，運用了產品形象作為刷新的樣式，即增加了品牌形象的宣傳，使得家在過程更具情感化，人性化，品牌化，還有新版的美團外賣加入了紅綠燈的小動效，時刻提醒人們紅燈停，綠燈行。
使用場景：界面信息可以刷新加載時使用，多用于含有列表界面當中。
4. 上拉加載
最常用的加載，當用戶想查看新的數據時，通過上拉界面后，自動加載出的數據的過程為上拉加載。
上拉加載的設計樣式越簡單越好，因為用戶在看當前界面內容時，下面未顯示的部分內容已加載完畢，會很快消失，所以不必設計過于復雜的樣式。
使用場景：適用于瀑布流、列表等情況。
5. 進度條加載
如果加載時間的過程過較長，就需要用進度條加載樣式來告知用戶需要等待的時間進度，讓用戶有一定的心理預期。
使用場景：多見于瀏覽器，包括PC端和移動端瀏覽器，App中的頁面如果用H5形式做的，多數也會采用進度條進行加載。
6. Toast加載
當用戶執行某個操作時，為了防止用戶繼續操作導致數據加載失敗，則用Toast的樣式來提示正在加載，同時在這段期間內用戶的操作將受到限制。
這種情況用戶一般只能執行返回到上一級的操作，其他都被禁用。
使用場景：用于關鍵性場景中，防止用戶進行多余的操作。例如，登錄注冊、提交信息、支付等。
7. 白屏加載
當前頁面內容比較單一，需要一次加載完成才能顯示，則采用白屏加載模式。
這種加載方式在完全加載完成之前是看不到任何內容的，所以一旦超過時間太久一定要提示用戶什么原因加載失?。梢耘浜蟭osat彈窗提示），而不是一直的加載。也可以像美團外賣一樣做的更有趣味性，減輕用戶的等待焦慮。
使用場景：通過點擊頁面跳轉時，用白屏加載。
8. 預設圖片加載
加載時，為了不讓加載出的布局顯得太空，會用LOGO或者預設圖片來填充，加深用戶對品牌的認知。
可能有的同學會有疑問，為什么同樣是圖片加載不直接用展示圖，而先用預設定的圖片呢？
那是因為預設圖通常是由前段代碼寫的，調用起來會比較快，而產品圖是需要從后臺數據庫調用的比較慢，再有就是為了提升品牌的認知度。
使用場景：當頁面的布局固定時，采用這種刷新樣式，即先加載布局的數據，多用于圖片布局多的界面。
9. 色塊加載
首先我們要知道同樣大小的色塊加載要比圖片快很多，因為純色色塊是可以直接用代碼寫出來的，調取一段代碼的的速度一定要比調取一張圖片的速度快很多，所以在圖片刷新的過程中，將未加載出來的內容區域用灰色的色塊填充，在加載過程中有很好的連貫性。
當然運用這種形式的加載是有條件的，需要內容框架是固定的。
使用場景：在內容框架是固定的前提下使用。
10. 模糊加載
通過把預加載出來的圖片進行高斯模糊處理，通常人們對這類似有似無的圖片都會給予極大的耐心去等待的，這種方案成功的勾起了用戶的好奇心，減緩用戶的等待焦慮。
使用場景：通常用在多圖的界面中。
四、加載方式
1. 預加載
預加載就是當用戶在瀏覽A頁面時，加載并未停止，而是在悄悄的為用戶加載b頁面中的內容，當用戶繼續看B頁面時就體會不到加載的過程，用戶不存在等待的焦慮等問題。
當然凡事有利必有弊，如果服務器為用戶提前準備了將要看的內容，用戶卻看了其他界面或者退出了，那這次的加載既增加了服務器的壓力，又浪費了用戶的流量。
2. 懶加載
懶加載和預加載剛好相反，只加載用戶可以看到的內容，其他內容需要用戶主動進行操作后，向服務器提供需求后，才會自動加載。
懶加載通常用在上劃更新和下拉刷新上。
懶加載的速度要看界面中內容的多少以及圖片的大小，所以我們在提供圖片時都會進行一定的壓縮，來加快加載的速度。
3. 智能加載
根據不同的網絡狀況選擇不同的數據加載，通常用在3G/4G/Wi-Fi的網絡切換上，為了既讓用戶使用流暢，也不浪費沒必要的流量，所以當使用網絡發生變化時，Wi-Fi條件下，會優先選擇高清視頻或者高質量的音樂進行播放。
當4G條件下，有些下載和更新的內容會被終止；而在網絡不通的時候，視頻質量會被降到最低，其實最終的目的就是為了保證用戶使用時的流暢度。
4. 分步加載
當界面中圖文同時存在時，會選擇優先加載文字，圖片則用其他的方式占位，最終等待圖片加載完成。
分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容，不會像空白頁加載，或者Toast加載，只能默默地等待加載的過程，所謂的大眼瞪小眼也就是如此吧。
總結
深入了解加載的樣式和方式后，可以讓我們在設計和交互中改善那些使用不合理的加載，從而提升產品的舒適度，也可以利用加載來做更多的設計，讓加載變得更有趣味性，減少用戶因等待產生的焦慮感。
作者：小溜Epik，公眾號：海鹽社
本文由 @小溜Epik 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
整體非常清晰，感謝！加載樣式的8、9、10是否可以統一稱為“優先加載”類別，另外有個疑問，全屏加載和進度條加載都屬于加載完畢再統一顯示界面內容，在我看來除了后者常用于網頁加載和提供進度以外，兩者是大同小異的？
我覺得很好