編輯導(dǎo)語：加載是信息更新的反饋過程，合理的有效加載交互設(shè)計可以減少用戶焦慮，減輕用戶等待的壓力，進(jìn)而達(dá)到提升用戶體驗的目的。本篇文章里，作者針對移動端與網(wǎng)頁端的加載策略機(jī)制做了介紹，一起來看一下。

加載是信息更新的反饋過程。包括人機(jī)交互的反饋，以及機(jī)（客戶端）與服務(wù)器（后臺）的交互的反饋。

加載的觸發(fā)方式包括兩種：一種是用戶手動觸發(fā)，比如點擊【朋友圈】。

另一種是系統(tǒng)定時任務(wù)，按一定頻率或規(guī)則自動執(zhí)行。如聊天信息的時間，1分鐘內(nèi)顯示“剛剛”，那么定時任務(wù)就可以一分鐘刷新一次，自動更新時間顯示方式。

產(chǎn)品經(jīng)理要確定加載的策略機(jī)制，縮短或分散等待時間的壓力。同時優(yōu)化反饋效果，緩和焦慮。

以下對移動端和網(wǎng)頁端分別做討論。

一、App加載的策略機(jī)制

1. 整頁同步加載

一股腦把整個頁面的內(nèi)容全部加載給用戶。網(wǎng)速不友好的情況下很容易就會“難產(chǎn)而死”。因此在加載過程中會出現(xiàn)白屏。

為避免空空如也，常配合菊花或進(jìn)度條。

• 適用：該方式常用在輸出手機(jī)網(wǎng)頁的加載中，例如列表頁進(jìn)入詳情頁、圖片詳情等。
• 建議：在輸出產(chǎn)品MVP的時候，可以采用這樣的方案，簡單省事。但是作為成熟的產(chǎn)品，不推薦使用。

2. 異步加載

可以從三個角度進(jìn)行設(shè)計：

1. 先加載占網(wǎng)絡(luò)資源較小的元素模塊。如先文字和默認(rèn)圖標(biāo)后圖片。
2. 按權(quán)重分模塊進(jìn)行加載。比如模塊間有關(guān)聯(lián)性的，先加載父內(nèi)容，再加載子內(nèi)容。
3. 同一模塊分步驟加載。比如先加載出縮略圖或占位符，用戶點擊，才加載其大圖。又比如當(dāng)加載的頁面有固定框架時，可以先加載框架，再加載框架內(nèi)的內(nèi)容。這種加載出的屏幕稱之為“骨架屏”。

異步加載是一種比較成熟的指導(dǎo)思想。多用在頁面內(nèi)容比較多的時候，以及圖文混排的時候。

3. 預(yù)加載

預(yù)加載就是，在加載一個頁面內(nèi)容的同時，預(yù)測用戶的下一步行為，并為他下一步需要使用的頁面提前加載內(nèi)容。比如網(wǎng)易新聞中，斷網(wǎng)依然可以查看新聞，即使這條新聞你從來沒有打開過。

4. 懶加載

懶加載的方案就是，僅當(dāng)圖片滾入視窗，被用戶看到的時候，才會去真正加載。目前，淘寶網(wǎng)、知乎等大流量網(wǎng)站都已經(jīng)使用了圖片滾動懶加載的方案。

5. 分頁加載

分頁加載可以減少單次加載壓力。適用于瀑布流、長列表、商品列表等情況。

有的分頁有明確的【下一頁】按鈕，點擊即加載下一頁。

有的是無形分頁，如抖音的視頻瀑布流，用戶看起來是個沒完沒了的信息流。

這就是為什么當(dāng)我們看新聞、逛淘寶、刷微博時總是走不出來的原因。缺點就是容易迷失，不方便快速索引定位到某個內(nèi)容。

6. 離線緩存加載

首先在有網(wǎng)時候把數(shù)據(jù)提前加載下來，緩存到本地，當(dāng)沒網(wǎng)的時候，直接加載已經(jīng)緩存下來的內(nèi)容。

但考慮到手機(jī)空間，要設(shè)計合適的清理緩存的機(jī)制。

• 適用：該方案多適用于小說閱讀、新聞閱讀、視頻類APP。
• 缺點：占用本地存儲空間，而且有時候預(yù)加載的內(nèi)容根本沒有用到。

二、App加載界面反饋設(shè)計

1. loading圖標(biāo)

