2023-12-05 分類: 網(wǎng)站建設(shè)
加載是信息更新的反饋過程。包括人機(jī)交互的反饋,以及計(jì)算機(jī)(客戶端)與服務(wù)器(后臺(tái))交互的反饋。
觸發(fā)加載有兩種方式:一種是用戶手動(dòng)觸發(fā),比如點(diǎn)擊【朋友圈】。
另一個(gè)是系統(tǒng)定時(shí)任務(wù),按照一定的頻率或規(guī)則自動(dòng)執(zhí)行。例如,如果聊天消息的時(shí)間在1分鐘內(nèi)顯示“剛剛”,那么定時(shí)任務(wù)可以每分鐘刷新一次,時(shí)間顯示模式會(huì)自動(dòng)更新。
產(chǎn)品經(jīng)理需要確定加載策略機(jī)制,以減少或分散等待時(shí)間的壓力。同時(shí)優(yōu)化反饋效果,緩解焦慮。
下面,我們將分別討論移動(dòng)端和Web端。
一、App加載策略機(jī)制1.整個(gè)頁面同步加載
整個(gè)頁面的所有內(nèi)容都一次性加載給用戶。網(wǎng)速不友好很容易“死胎”。所以加載過程中會(huì)出現(xiàn)白屏。
為避免空虛,常與菊花或進(jìn)度條搭配使用。
2. 異步加載
可以從三個(gè)角度進(jìn)行設(shè)計(jì):
首先加載占用較少網(wǎng)絡(luò)資源的元素模塊。例如,文本和默認(rèn)圖標(biāo)后跟圖片。按重量模塊加載。例如,如果模塊相關(guān),則先加載父內(nèi)容,然后加載子內(nèi)容。分步加載相同的模塊。例如,首先加載縮略圖或占位符,用戶在加載較大的圖像之前單擊它。再比如,當(dāng)加載的頁面有固定框架時(shí),??可以先加載框架,再加載框架中的內(nèi)容。這個(gè)加載的屏幕被稱為“骨架屏幕”。
異步加載是一個(gè)比較成熟的指導(dǎo)思想。多用于頁面內(nèi)容較多,圖文混雜的時(shí)候。
3. 預(yù)加載
預(yù)加載是在加載頁面內(nèi)容時(shí)預(yù)測(cè)用戶的下一步行為,為下一步需要使用的頁面預(yù)先加載內(nèi)容。例如小程序開發(fā),在網(wǎng)易新聞中,即使您從未打開過新聞,如果您與互聯(lián)網(wǎng)斷開連接小程序開發(fā),您仍然可以查看新聞。
4. 延遲加載
延遲加載解決方案是,只有當(dāng)圖像滾動(dòng)到窗口中并被用戶看到時(shí),它才會(huì)真正加載。目前淘寶、知乎等大流量網(wǎng)站已經(jīng)采用了圖片滾動(dòng)的懶加載方案。
5. 分頁加載
分頁加載可以減輕單個(gè)加載的壓力。適用于瀑布、長(zhǎng)列表、產(chǎn)品列表等。
有些頁面有明確的[Next]按鈕,點(diǎn)擊加載下一頁。
有些是無形的分頁,比如抖音的視頻瀑布,在用戶看來就是源源不斷的信息流。
這就是為什么我們看新聞、瀏覽淘寶、瀏覽微博都出不去的原因。缺點(diǎn)是容易迷路,不方便快速索引定位某個(gè)內(nèi)容。
6. 離線緩存加載
首先,在有網(wǎng)絡(luò)的情況下提前加載數(shù)據(jù),并在本地緩存。沒有網(wǎng)絡(luò)時(shí),直接加載緩存的內(nèi)容。
但是,考慮到手機(jī)的空間,應(yīng)該設(shè)計(jì)一個(gè)合適的清除緩存的機(jī)制。
二、App加載界面反饋設(shè)計(jì)1.圖標(biāo)
1)加載圖標(biāo)樣式
通常你可以選擇傳統(tǒng)的菊花動(dòng)畫。
如果我們更進(jìn)一步,我們可以將品牌基因構(gòu)建到指標(biāo)的設(shè)計(jì)中。以飛豬的動(dòng)態(tài)效果為例,無疑體現(xiàn)了產(chǎn)品之間的差異。
我們可以稍微考慮一下,選擇用一些有趣的動(dòng)畫來分散用戶的注意力。
2)圖標(biāo)放置
2. 加載替代形式
1)啟動(dòng)頁面
啟動(dòng)app需要一個(gè)短暫的過程,啟動(dòng)頁面的作用就是等到系統(tǒng)加載啟動(dòng)。
啟動(dòng)頁面可以是廣告空間、假日營(yíng)銷或品牌知名度。它可以是靜態(tài)頁面或動(dòng)態(tài)圖像。
另一種啟動(dòng)頁面的方式是讓它和首頁一樣,給人一種進(jìn)入首頁很快的感覺。
2)以跳躍或運(yùn)動(dòng)偽裝加載
跳躍本身也需要一定的時(shí)間,所以也可以為加載爭(zhēng)取時(shí)間。比如添加到購(gòu)物車動(dòng)畫。
3. 支持加載時(shí)及時(shí)退出
用戶有權(quán)選擇不加載,也可以將加載的默認(rèn)時(shí)間設(shè)置為不能提示用戶重新加載。
三、pC端頁面加載機(jī)制1.頁面加載速度的影響
如果用戶試圖訪問你的網(wǎng)站,那么你的網(wǎng)站應(yīng)該在 10 秒內(nèi)打開網(wǎng)站開發(fā),如果超過這個(gè)時(shí)間,他將放棄任務(wù)的執(zhí)行。
許多研究表明,用戶最滿意的是他們?cè)?2 秒內(nèi)打開頁面的時(shí)間。如果頁面等待超過 12 秒后還沒有加載,那么超過 99% 的用戶會(huì)關(guān)閉頁面。
在我做的一個(gè)實(shí)驗(yàn)中,加載一個(gè)顯示 10 個(gè)搜索結(jié)果的頁面需要 0.4 秒,加載一個(gè)顯示 30 個(gè)搜索結(jié)果的頁面需要 0.9 秒。如果采用后一種方案,流量和收入各下降 20%。
這就是為什么在很多電商后臺(tái)管理系統(tǒng)中,默認(rèn)加載的數(shù)據(jù)個(gè)數(shù)是10個(gè),而不是15個(gè)或30個(gè)。
2. 了解頁面加載過程
當(dāng)用戶打開一個(gè)頁面時(shí),首先是頁面的框架,將不需要加載的內(nèi)容呈現(xiàn)出來,然后逐漸從服務(wù)器拉取數(shù)據(jù),會(huì)出現(xiàn)頁面的部分內(nèi)容pC端空白。如果在App端使用H5技術(shù)打開網(wǎng)頁,一般會(huì)給出加載條。
我們可以這樣理解,打開一個(gè)基于html的靜態(tài)頁面,然后混入調(diào)用服務(wù)器算法的元素,不斷渲染加載,呈現(xiàn)出我們所期待的樣子。
用戶的等待時(shí)間主要花在下載網(wǎng)頁元素上,即HTML、CSS、、、、圖片等。
統(tǒng)計(jì)顯示,每增加一個(gè)元素,頁面加載時(shí)間就會(huì)增加 25-40 毫秒(取決于用戶的帶寬)。
打開頁面→HTML寫的靜態(tài)頁面→//ajax(AJAX意思是“和XML”(異步和XML)等渲染→處理提交表單的數(shù)據(jù),向后端對(duì)應(yīng)的發(fā)起ajax請(qǐng)求pHp api接口 → pHp in 接收到數(shù)據(jù)后,連接服務(wù)器,服務(wù)器通過pHp中的SQL語句處理數(shù)據(jù)庫(kù)關(guān)鍵字返回給pHp,再返回給前端,前端將數(shù)據(jù)渲染在HTML通過JS處理,最終呈現(xiàn)給用戶。
點(diǎn)擊事件加入購(gòu)物車的一般步驟是:用戶點(diǎn)擊“加入購(gòu)物車”按鈕→頁面獲取當(dāng)前商品的唯一值(如商品ID:)→JS處理點(diǎn)擊事件,并通過ajax請(qǐng)求將唯一值連同用戶信息傳送給pHp→pHp請(qǐng)求連接服務(wù)器→執(zhí)行數(shù)據(jù)庫(kù)語句→服務(wù)器返回執(zhí)行結(jié)果給pHp→pHp將執(zhí)行結(jié)果傳送給前端。
如果數(shù)據(jù)庫(kù)語句執(zhí)行成功,數(shù)據(jù)庫(kù)中用戶的購(gòu)物車表會(huì)多出一條剛剛添加的商品數(shù)據(jù),服務(wù)器也會(huì)返回執(zhí)行成功信息(以及一個(gè)非空的數(shù)據(jù)串)給pHp,而用戶的界面會(huì)顯示“成功加入購(gòu)物車”字樣。
如果執(zhí)行失敗網(wǎng)站開發(fā),也會(huì)將失敗信息(err)傳遞給pHp,用戶界面也會(huì)顯示相應(yīng)的提示。
由于當(dāng)前網(wǎng)頁使用大量的JS,瀏覽器在打開頁面時(shí)會(huì)占用大量?jī)?nèi)存。服務(wù)端的壓力得到了緩解,但是壓力卻轉(zhuǎn)移到了客戶端。
3. 如何優(yōu)化頁面打開速度
新聞標(biāo)題:網(wǎng)站開發(fā)移動(dòng)端和網(wǎng)頁端的優(yōu)化反饋過程及策略機(jī)制禮品冊(cè)兌換網(wǎng)站開發(fā)建站
本文URL:http://m.rwnh.cn/news4/299004.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、定制開發(fā)、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容