每日優鮮頁面刷新.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協議。