每日優(yōu)鮮頁面刷新.gif

五、占位加載

使用矩形色塊代替未加載完成的數(shù)據(jù)，一般用于頁面布局固定的H5設(shè)計(jì)，如信息流列表、資訊詳情頁等，加載過程中用戶可以提前看到即將展示的界面框架，有個心理預(yù)期。

經(jīng)典且比較出色的占位加載產(chǎn)品莫過于FaceBook了，按模塊細(xì)分進(jìn)行不同占位加載，而且加載過程中色塊有漸變效果：

Gif效果圖：

FaceBook占位加載.gif

不過對客戶端來說，采用這種加載方式對性能要求較高，可能會出現(xiàn)加載慢或不流暢的情況。

還有一種占位加載是優(yōu)先加載文字和框架，針對加載較慢的圖片、視頻進(jìn)行占位加載，多用默認(rèn)色塊或者缺省圖進(jìn)行占位：

六、模糊加載

適用于圖片較多的界面，加載完畢前先展示模糊處理的圖片，用戶能大致看清圖片輪廓，等待意愿更強(qiáng)，過渡效果也比使用缺省圖或黑色畫布更自然。

七、模態(tài)加載

客戶端對話框設(shè)計(jì)中可分為模態(tài)和非模態(tài)對話框，模態(tài)對話框是指在用戶想要進(jìn)行下一步操作時(shí)，必須先對該對話框進(jìn)行響應(yīng)。顧名思義，模態(tài)加載也會阻斷用戶操作，除了終止或返回上一頁，必須等待當(dāng)前加載完畢才可進(jìn)行下一步動作。

模態(tài)加載主要用來限制一些關(guān)鍵性操作，如創(chuàng)建訂單、支付、提交信息等，多以Toast結(jié)合圖案的形式展示：

補(bǔ)充：關(guān)于加載的一些細(xì)節(jié)設(shè)計(jì)

1. 選擇合適的加載方式

為了更快讓用戶看到信息，通常會對加載頁面的設(shè)計(jì)配合技術(shù)層面的數(shù)據(jù)加載方式來提高加載速度，最常見的為懶加載、預(yù)加載、智能加載和分步加載。

(1) 懶加載

當(dāng)內(nèi)容出現(xiàn)在界面區(qū)域時(shí)再進(jìn)行加載，節(jié)省用戶流量同時(shí)適當(dāng)減輕服務(wù)器壓力，很多信息流產(chǎn)品都采取這種加載方式，一般只針對加載較慢的圖片和視頻進(jìn)行懶加載。

(2) 預(yù)加載

用戶在瀏覽當(dāng)前頁面的時(shí)候，預(yù)先加載下一級頁面的內(nèi)容。應(yīng)用場景多為資訊類，通常在用戶瀏覽列表的時(shí)候就已經(jīng)加載好了資訊詳情的內(nèi)容，這樣即使突然網(wǎng)絡(luò)異常也不影響用戶查看文章。

采取預(yù)加載時(shí)需要結(jié)合實(shí)際場景，預(yù)測用戶行為，如果用戶瀏覽當(dāng)前頁面的時(shí)候就已經(jīng)離開了，會造成流量的浪費(fèi)。而且為了適當(dāng)節(jié)省流量和減輕服務(wù)器壓力，通常只針對用戶當(dāng)前瀏覽的界面進(jìn)行預(yù)加載。

微信公眾號和今日頭條都采用了預(yù)加載方式：

(3) 智能加載

針對不同網(wǎng)絡(luò)情況采取不同的加載方式，比如：

• 觀看視頻時(shí)，3G/4G情況下默認(rèn)選取低分辨率畫面節(jié)省流量，WiFi情況下則選取高清模式。
• 非Wifi情況下瀏覽信息時(shí)，不加載圖片/視頻或需要用戶手動點(diǎn)擊加載。

(4) 分步加載

