中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

APPloading頁(yè)面交互設(shè)計(jì)方法

2022-05-27    分類: 網(wǎng)站建設(shè)

loading頁(yè)面的展示方式多種多樣,我總結(jié)了幾點(diǎn)和大家一起探討交流。

一、類型

Loading頁(yè)從邏輯上講,會(huì)有兩種分類:一種是先loading再進(jìn)入、另一種是先進(jìn)入再loading。兩種分類從順序上看,就是加載數(shù)據(jù)和進(jìn)入頁(yè)面,哪個(gè)放在前面。下面我們具體的看一下這兩種分類。

先loading再進(jìn)入

在一個(gè)頁(yè)面中點(diǎn)擊一個(gè)button或者一個(gè)入口時(shí),app會(huì)先加載完下一個(gè)頁(yè)面的所有數(shù)據(jù)之后,再進(jìn)行跳轉(zhuǎn)操作,下一個(gè)頁(yè)面的所有樣式布局、所有的數(shù)據(jù),都是在加載完該頁(yè)面所有的模塊之后,才會(huì)跳轉(zhuǎn)并顯示出來。這里你可能會(huì)比較差異,自己平時(shí)用的app里面好像很少有這種交互方法。

確實(shí),這樣的交互比較少見,我在AppStore排行榜前一百位的應(yīng)用里面,也沒有見到這樣的交互方式。平時(shí)在移動(dòng)端能接觸到這種交互方式的,應(yīng)該是我們手機(jī)的開機(jī)過程,加載完所有模塊之后才進(jìn)入新的頁(yè)面。這樣做的原因在于,新的頁(yè)面極其重要,為了不影響新頁(yè)面的體驗(yàn)效果,才會(huì)做成先loading再進(jìn)入。但同時(shí)這樣做會(huì)讓用戶產(chǎn)生一定的等待焦慮,全部數(shù)據(jù)加載完,可能會(huì)需要很長(zhǎng)一段時(shí)間,在這段時(shí)間里,用戶只能在本頁(yè)面看著轉(zhuǎn)菊花,卻不能體驗(yàn)新的功能或者產(chǎn)品。所以這樣的交互越來越少見了。

先進(jìn)入再loading

在一個(gè)頁(yè)面中點(diǎn)擊一個(gè)button或者一個(gè)入口時(shí),app會(huì)先進(jìn)行跳轉(zhuǎn)操作,下一個(gè)頁(yè)面所需要的數(shù)據(jù)一步一步的加載出來。這樣的交互方式比較常見,也比較符合用戶的使用行為,用戶點(diǎn)一個(gè)button,進(jìn)入新的頁(yè)面,肯定是迫不及待的想體驗(yàn)新頁(yè)面的功能或者產(chǎn)品,所以先進(jìn)入新的頁(yè)面,再一步一步的加載,也成為了主流的交互方法。

二、方案

這里討論的方案,是類型二:先進(jìn)入再loading的交互方法的實(shí)現(xiàn)方案。方案一:先loading再進(jìn)入的使用情況比較少見,我們就不做討論了。

全部鎖定

下一個(gè)頁(yè)面中全屏被鎖定,只顯示出轉(zhuǎn)菊花(加載中),在頁(yè)面沒有全部加載完的時(shí)候,用戶沒有任何其他的交互操作的機(jī)會(huì)(包括返回退出button)。這樣的交互方案,實(shí)際上是和類型一“先loading再進(jìn)入”是一個(gè)意思,都得是新的頁(yè)面所有數(shù)據(jù)加載完之后,用戶才可以有交互操作。

全部鎖定這樣的方案,存在著很大的弊端,當(dāng)網(wǎng)絡(luò)環(huán)境比較差,處于弱網(wǎng)斷網(wǎng)的情況下,或者所需要的加載的數(shù)據(jù)量龐大,加載的時(shí)間可能會(huì)很長(zhǎng)。但是用戶又沒有其他的方式改變這樣的情況,只能是等待頁(yè)面全部加載完,或者是殺死進(jìn)程。

部分鎖定

一個(gè)新的頁(yè)面被分為兩個(gè)部分,一是靜態(tài)數(shù)據(jù)部分,在下載apk的時(shí)候就已經(jīng)設(shè)置好的,比如說返回退出button等,不隨著頁(yè)面的變動(dòng)而變動(dòng)。二是動(dòng)態(tài)數(shù)據(jù)部分,每次進(jìn)入新的頁(yè)面時(shí),app會(huì)向服務(wù)器請(qǐng)求動(dòng)態(tài)數(shù)據(jù)部分的數(shù)據(jù)信息,這時(shí)頁(yè)面中動(dòng)態(tài)數(shù)據(jù)部分被鎖定,顯示轉(zhuǎn)菊花,沒有被鎖定的部分是靜態(tài)數(shù)據(jù)部分,方便用戶在弱網(wǎng)斷網(wǎng)、數(shù)據(jù)量龐大這些情況發(fā)生時(shí),可以選擇退出,使用app內(nèi)的其他功能。


