加載的作用在于緩解用戶的等待焦慮，同時(shí)及時(shí)的向用戶反饋當(dāng)前的系統(tǒng)狀態(tài)，以提升產(chǎn)品的用戶體驗(yàn)。

什么是加載？為什么需要加載？

加載如同反饋，在人機(jī)交互中，用戶與界面的每一次互動(dòng)都是一次加載過(guò)程。因操作導(dǎo)致的頁(yè)面跳轉(zhuǎn)、刷新或彈窗等從而使頁(yè)面元素或信息發(fā)生變化行為，頁(yè)面都需要向服務(wù)器發(fā)送請(qǐng)求信息，服務(wù)器接收到后在發(fā)送反饋信息，而由于網(wǎng)絡(luò)及頁(yè)面自身處理信息的原因?qū)е逻@個(gè)信息對(duì)換的過(guò)程可能發(fā)生延長(zhǎng)從而需要一個(gè)“反饋”即加載來(lái)緩和用戶的等待。加載有快有慢，快得可以讓你根本沒意識(shí)到這種“反饋”，同時(shí)慢得也會(huì)讓你感到崩潰。

因此我們需要一種設(shè)計(jì)來(lái)緩解用戶等待時(shí)間內(nèi)的焦慮感，同時(shí)即時(shí)反饋?lái)?yè)面狀態(tài)——那就是加載。

8種常見的加載策略，及其設(shè)計(jì)意義

啟動(dòng)頁(yè)加載

說(shuō)到啟動(dòng)頁(yè)，大家肯定首先想到的是廣告位、節(jié)日營(yíng)銷或加強(qiáng)品牌意識(shí)。可以點(diǎn)擊，并且一般都可以選擇跳過(guò)。實(shí)現(xiàn)方式可以為靜態(tài)頁(yè)，也可以是動(dòng)態(tài)圖。

其實(shí)不然，啟動(dòng)app需要一個(gè)短暫的過(guò)程，啟動(dòng)頁(yè)的作用是自然地過(guò)渡這個(gè)過(guò)程。除了上述的3中做法，啟動(dòng)頁(yè)還有一種做法就是，做出和首頁(yè)一樣，給人感覺進(jìn)入首頁(yè)特別快。

界面跳轉(zhuǎn)加載

可分為兩種方式，當(dāng)前頁(yè)加載和進(jìn)入下頁(yè)加載。

1.當(dāng)前頁(yè)加載：點(diǎn)擊按鈕后，在當(dāng)前頁(yè)提示正在加載并處理，成功后進(jìn)入下一頁(yè)。適用于需要判斷及驗(yàn)證處理的頁(yè)面中。例如表單信息判斷和登錄驗(yàn)證等。

2.進(jìn)入下頁(yè)加載：點(diǎn)擊按鈕，跳轉(zhuǎn)至下一頁(yè)面并加載內(nèi)容。絕大部分app采用這種加載方式，極大的增強(qiáng)了流暢的感覺。

白屏加載

多出現(xiàn)在H5頁(yè)面中，特點(diǎn)是一次性加載完所有數(shù)據(jù)，界面單一。若加載失敗，頁(yè)面為空。

分布加載/懶加載/預(yù)加載

界面中各類元素多種多樣，根據(jù)不同需求有不同加載方式，主要分以下三種：

1.分步加載：優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認(rèn)圖標(biāo)后圖片，圖片加載完成前使用占位符顯示；當(dāng)加載的頁(yè)面內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。此方式能夠及時(shí)展示相應(yīng)內(nèi)容，減少用戶心理等待時(shí)間。

2.懶加載：圖片一直是網(wǎng)絡(luò)資源占用大戶，對(duì)于一個(gè)前端有幾百?gòu)垐D片的網(wǎng)站來(lái)說(shuō)，如果首屏即加載所有圖片（無(wú)論這些圖片有沒有被用戶看到），那無(wú)疑是既浪費(fèi)網(wǎng)絡(luò)資源，又傷害用戶體驗(yàn)的事。目前，淘寶網(wǎng)、知乎等大流量網(wǎng)站都已經(jīng)使用了圖片滾動(dòng)懶加載的方案——僅當(dāng)圖片滾入視窗，被用戶看到的時(shí)候，才會(huì)去真正加載。

3.預(yù)加載：就是提前加載。如在啟動(dòng)頁(yè)時(shí)預(yù)加載首頁(yè)；通常應(yīng)用在信息流中。比如搜索結(jié)果頁(yè)，也就是我們經(jīng)?？吹降牧斜硪晥D。當(dāng)我們“將要滑到”頁(yè)面底部時(shí)，頁(yè)面自動(dòng)請(qǐng)求數(shù)據(jù)，為你加載出下一頁(yè)。所以一般你在瀏覽下圖這種列表時(shí)，感覺非常流暢。因?yàn)轫?yè)面進(jìn)行了預(yù)加載。

智能加載

考慮網(wǎng)絡(luò)流量問(wèn)題，智能加載不僅需要考慮加載的速度，還需要考慮用戶流量成本。因此通常應(yīng)用于WIFI和4G網(wǎng)絡(luò)切換條件下，另外還需產(chǎn)品判定網(wǎng)絡(luò)是否通暢。

• 在WIFI條件下：優(yōu)先加載高質(zhì)量圖片、優(yōu)質(zhì)音樂和視頻；
• 在4G條件下：下載行為自動(dòng)終止，優(yōu)先加載普通甚至停止加載圖片或音樂視頻；
• 在網(wǎng)絡(luò)不通暢下：默認(rèn)加載低質(zhì)量甚至停止加載圖片或音樂視頻；

緩存加載

針對(duì)無(wú)網(wǎng)絡(luò)的情況下，讓用戶仍能查看之前已緩存在本地的信息，使頁(yè)面不至于空白，這不僅能夠有效減少用戶流量成本，同時(shí)增加了訪問(wèn)速度。

4種加載樣式

1. 狀態(tài)欄加載：一般系統(tǒng)默認(rèn)配置加載樣式。
2. 導(dǎo)航欄加載：將導(dǎo)航欄標(biāo)題臨時(shí)變成加載信息文字提示。
3. 界面中加載：下拉刷新、懶加載和吐司加載。

總結(jié)：加載設(shè)計(jì)的核心原則

加載貫穿用戶的行為路徑，通過(guò)以上的案例背后設(shè)計(jì)的目的我們可以總結(jié)出加載設(shè)計(jì)的原則：

1. 讓加載時(shí)間變得更有價(jià)值——減少等待時(shí)間。
2. 讓加載變得更加有趣——忘記等待。
3. 保證用戶對(duì)加載的可控性——及時(shí)退出加載。

減少等待時(shí)間

上述提到的加載策略都有案例分析，不再做描述。

忘記等待

讓加載有趣，情感化加載，即將情感化的設(shè)計(jì)元素融入到界面中，不僅增加了產(chǎn)品生趣，還緩解用戶等待的焦慮感。情感化的加載不僅能夠適當(dāng)降低用戶的焦慮感，同時(shí)能夠突顯品牌或其他信息。

及時(shí)退出

由于網(wǎng)絡(luò)或系統(tǒng)的原因，加載有時(shí)會(huì)時(shí)間過(guò)長(zhǎng)，用戶并沒有足夠的耐心停留在當(dāng)前頁(yè)等待你慢慢加載。此時(shí)用戶有選擇退出加載的權(quán)利，同時(shí)也可以設(shè)置默認(rèn)時(shí)間內(nèi)加載無(wú)法進(jìn)行提示用戶重新加載。

THANK YOU FOR WATCHING…

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