欧美丰满大乳高跟鞋-性av无码天堂-亚洲欧美色中文字幕在线-老熟妇高潮喷了╳╳╳

奇沃云科技公司

交互基礎(chǔ):加載的10種類型和應(yīng)用場景分析

發(fā)布時間:2019-03-27 09:20
作者:白鷺漫談
來源:白鷺漫談


目錄:

一、為什么需要加載

二、常見的加載場景

三、加載的 10 種類型和分析

四、總結(jié)

一、為什么需要加載?

1 給用戶反饋

在上篇《尼爾森10大可用性原則》中我們說過,系統(tǒng)應(yīng)該通過在合理時間內(nèi)適當(dāng)反饋,向用戶通知當(dāng)前的狀態(tài)。

加載其實(shí)就是一種反饋

——讓用戶知道產(chǎn)品正在響應(yīng)操作,同時通過一些加載的設(shè)計(jì)形式,吸引用戶注意力,減緩用戶等待的焦慮。

2 防止用戶跳失

0-0.3秒內(nèi)的響應(yīng)基本上是及時的;

0.3-1秒時用戶已經(jīng)能夠察覺到延遲了。

當(dāng)遇到頁面內(nèi)信息內(nèi)存過大或者網(wǎng)絡(luò)狀況不好時,加載時間通常會比較長,我們就需要針對不同的情況設(shè)計(jì)不同的加載方式。

否則,當(dāng)加載時長超過3秒時(參考谷歌2017年《消費(fèi)者行為文檔》),53%的用戶會選擇離開;加載超過5秒就會有74%的用戶離開(騰訊娛樂的《移動端行為報(bào)告·第一期》H5)。

二、加載常見的應(yīng)用場景

移動端的加載常見場景有:

APP啟動、界面跳轉(zhuǎn)、上拉加載后續(xù)內(nèi)容、下拉刷新、

瀏覽信息(文字、圖片、視頻)、下載內(nèi)容、操作反饋(提交、付款)

……

當(dāng)然這些只是通用的場景,不同類型的產(chǎn)品加載場景肯定會有差別的,在實(shí)際工作中,我們需要和開發(fā)、數(shù)據(jù)人員一起去梳理這些加載時間過長的頁面,排查原因(操作系統(tǒng)層面的問題?服務(wù)器的問題?),如果暫時無法解決的,或者不可控的網(wǎng)絡(luò)問題,就需要通過加載的設(shè)計(jì)來緩解用戶等待時的焦慮,降低用戶的跳失率。

三、加載的 10 種類型和分析

我們常見到的大部分的加載都是非模態(tài)加載

1 啟動加載

因?yàn)锳PP的啟動需要一個過程,所以會通過啟動頁來吸引用戶的注意力。

啟動加載的常見表現(xiàn)形式有品牌啟動頁、廣告頁(外部廣告or內(nèi)部運(yùn)營活動)。啟動頁大部分是靜態(tài)的,也可以是動態(tài)的,比如騰訊視頻就是動態(tài)的品牌啟動。

品牌頁和廣告頁啟動可以單獨(dú)存在,也可以同時存在,比如考拉,此時通常品牌頁在前,廣告頁在后,廣告頁需要有跳過按鈕。

2 占位圖加載

先加載頁面布局和占位圖,等到后臺數(shù)據(jù)加載完成后,再加載頁面的細(xì)節(jié)內(nèi)容(文字、圖片)。占位圖通常以色塊形式呈現(xiàn),圖片類占位通常為圖片icon或者產(chǎn)品logo。

這種方式適合頁面布局比較固定的頁面,此時需要注意的是,如果頁面布局進(jìn)行了改版,就需要對占位圖進(jìn)行對應(yīng)的更新。

有次我們?nèi)€品牌升級之后,把APP圖標(biāo)進(jìn)行了更新,但是后來測試時發(fā)現(xiàn),商品的占位圖仍然為舊版的logo……

優(yōu)點(diǎn):減少用戶心理等待時間,體驗(yàn)比較流暢

應(yīng)用:適合頁面布局比較固定的頁面,比如簡書、facebook