對重點(diǎn)模塊或加載速度較快的內(nèi)容進(jìn)行分步加載，優(yōu)先級一般為界面布局>文字>圖片>視頻，具體表現(xiàn)形式跟前面提到的占位加載有些類似。

2. 后臺加載

加載過程中用戶退到后臺時(shí)，是否繼續(xù)加載？ 再次返回客戶端時(shí)是否重新加載？是自動重新加載還是手動？

3. 不那么起眼的加載

你可能沒有留意到：有的加載提示并不會采用明顯的方式，目的是盡量不影響用戶操作和注意力，通常直接在按鈕上改變文字或在文字旁添加一個小菊花加載圖標(biāo)來提醒用戶加載的狀態(tài)。

4. 異常提示

根據(jù)著名的「尼爾森十大可用性原則」中的容錯原則和人性化幫助原則，在設(shè)計(jì)加載樣式過程中應(yīng)當(dāng)考慮加載異常的情況，加載時(shí)間過長或斷網(wǎng)導(dǎo)致加載失敗都應(yīng)及時(shí)給予用戶反饋，并盡可能提供說明引導(dǎo)和解決方案。

淘寶加載失敗的情況還有個小細(xì)節(jié)，如果點(diǎn)擊重新加載幾次后依然加載失敗，會增加Toast再次強(qiáng)調(diào)提示，這時(shí)候用戶更容易意識到：可能是手機(jī)網(wǎng)絡(luò)真的有問題，不會因?yàn)橐槐橛忠槐樗⑿率《械浇乖辍?/p>

5. 加載完畢的交互

數(shù)據(jù)加載成功后是直接顯示，還是漸變或其他過渡效果？是否伴隨另外的提示信息？這些都是需要考慮的。

應(yīng)用場景多為信息流app列表刷新后頂部提示：

6. 多種加載方式結(jié)合

采取某一種加載方式來設(shè)計(jì)頁面的局限性較大，而且表現(xiàn)形式單一，因此更多的app采取的是多種加載方式結(jié)合的設(shè)計(jì)，這樣加載更加靈活高效，用戶體驗(yàn)也更完善。

多種加載方式的結(jié)合非常多樣化，下面只列舉兩種比較常見的：

（1）列表尾部：自動加載和手動加載結(jié)合

前面提到過手動加載多見于網(wǎng)頁端產(chǎn)品，對于移動端H5目前僅發(fā)現(xiàn)36氪采取該加載方式。

這是一種比較折衷的方式：在用戶剛開始瀏覽的一段時(shí)間采用自動加載，專注于被動接受信息的沉浸式體驗(yàn)；當(dāng)用戶連續(xù)瀏覽了一定的頁數(shù)，說明到達(dá)了一定的使用時(shí)長，可能會產(chǎn)生注意力不集中和視覺疲勞的感覺，這時(shí)候把加載的主動權(quán)交回用戶手上，不僅能緩解服務(wù)器加載壓力，也能有效避免用戶由于長時(shí)間不斷接受信息而出現(xiàn)負(fù)面情緒。

（2）頁面加載：進(jìn)度條加載和白屏加載結(jié)合

由于白屏加載時(shí)頁面是沒有內(nèi)容的，就算配合動畫轉(zhuǎn)移注意力，用戶仍然無法知悉加載的進(jìn)度，所以把進(jìn)度條加載和白屏加載結(jié)合的情況也十分常見，比如：Mori手賬和淘寶，而且可以看到結(jié)合情況下對進(jìn)度條加載做了弱化處理，放在了導(dǎo)航欄甚至狀態(tài)欄的上方。

總結(jié)

關(guān)于數(shù)據(jù)加載采取哪種加載方式和樣式并沒有嚴(yán)格的限制，重點(diǎn)在于以用戶為中心，靈活運(yùn)用適合的加載方式，以盡可能快的速度和流暢的效果給用戶呈現(xiàn)出完整的數(shù)據(jù)。

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

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