如大眾點(diǎn)評(píng)的loading方案,在進(jìn)入一個(gè)新的頁(yè)面時(shí),需要加載的部分是內(nèi)容部分,頂部的框架是在app喚醒時(shí)就已經(jīng)加載好的,不隨著每個(gè)新的頁(yè)面變化而發(fā)生改變。方便用戶在弱網(wǎng)斷網(wǎng)、數(shù)據(jù)量龐大的情況下做出相應(yīng)的改變。

局部loading


在一個(gè)新的頁(yè)面被加載時(shí),首先會(huì)向服務(wù)器發(fā)送請(qǐng)求參數(shù),看看回調(diào)參數(shù)與上一次打開該應(yīng)用時(shí)的回調(diào)參數(shù)是否一致,若是一致,向本地緩存調(diào)用參數(shù),查看一下本地是否有該頁(yè)面的緩存,部分模塊可能存在于緩存之中,如果有,則先展示出來緩存的內(nèi)容,讓頁(yè)面上先有一些內(nèi)容供用戶瀏覽。每當(dāng)加載完一個(gè)模塊的數(shù)據(jù)之后,顯示出來一個(gè)模塊的內(nèi)容,沒加載出來的顯示轉(zhuǎn)菊花。


這是現(xiàn)網(wǎng)上比較常用的一個(gè)方法,比如微信用的就是這種交互的方法,我把網(wǎng)斷掉,模擬弱網(wǎng)斷網(wǎng)的環(huán)境,由于彩票不在微信錢包的第一屏,故之前沒有加載到緩存中,數(shù)據(jù)從服務(wù)器返回到app之前,首先加載出來緩存中的數(shù)據(jù),緩存中沒有的數(shù)據(jù),用系統(tǒng)的空白來代替。

默認(rèn)樣式填充


在等待回調(diào)的數(shù)據(jù)時(shí),為了在頁(yè)面不顯示空的值,一般都會(huì)顯示轉(zhuǎn)菊花,來告知用戶該頁(yè)面處于加載中,有些APP在轉(zhuǎn)菊花的部分,顯示的是app的logo圖,并且配上一定的文案說明,如上圖的映兔視頻。樣式統(tǒng)一并且傳遞的風(fēng)格也是一致的。讓用戶對(duì)APP有一致的印象,給用戶留下好感。

三、細(xì)節(jié)

Loading頁(yè),會(huì)有很多值得關(guān)注的細(xì)節(jié)問題,我根據(jù)我見過的loading頁(yè)面,總結(jié)出來下面三條,最后一點(diǎn)是我根據(jù)自己的痛點(diǎn)做出的設(shè)想。

進(jìn)度條


直觀的反映出數(shù)據(jù)加載的進(jìn)度,能有效的減輕用戶等待的焦慮。我們最常見的進(jìn)度條,可能就是微信的公眾號(hào)文章了。進(jìn)度條主體顏色為綠色,和微信logo的顏色相同,且在白色的背景襯托下顯得明亮突出。由于公眾號(hào)文章可能存在較多圖片或者視頻音頻,所以加載的時(shí)間長(zhǎng)短不一,進(jìn)度條的存在恰好的反映了加載的進(jìn)度,減輕了用戶等待的焦慮。

技巧分享

這種交互常見于手游,由于手游的規(guī)則邏輯都極其復(fù)雜,用戶很難會(huì)認(rèn)真的讀完用戶手冊(cè)或者幫助說明之后再去玩游戲。用戶肯定是想在第一時(shí)間跳過那些 復(fù)雜的規(guī)則,先玩兒上一局爽爽再說。這時(shí)在loading頁(yè)加入一些技巧分享,可以免去用戶很多的操作失誤,并且可以為用戶帶來直觀的利益。


在用戶等待游戲加載時(shí),可以顯示一些APP操作技巧,比如說國(guó)粹手游歡樂麻將,在我每次等待游戲進(jìn)入的時(shí)候,都會(huì)提示不同的友情提示,麻將的玩法套路眾多,很適合于這樣的技巧分享。

消息互通

