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

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

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

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

下面，我們將分別討論移動端和Web端。

一、App加載策略機(jī)制1.整個頁面同步加載

整個頁面的所有內(nèi)容都一次性加載給用戶。網(wǎng)速不友好很容易“死胎”。所以加載過程中會出現(xiàn)白屏。

為避免空虛，常與菊花或進(jìn)度條搭配使用。

2. 異步加載

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

首先加載占用較少網(wǎng)絡(luò)資源的元素模塊。例如，文本和默認(rèn)圖標(biāo)后跟圖片。按重量模塊加載。例如，如果模塊相關(guān)，則先加載父內(nèi)容，然后加載子內(nèi)容。分步加載相同的模塊。例如，首先加載縮略圖或占位符，用戶在加載較大的圖像之前單擊它。再比如，當(dāng)加載的頁面有固定框架時，??可以先加載框架，再加載框架中的內(nèi)容。這個加載的屏幕被稱為“骨架屏幕”。

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

3. 預(yù)加載

預(yù)加載是在加載頁面內(nèi)容時預(yù)測用戶的下一步行為，為下一步需要使用的頁面預(yù)先加載內(nèi)容。例如小程序開發(fā)，在網(wǎng)易新聞中，即使您從未打開過新聞，如果您與互聯(lián)網(wǎng)斷開連接小程序開發(fā)，您仍然可以查看新聞。

4. 延遲加載

延遲加載解決方案是，只有當(dāng)圖像滾動到窗口中并被用戶看到時，它才會真正加載。目前淘寶、知乎等大流量網(wǎng)站已經(jīng)采用了圖片滾動的懶加載方案。

5. 分頁加載

分頁加載可以減輕單個加載的壓力。適用于瀑布、長列表、產(chǎn)品列表等。

有些頁面有明確的[Next]按鈕，點擊加載下一頁。

有些是無形的分頁，比如抖音的視頻瀑布，在用戶看來就是源源不斷的信息流。

這就是為什么我們看新聞、瀏覽淘寶、瀏覽微博都出不去的原因。缺點是容易迷路，不方便快速索引定位某個內(nèi)容。

6. 離線緩存加載

首先，在有網(wǎng)絡(luò)的情況下提前加載數(shù)據(jù)，并在本地緩存。沒有網(wǎng)絡(luò)時，直接加載緩存的內(nèi)容。

但是，考慮到手機(jī)的空間，應(yīng)該設(shè)計一個合適的清除緩存的機(jī)制。

二、App加載界面反饋設(shè)計1.圖標(biāo)

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

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

如果我們更進(jìn)一步，我們可以將品牌基因構(gòu)建到指標(biāo)的設(shè)計中。以飛豬的動態(tài)效果為例，無疑體現(xiàn)了產(chǎn)品之間的差異。

我們可以稍微考慮一下，選擇用一些有趣的動畫來分散用戶的注意力。

2）圖標(biāo)放置

2. 加載替代形式

1）啟動頁面

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

啟動頁面可以是廣告空間、假日營銷或品牌知名度。它可以是靜態(tài)頁面或動態(tài)圖像。

另一種啟動頁面的方式是讓它和首頁一樣，給人一種進(jìn)入首頁很快的感覺。

2）以跳躍或運(yùn)動偽裝加載

跳躍本身也需要一定的時間，所以也可以為加載爭取時間。比如添加到購物車動畫。

3. 支持加載時及時退出

用戶有權(quán)選擇不加載，也可以將加載的默認(rèn)時間設(shè)置為不能提示用戶重新加載。

三、pC端頁面加載機(jī)制1.頁面加載速度的影響

如果用戶試圖訪問你的網(wǎng)站，那么你的網(wǎng)站應(yīng)該在 10 秒內(nèi)打開網(wǎng)站開發(fā)，如果超過這個時間，他將放棄任務(wù)的執(zhí)行。

許多研究表明，用戶最滿意的是他們在 2 秒內(nèi)打開頁面的時間。如果頁面等待超過 12 秒后還沒有加載，那么超過 99% 的用戶會關(guān)閉頁面。

在我做的一個實驗中，加載一個顯示 10 個搜索結(jié)果的頁面需要 0.4 秒，加載一個顯示 30 個搜索結(jié)果的頁面需要 0.9 秒。如果采用后一種方案，流量和收入各下降 20%。

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

2. 了解頁面加載過程

當(dāng)用戶打開一個頁面時，首先是頁面的框架，將不需要加載的內(nèi)容呈現(xiàn)出來，然后逐漸從服務(wù)器拉取數(shù)據(jù)，會出現(xiàn)頁面的部分內(nèi)容pC端空白。如果在App端使用H5技術(shù)打開網(wǎng)頁，一般會給出加載條。

我們可以這樣理解，打開一個基于html的靜態(tài)頁面，然后混入調(diào)用服務(wù)器算法的元素，不斷渲染加載，呈現(xiàn)出我們所期待的樣子。

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

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

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

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

如果數(shù)據(jù)庫語句執(zhí)行成功，數(shù)據(jù)庫中用戶的購物車表會多出一條剛剛添加的商品數(shù)據(jù)，服務(wù)器也會返回執(zhí)行成功信息（以及一個非空的數(shù)據(jù)串）給pHp，而用戶的界面會顯示“成功加入購物車”字樣。

如果執(zhí)行失敗網(wǎng)站開發(fā)，也會將失敗信息（err）傳遞給pHp，用戶界面也會顯示相應(yīng)的提示。

由于當(dāng)前網(wǎng)頁使用大量的JS，瀏覽器在打開頁面時會占用大量內(nèi)存。服務(wù)端的壓力得到了緩解，但是壓力卻轉(zhuǎn)移到了客戶端。

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

新聞標(biāo)題：網(wǎng)站開發(fā)移動端和網(wǎng)頁端的優(yōu)化反饋過程及策略機(jī)制禮品冊兌換網(wǎng)站開發(fā)建站
本文URL：http://jinyejixie.com/news4/299004.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、定制開發(fā)、微信公眾號、手機(jī)網(wǎng)站建設(shè)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)