3 分步加載

此時會優(yōu)先加載內(nèi)存較小的元素,通常是先加載出文字、圖標(biāo)等,最后加載圖片、視頻。圖片視頻類資源也是逐步加載出來的。

優(yōu)點(diǎn):即時響應(yīng),用戶能夠先看到部分內(nèi)容

應(yīng)用:一般用于圖片/視頻類資源比較多的頁面

4 預(yù)加載

提前加載后續(xù)內(nèi)容,當(dāng)用戶需要查看時可直接從本地緩存中渲染。

瀏覽A頁面時,系統(tǒng)自動加載出B頁面,用戶無需等待,體驗(yàn)比較好,但是服務(wù)器的負(fù)很大大。

比如頭條,在首頁瀏覽時,我們嘗試斷掉網(wǎng),打開瀏覽過的任意一個新聞的詳情頁,可以看到它已經(jīng)把這些新聞的文字內(nèi)容都加載好了

優(yōu)點(diǎn):使用流暢、無需等待頁面跳轉(zhuǎn)

缺點(diǎn):服務(wù)器負(fù)擔(dān)重

應(yīng)用:適用于服務(wù)器配置高的產(chǎn)品;且下個頁面內(nèi)容是確定的


5 漸入加載

圖片出來的時候,預(yù)先呈現(xiàn)出與圖片較為相似的色彩值,或者高斯模糊的圖片,直到圖片加載完全,會有種漸入的效果。

優(yōu)點(diǎn):相比分步加載更加直觀、色彩感強(qiáng)

應(yīng)用:一般用于圖片類產(chǎn)品,比如谷歌的搜圖、pinterest、unsplash

6 懶加載

當(dāng)頁面內(nèi)容豐富,圖片數(shù)量多,而且比較大時,通常會使用懶加載的方式。通常應(yīng)用于feed流上拉加載后續(xù)內(nèi)容。

可視區(qū)加載

僅加載用戶可視區(qū)域,一般會在距下面內(nèi)容一定距離時開始加載,這樣能保證用戶拉下時正好能看到內(nèi)容,這個主要由監(jiān)控滾動條來實(shí)現(xiàn)。能給用戶一種無縫銜接的感覺,比如網(wǎng)易新聞

優(yōu)點(diǎn):無需用戶操作,自動加載后續(xù)內(nèi)容,營造沉浸式體驗(yàn)。

應(yīng)用:適合feed流、列表、算法推薦類的內(nèi)容

手動加載

手動加載意味著用戶操作后才能觸發(fā)的加載,比如點(diǎn)擊加載更多、上拉加載更多。

優(yōu)點(diǎn):比較節(jié)約用戶流量,服務(wù)器負(fù)擔(dān)也小

缺點(diǎn):瀏覽時每次都需要手動進(jìn)行加載,打斷用戶閱讀流

應(yīng)用:比較適合服務(wù)器配置有限的產(chǎn)品

7 下拉刷新加載

下拉刷新可以讓用戶在看到本地?cái)?shù)據(jù)的同時加載新數(shù)據(jù)。下拉動畫能夠給用戶驚喜,下拉加載一般分為兩種形式:

動畫加文字:

文字通常表示狀態(tài),如騰訊動漫下拉刷新:正在連接漫星球——嗶嗶,連接成功

純動畫:

常規(guī)為刷新小圈圈,也有很多產(chǎn)品用展示品牌形象相關(guān)的動畫,比如下圖美團(tuán)的刷新動畫。

優(yōu)點(diǎn):刷新動畫可以自由設(shè)計(jì);展示品牌形象

應(yīng)用:適合頁面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品;不適合固定內(nèi)容的頁面。比如微信的聊天頁面下拉是小程序,支付寶的下拉刷新在頁面中間。

8 全屏加載

全屏加載顧名思義就是整個頁面的內(nèi)容一同加載,頁面內(nèi)容全部加載出來,或者全部都加載不出來。此時頁面通常為空白頁,會通過進(jìn)度指示器(小菊花或者進(jìn)度條)來表示進(jìn)度。