1）加載圖標(biāo)的樣式

通常選擇傳統(tǒng)的菊花動效就可以。

如果我們更進(jìn)一步，可以將品牌基因植入指示器的設(shè)計中。以飛豬的loading動效為例，無疑體現(xiàn)產(chǎn)品之間的差異性。

我們可以花點心思，選擇通過一些有趣的動效分散用戶在等待過程中的注意力。

2）loading圖標(biāo)展示位置

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

2. 加載的代替形式

1）啟動頁

啟動App需要一個短暫的過程，啟動頁的作用就是為了等到系統(tǒng)加載啟動。

啟動頁可以是廣告位、節(jié)日營銷或加強(qiáng)品牌意識?？梢詾殪o態(tài)頁，也可以是動態(tài)圖。

啟動頁還有一種做法就是，做出和首頁一樣，給人感覺進(jìn)入首頁特別快。

2）以跳轉(zhuǎn)或動效掩飾加載

跳轉(zhuǎn)本身也占用一定時間，因此也可以為加載爭取時間。比如加入購物車的動效。

3. 加載時需支持及時退出

用戶有選擇退出加載的權(quán)利，同時也可以設(shè)置默認(rèn)時間內(nèi)加載無法進(jìn)行提示用戶重新加載。

三、PC端頁面加載的機(jī)制

1. 頁面加載速度的影響

假如用戶試圖訪問你的網(wǎng)站，那么你的網(wǎng)站最好能在10秒之內(nèi)打開，如果超過這個時間，他就會放棄任務(wù)的執(zhí)行。

許多研究表明，用戶最滿意的打開頁面時間是2秒以下。如果等待12秒以上，網(wǎng)頁還沒有載入，那么99%以上的用戶會關(guān)閉這個網(wǎng)頁。

Google曾經(jīng)做過的一個實驗，顯示10條搜索結(jié)果的頁面載入需要0.4秒，顯示30條搜索結(jié)果的頁面載入需要0.9秒，采用后面一個方案的話，流量和收入各減少20%。

這就是為什么許多電商后臺管理系統(tǒng)中，默認(rèn)加載數(shù)據(jù)條數(shù)是10條，而不是15或者30。

2. 了解頁面加載的過程

用戶打開一個頁面，首先是頁面的框架，那些不需要加載的內(nèi)容呈現(xiàn)出來，再逐步拉取服務(wù)器的數(shù)據(jù)，在PC端就會出現(xiàn)頁面部分內(nèi)容為空白的情況。在APP端使用H5技術(shù)打開web頁面的話一般會給予加載條。

我們可以這樣理解，打開一個html為基礎(chǔ)的靜態(tài)頁面，然后里面夾雜著調(diào)用服務(wù)器運(yùn)算規(guī)則的元素，不斷渲染和加載，就呈現(xiàn)了我們期望中的樣子。

用戶等待的時間主要花費(fèi)在下載網(wǎng)頁元素，即HTML、CSS、JavaScript、Flash、圖片等。

統(tǒng)計顯示，每增加一個元素，網(wǎng)頁載入的時間就增加25-40毫秒（取決于用戶的帶寬情況）。

打開頁面→HTML寫出的靜態(tài)頁面→javascript／VBScript／ajax（AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）等渲染→對提交的表單進(jìn)行數(shù)據(jù)處理，向后端發(fā)起ajax請求對應(yīng)PHP的api接口→PHP在接收到數(shù)據(jù)后對連接服務(wù)器，服務(wù)器再通過PHP中的SQL語句對數(shù)據(jù)庫關(guān)鍵字進(jìn)行處理返回給PHP，再由PHP返回給前端，前端通過JS處理將數(shù)據(jù)渲染在HTML中，最終呈現(xiàn)給用戶。

加入購物車的點擊事件大致步驟為：用戶點擊”加入購物車”按鈕→頁面獲取當(dāng)前商品唯一值（如商品ID：productID）→JS處理點擊事件，將唯一值連同用戶信息通過ajax請求傳送給PHP→PHP向服務(wù)器請求連接→數(shù)據(jù)庫語句執(zhí)行→服務(wù)器將執(zhí)行結(jié)果返回給PHP→PHP將執(zhí)行結(jié)果傳送給前端。

