深入了解加載的樣式和方式后，可以讓我們在設(shè)計和交互中改善那些使用不合理的加載，從而提升產(chǎn)品的舒適度，也可以利用加載來做更多的設(shè)計，讓加載變得更有趣味性，減少用戶因等待產(chǎn)生的焦慮感。

目錄

• 第一部分：什么是加載
• 第二部分：模態(tài)加載與非模態(tài)加載
• 第三部分：加載的設(shè)計樣式
• 第四部分：加載方式

一、什么是加載

用戶在客戶端的界面上進行操作，客戶端發(fā)送請求到服務(wù)器，服務(wù)器處理請求，返回數(shù)據(jù)并顯示給用戶，這一過程成為加載。

簡單的說就是用戶與產(chǎn)品的每次互動時的等待時間。

還要說明一點加載和緩存是有區(qū)別的，緩存是主動的，加載為被動的。

二、模態(tài)加載與非模態(tài)加載

1. 模態(tài)加載

模態(tài)加載會阻斷用戶的其他操作，在加載時，用戶只能等待加載完成才能繼續(xù)操作，或者返回或者關(guān)閉正在加載的界面。通常用在關(guān)鍵的場景下使用，避免用戶反復(fù)操作。例如：付款，注冊，提交信息等，多以Toast彈窗的形式出現(xiàn)。

但對于用戶而已體驗不是就不是那么友好了——等同于和喜歡拍照的朋友去吃飯，要等菜上齊了，拍張照才能吃一樣的心情。

2. 非模態(tài)加載

非模態(tài)加載就比較友好了，及時正在加載，也不會影響用戶對產(chǎn)品的使用，用戶也可以一邊看內(nèi)容，一邊等待加載的完成。非模態(tài)加載通常用于下拉刷新、上拉加載、圖片文字加載等。

加載提醒可以放在狀態(tài)欄、導(dǎo)航欄、操作欄等，位置很靈活。

三、加載的設(shè)計樣式

1. 狀態(tài)欄加載

通常是系統(tǒng)默認的配置加載樣式。

使用場景：網(wǎng)路信號不好使，手機頂部便會出現(xiàn)加載樣式。

2. 導(dǎo)航欄加載

將導(dǎo)航欄標(biāo)題臨時變成加載信息的文字提醒，當(dāng)收取或信息時標(biāo)題欄展示正在加載，加載成功則標(biāo)題欄loading消失，若因為網(wǎng)絡(luò)錯誤未連接服務(wù)器，則在標(biāo)題欄顯示未連接狀態(tài)。

使用場景：多用于社交類產(chǎn)品，信息的收取，不需要獲取用戶的視覺焦點。

3. 下拉刷新加載

下拉刷新已經(jīng)在App中被普遍應(yīng)用，保證了用戶即可以看到本地的內(nèi)容，也可以選擇主動下拉對當(dāng)前內(nèi)容進行更新，加載的樣式也可以做出進一步的設(shè)計，例如美團的效果，運用了產(chǎn)品形象作為刷新的樣式，即增加了品牌形象的宣傳，使得家在過程更具情感化，人性化，品牌化，還有新版的美團外賣加入了紅綠燈的小動效，時刻提醒人們紅燈停，綠燈行。

使用場景：界面信息可以刷新加載時使用，多用于含有列表界面當(dāng)中。

4. 上拉加載

最常用的加載，當(dāng)用戶想查看新的數(shù)據(jù)時，通過上拉界面后，自動加載出的數(shù)據(jù)的過程為上拉加載。

上拉加載的設(shè)計樣式越簡單越好，因為用戶在看當(dāng)前界面內(nèi)容時，下面未顯示的部分內(nèi)容已加載完畢，會很快消失，所以不必設(shè)計過于復(fù)雜的樣式。

使用場景：適用于瀑布流、列表等情況。

5. 進度條加載

如果加載時間的過程過較長，就需要用進度條加載樣式來告知用戶需要等待的時間進度，讓用戶有一定的心理預(yù)期。

使用場景：多見于瀏覽器，包括PC端和移動端瀏覽器，App中的頁面如果用H5形式做的，多數(shù)也會采用進度條進行加載。

6. Toast加載

當(dāng)用戶執(zhí)行某個操作時，為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗，則用Toast的樣式來提示正在加載，同時在這段期間內(nèi)用戶的操作將受到限制。

這種情況用戶一般只能執(zhí)行返回到上一級的操作，其他都被禁用。

使用場景：用于關(guān)鍵性場景中，防止用戶進行多余的操作。例如，登錄注冊、提交信息、支付等。

7. 白屏加載