也有很多產(chǎn)品使用品牌形象,以及各種創(chuàng)意動畫來吸引用戶的注意力,緩解用戶焦慮。

優(yōu)點(diǎn):將整個頁面的內(nèi)容都加載出來才展現(xiàn)給用戶,能夠保證整個頁面的完整性。

缺點(diǎn):看不到頁面內(nèi)容,等待的時間較長。

應(yīng)用:新頁面的內(nèi)容不確定時;各種H5 頁面。

9 智能加載

智能加載是根據(jù)不同的網(wǎng)絡(luò)狀況來加載不同的內(nèi)容,比如在Wi-Fi等網(wǎng)絡(luò)環(huán)境較好的情況下,自動加載內(nèi)容會直接加載高質(zhì)量的圖片、音頻、視頻等信息。

而流量模式下或者網(wǎng)速較差時,只加載文字或者小圖。

優(yōu)點(diǎn):能根據(jù)用戶的網(wǎng)絡(luò)環(huán)境進(jìn)行對應(yīng)的加載,用戶體驗(yàn)較好;

缺點(diǎn):采用的方式并不一定是用戶想要的。(所以很多產(chǎn)品支持自定義智能加載模式,比如頭條、搜狗瀏覽器

應(yīng)用:適合大量視頻、圖片信息的產(chǎn)品。

當(dāng)然,隨著帶寬、流量的擴(kuò)增,用流量觀看視頻對很多用戶已經(jīng)不再是問題了,所以目前許多產(chǎn)品只是在觀看時提醒用戶——當(dāng)前為移動網(wǎng)絡(luò),比如抖音和愛奇藝

除了上面的9種以外,還有以模態(tài)彈框形式呈現(xiàn)的加載。

10 模態(tài)彈框加載

模態(tài)加載會阻斷用戶,此時用戶不能進(jìn)行其他操作,用戶只能等待加載結(jié)束。通常用于舊命令正在處理中,當(dāng)前不允許你再修改請求。比如支付中、微信發(fā)紅包;

除此之外,當(dāng)客戶端向服務(wù)器請求信息、還沒有收到服務(wù)器的數(shù)據(jù)時,也會用模態(tài)加載來表達(dá)“后臺正在工作,馬上好了,先別走哦~”

優(yōu)點(diǎn):引起用戶重視,防止用戶進(jìn)行其他操作

缺點(diǎn):打斷用戶的行為

應(yīng)用:適合下一步的操作與當(dāng)前操作關(guān)聯(lián)性強(qiáng)的、屬于同一個流程的?;蛘吆推渌虞d方式結(jié)合,當(dāng)網(wǎng)絡(luò)狀況不好或者頁面請求數(shù)據(jù)未到達(dá)時,吸引用戶注意,防止跳失。

四、總結(jié)

本文總結(jié)了10種加載的類型,以及分析了其優(yōu)缺點(diǎn)和應(yīng)用場景。一起來回顧一下~

我們需要考慮到產(chǎn)品的類型、頁面的類型、甚至服務(wù)器的限制,來選用合適的加載方式。當(dāng)然,用什么加載方式并不是一個單選題,為了讓用戶體驗(yàn)更流暢,很多產(chǎn)品會根據(jù)場景組合使用這些加載方式。

比如pinterest一開始為全屏加載,請求到數(shù)據(jù)后,開始分步加載出頁面,頁面繼續(xù)往下滑到第二屏第三屏,采用的是懶加載。


參考:

1】The consumer behaviors shaping the next generation of mobile experiences:https://www.thinkwithgoogle.com/advertising-channels/mobile-marketing/consumer-behavior-mobile-digital-experiences/

2】騰訊娛樂《移動頁面用戶行為報(bào)告》:https://www.digitaling.com/company/articles/11462

3】懶加載和預(yù)加載:https://www.jianshu.com/p/4876a4fe7731

4】選擇合適的加載方式,減少用戶的等待:https://mp.weixin.qq.com/s/IOqznxow8tr-rnIK5ZHq_Q

著作權(quán)歸作者所有。

掃一掃在手機(jī)上閱讀本文章