如果數(shù)據(jù)庫語句執(zhí)行成功，那么數(shù)據(jù)庫中該用戶的購物車表就多了一項剛加入的商品數(shù)據(jù)，同時服務(wù)器也會向PHP返回執(zhí)行成功信息（及一條不為空的數(shù)據(jù)串），而用戶的界面就會顯示”成功加入購物車”等字樣。

若執(zhí)行失敗，也會將失敗信息（err）傳給PHP，用戶界面也會顯示相應(yīng)的提示。

由于現(xiàn)在的web頁面中，大量使用JS，導(dǎo)致瀏覽器打開頁面，就會占用大量的內(nèi)存，服務(wù)端的壓力是減輕了，但壓力轉(zhuǎn)移到了客戶端。

3. 如何優(yōu)化頁面打開速度

1）減少HTTP請求數(shù)

用戶在打開一個網(wǎng)頁的時候，后臺程序響應(yīng)用戶所需的時間并不多，用戶等待的時間主要花費(fèi)在下載網(wǎng)頁元素上了，即HTML、CSS、JavaScript、Flash、圖片等，統(tǒng)計顯示，每增加一個元素，網(wǎng)頁載入的時間就增加25-40毫秒（取決于用戶的帶寬情況）。

所以，想要提高網(wǎng)頁打開速度，就要減少HTTP請求數(shù)，方法有3種：

1. 減少不必要的HTTP請求，例如用CSS圓角代替圓角圖片，減少圖片的使用。
2. 合并文件，對于文本文件，可以直接合并內(nèi)容。例如將多個JS（JavaScript的簡稱）文件合并成一個，將多個CSS文件合并成一個。
3. 優(yōu)化緩存，對于沒有變化的網(wǎng)頁元素（如頁頭、頁尾等），用戶再次訪問的時候沒有必要重新下載，直接從瀏覽器緩存里讀取就可以了。

2）使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

用戶與你網(wǎng)站服務(wù)器的接近程度會影響響應(yīng)時間的長短，把網(wǎng)站內(nèi)容分散到多個、處于不同地理位置的服務(wù)器上可以加快下載速度。CDN由一系列分散到各個不同地理位置上的Web服務(wù)器組成，它根據(jù)和用戶在網(wǎng)絡(luò)上的靠近程度來指定某臺服務(wù)器響應(yīng)用戶的請求。

現(xiàn)在市面上有很多第三方CDN產(chǎn)品，比如加速樂、安全寶等，可以根據(jù)公司的情況來選擇。

注：該部分內(nèi)容參考書籍《后端產(chǎn)品經(jīng)理寶典》。

3）壓縮網(wǎng)頁元素

網(wǎng)頁中的每個元素越小，下載所需的時間就越少，這個很好理解?，F(xiàn)在比較成熟和流程的壓縮網(wǎng)頁的方式，是通過Gzip，我自己的實操經(jīng)驗來看，一般可以將網(wǎng)頁文本內(nèi)容減少70%以上。

4）樣式表放在網(wǎng)頁head部分

把樣式表（CSS文件）移到網(wǎng)頁的head部分可以讓頁面盡快開始渲染，用戶所感受的載入速度將會變快。

5）把JS文件放到網(wǎng)頁底部

網(wǎng)頁打開時，所有元素是順序顯示的。由于JS文件的特殊性，其相比其他元素來說，會加載的很慢，在JS文件下載完成之前，其他后面元素的順序顯示將被阻塞，因此把JS文件盡量放在底部，意味著內(nèi)容能被快速顯示。

6）把樣式表和JS腳本放到外部文件中

盡管將樣式表和JS腳本直接寫入網(wǎng)頁HTML中，可以減少外部文件調(diào)用數(shù)量，從而增加HTTP請求數(shù)。但是，這樣做會增加網(wǎng)頁的文件大小。綜合來看，將樣式表和JS腳本放到外部文件中，也許用戶首次訪問時會有點慢，但是后續(xù)在訪問網(wǎng)站時，頁面內(nèi)容通過瀏覽器緩存來減少HTTP請求，從而達(dá)到快速顯示的目的。

網(wǎng)頁中的每個元素越小，下載所需的時間就越少，這個很好理解?，F(xiàn)在比較成熟和流程的壓縮網(wǎng)頁的方式，是通過Gzip，我自己的實操經(jīng)驗來看，一般可以將網(wǎng)頁文本內(nèi)容減少70%以上。

在提升網(wǎng)頁打開速度的同時也不能忽視另一個問題：響應(yīng)。