雖然所有的頁(yè)面加載都可以歸結(jié)為一個(gè)詞:loading。但是這其中處理的流程、加載的數(shù)據(jù)、等待的時(shí)間卻都有所差距。加載頁(yè)的存在,不僅要讓用戶知道在加載數(shù)據(jù),更要讓用戶知道在加載什么數(shù)據(jù),如果等待時(shí)間很長(zhǎng)的話,要告知用戶,等待的時(shí)間大概是多長(zhǎng)。讓用戶心里有個(gè)準(zhǔn)備。


比如說大型一點(diǎn)的手游,用戶遇到的問題就會(huì)五花八門,在移動(dòng)網(wǎng)絡(luò)下會(huì)不會(huì)消耗太多流量,在游戲加載時(shí),等待時(shí)間會(huì)不會(huì)很長(zhǎng),等等…所以在頁(yè)面加載時(shí)會(huì)有很多類型的文案,“此過程不會(huì)消耗流量”,“正在更新資源”…APP會(huì)各種各樣的手段減輕用戶的焦慮狀態(tài)。比如騰訊出的這款魂斗羅,在下載新的資源時(shí),會(huì)文案提示“正在更新資源”,同時(shí)在進(jìn)度條附近顯示出加載的總數(shù)據(jù)量,及加載速度。為的就是怕用戶在如此漫長(zhǎng)的等待過程中,因焦躁情緒而退出游戲。

我的假設(shè)

順著魂斗羅加載數(shù)據(jù)這個(gè)情況接著說,我依然會(huì)出現(xiàn)焦躁的情緒,實(shí)際上我除了等之外,沒有任何可以進(jìn)行交互的地方。我想這也是大型手游玩家共同存在的一個(gè)痛點(diǎn)。我們粗算一下,總數(shù)據(jù)量300MB,加載速度0.25MB/s,需要的時(shí)間大約是20分鐘。就算把網(wǎng)速提高到2MB/s,那也得需要兩分半鐘。

這么長(zhǎng)的等待時(shí)間,我只能瞪眼看著沒有變化的屏幕,哪怕來點(diǎn)廣告,也是新鮮幸福的事情吧。廣告算是這種長(zhǎng)等待時(shí)間的一種簡(jiǎn)單粗暴的解決方案,既可以實(shí)現(xiàn)快速變現(xiàn),又可以免去用戶等待時(shí)的無(wú)聊情緒。

還有一種是我的設(shè)想,我們可以根據(jù)APP的本質(zhì)類型,做出來一種小游戲,比如說魂斗羅這個(gè)手游,在長(zhǎng)等待時(shí)間,可以展示出來,不用的槍械打出來的火焰效果。就類似于冒著藍(lán)火噠噠響的加特林。

四、總結(jié)

Loading頁(yè)面的樣式千變?nèi)f化,我從體驗(yàn)過的loading頁(yè)面中,總結(jié)出來兩大類型,針對(duì)于先進(jìn)入再loading類型,又給出了四種解決方案。又加入了四點(diǎn)自己發(fā)現(xiàn)的細(xì)節(jié)。其實(shí)最終落地的loading頁(yè)面,不只是這四種方案中的一種,可能是一種或者多種的結(jié)合,需要產(chǎn)品的同學(xué)們根據(jù)自己的APP情況,具體的去解決。但是萬(wàn)變不離其宗,loading頁(yè)最初的設(shè)計(jì)原因就是讓用戶在等待的時(shí)候不那么無(wú)聊,不那么焦慮。本著原則出發(fā),會(huì)有更多好的方案設(shè)計(jì)出來,更多耐人尋味的細(xì)節(jié)被考慮到。

分享名稱:APPloading頁(yè)面交互設(shè)計(jì)方法
標(biāo)題來源:http://m.rwnh.cn/news46/159496.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)網(wǎng)站營(yíng)銷、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)小程序開發(fā)

廣告

聲明:本網(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)

成都app開發(fā)公司
新疆| 泽库县| 新平| 宜兴市| 四会市| 韶关市| 鲁山县| 德令哈市| 崇仁县| 阳谷县| 澄迈县| 临武县| 江山市| 蒙城县| 阳东县| 江永县| 德格县| 济南市| 井陉县| 公安县| 页游| 张家界市| 阜新| 泽库县| 阜平县| 东至县| 稷山县| 九龙坡区| 宁都县| 凉城县| 阿拉善左旗| 孝感市| 阿城市| 清河县| 修文县| 廊坊市| 法库县| 武陟县| 龙泉市| 兰西县| 伊川县|