當(dāng)前頁面內(nèi)容比較單一，需要一次加載完成才能顯示，則采用白屏加載模式。

這種加載方式在完全加載完成之前是看不到任何內(nèi)容的，所以一旦超過時間太久一定要提示用戶什么原因加載失?。梢耘浜蟭osat彈窗提示），而不是一直的加載。也可以像美團外賣一樣做的更有趣味性，減輕用戶的等待焦慮。

使用場景：通過點擊頁面跳轉(zhuǎn)時，用白屏加載。

8. 預(yù)設(shè)圖片加載

加載時，為了不讓加載出的布局顯得太空，會用LOGO或者預(yù)設(shè)圖片來填充，加深用戶對品牌的認知。

可能有的同學(xué)會有疑問，為什么同樣是圖片加載不直接用展示圖，而先用預(yù)設(shè)定的圖片呢？

那是因為預(yù)設(shè)圖通常是由前段代碼寫的，調(diào)用起來會比較快，而產(chǎn)品圖是需要從后臺數(shù)據(jù)庫調(diào)用的比較慢，再有就是為了提升品牌的認知度。

使用場景：當(dāng)頁面的布局固定時，采用這種刷新樣式，即先加載布局的數(shù)據(jù)，多用于圖片布局多的界面。

9. 色塊加載

首先我們要知道同樣大小的色塊加載要比圖片快很多，因為純色色塊是可以直接用代碼寫出來的，調(diào)取一段代碼的的速度一定要比調(diào)取一張圖片的速度快很多，所以在圖片刷新的過程中，將未加載出來的內(nèi)容區(qū)域用灰色的色塊填充，在加載過程中有很好的連貫性。

當(dāng)然運用這種形式的加載是有條件的，需要內(nèi)容框架是固定的。

使用場景：在內(nèi)容框架是固定的前提下使用。

10. 模糊加載

通過把預(yù)加載出來的圖片進行高斯模糊處理，通常人們對這類似有似無的圖片都會給予極大的耐心去等待的，這種方案成功的勾起了用戶的好奇心，減緩用戶的等待焦慮。

使用場景：通常用在多圖的界面中。

四、加載方式

1. 預(yù)加載

預(yù)加載就是當(dāng)用戶在瀏覽A頁面時，加載并未停止，而是在悄悄的為用戶加載b頁面中的內(nèi)容，當(dāng)用戶繼續(xù)看B頁面時就體會不到加載的過程，用戶不存在等待的焦慮等問題。

當(dāng)然凡事有利必有弊，如果服務(wù)器為用戶提前準(zhǔn)備了將要看的內(nèi)容，用戶卻看了其他界面或者退出了，那這次的加載既增加了服務(wù)器的壓力，又浪費了用戶的流量。

2. 懶加載

懶加載和預(yù)加載剛好相反，只加載用戶可以看到的內(nèi)容，其他內(nèi)容需要用戶主動進行操作后，向服務(wù)器提供需求后，才會自動加載。

懶加載通常用在上劃更新和下拉刷新上。

懶加載的速度要看界面中內(nèi)容的多少以及圖片的大小，所以我們在提供圖片時都會進行一定的壓縮，來加快加載的速度。

3. 智能加載

根據(jù)不同的網(wǎng)絡(luò)狀況選擇不同的數(shù)據(jù)加載，通常用在3G/4G/Wi-Fi的網(wǎng)絡(luò)切換上，為了既讓用戶使用流暢，也不浪費沒必要的流量，所以當(dāng)使用網(wǎng)絡(luò)發(fā)生變化時，Wi-Fi條件下，會優(yōu)先選擇高清視頻或者高質(zhì)量的音樂進行播放。

當(dāng)4G條件下，有些下載和更新的內(nèi)容會被終止；而在網(wǎng)絡(luò)不通的時候，視頻質(zhì)量會被降到最低，其實最終的目的就是為了保證用戶使用時的流暢度。

4. 分步加載

當(dāng)界面中圖文同時存在時，會選擇優(yōu)先加載文字，圖片則用其他的方式占位，最終等待圖片加載完成。

分步加載的好處是在等待加載的時間里用戶可以看到相關(guān)的文字內(nèi)容，不會像空白頁加載，或者Toast加載，只能默默地等待加載的過程，所謂的大眼瞪小眼也就是如此吧。

總結(jié)

深入了解加載的樣式和方式后，可以讓我們在設(shè)計和交互中改善那些使用不合理的加載，從而提升產(chǎn)品的舒適度，也可以利用加載來做更多的設(shè)計，讓加載變得更有趣味性，減少用戶因等待產(chǎn)生的焦慮感。

作者：小溜Epik，公眾號：海鹽社

本文由 @小溜Epik 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議