對于用戶來說，每次的操作，不管返回結(jié)果是慢、還是快，都要及時予以響應(yīng)。曾經(jīng)就有過一次用戶始終在等待處理中，開始一位是網(wǎng)速問題，最后開發(fā)查了代碼知道這個用戶根本沒有操作權(quán)限，如果能夠果斷提醒無權(quán)限，用戶也知道離開或求助，不至于一直等下去。

四、PC端頁面加載的方案

1. PC頁面加載設(shè)計

1）用戶做完某些操作（如發(fā)布評論），頁面需要自動刷新。

2）提供給用戶刷新操作的方式，如下拉或者點擊標(biāo)題刷新。

當(dāng)數(shù)據(jù)獲取較慢，或網(wǎng)絡(luò)狀況不佳時，要有統(tǒng)一的加載方案圖示告訴用戶“數(shù)據(jù)正在加載中……”如：漏斗、菊花、進(jìn)度條等具體圖文可參與UI設(shè)計效果。

3）失敗/空頁面

當(dāng)頁面沒有數(shù)據(jù)、加載失敗或出錯時，要有統(tǒng)一的提示文案圖標(biāo)告訴用戶“頁面加載失敗/暫無數(shù)據(jù)/頁面出錯”，具體圖文可參與UI設(shè)計效果。

2. PC端頁面的加載策略

用戶點擊頁面加載是所有web頁面都要深入考慮的問題。因為不僅影響交互效果，關(guān)乎系統(tǒng)性能，影響業(yè)務(wù)效率。在一般情況下，對于頁面負(fù)載嚴(yán)重的部位，產(chǎn)品經(jīng)理要考慮異步加載或延遲加載。

1）異步加載

異步加載也叫非阻塞模式加載，就是在瀏覽器在下載js時，同時還會執(zhí)行后續(xù)的頁面處理。

異步加載的機(jī)制很常見。比如發(fā)布朋友圈時，你不用等所有文字和照片都上傳完畢，才顯示朋友圈，當(dāng)你點擊發(fā)送后，App上顯示出你已發(fā)出的朋友圈，然而微信其實在后臺仍然在上傳數(shù)據(jù)，仔細(xì)看上圖在發(fā)布完朋友圈之后，會有一次內(nèi)容的閃屏，那個時候才是將數(shù)據(jù)正式發(fā)布并展示給好友。

這樣的異步處理減少了用戶的等待時間，消除了用戶的焦慮感。

2）延遲加載（lazy loading）

顧名思義在需要的時候才加載,這樣做效率會比較低,但是占用內(nèi)存也低。頁面有大量不同的模塊組成，很多可能暫時不用或根本就沒用到。

就像圖片的延遲加載，在圖片出現(xiàn)在可視區(qū)域內(nèi)時（在滾動條下拉）才加載顯示圖片。用戶滾動到它們之前，視口外的圖像不會加載。在某些情況下，它還可以幫助減少服務(wù)器負(fù)載。

舉個例子來說明，當(dāng)打開淘寶首頁的時候，只有在瀏覽器窗口里的圖片才會被加載，當(dāng)你滾動首頁向下滑的時候，進(jìn)入視口內(nèi)的圖片才會被加載，而其它從未進(jìn)入視口的圖像不會也不會加載。

3）預(yù)加載

預(yù)加載是一種瀏覽器機(jī)制，使用瀏覽器空閑時間來預(yù)先下載/加載用戶接下來很可能會瀏覽的頁面/資源，當(dāng)用戶訪問某個預(yù)加載的鏈接時，如果從緩存命中,頁面就得以快速呈現(xiàn)。

五、總結(jié)

讓加載時間變得更有價值——減少等待時間。

讓加載變得更加有趣——忘記等待。

保證用戶對加載的可控性——及時退出加載，減少等待時間。

#專欄作家#

唧唧歪歪PM，公眾號：唧唧歪歪PM（ID：jjyypm），人人都是產(chǎn)品經(jīng)理專欄作家，2019年年度作者?！逗蠖水a(chǎn)品經(jīng)理寶典》作者，藥學(xué)碩士轉(zhuǎn)行互聯(lián)網(wǎng)產(chǎn)品多年；熟悉跨境電商業(yè)務(wù)，醫(yī)藥領(lǐng)域；擅長大型后臺體系，社交APP。

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

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