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

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)并顯示出來(lái)。這里你可能會(huì)比較差異，自己平時(shí)用的app里面好像很少有這種交互方法。

確實(shí)，這樣的交互比較少見(jiàn)，我在AppStore排行榜前一百位的應(yīng)用里面，也沒(méi)有見(jiàn)到這樣的交互方式。平時(shí)在移動(dòng)端能接觸到這種交互方式的，應(yīng)該是我們手機(jī)的開(kāi)機(jī)過(guò)程，加載完所有模塊之后才進(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)品。所以這樣的交互越來(lái)越少見(jiàn)了。

先進(jìn)入再loading

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

二、方案

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

全部鎖定

下一個(gè)頁(yè)面中全屏被鎖定，只顯示出轉(zhuǎn)菊花(加載中)，在頁(yè)面沒(méi)有全部加載完的時(shí)候，用戶沒(méi)有任何其他的交互操作的機(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)。但是用戶又沒(méi)有其他的方式改變這樣的情況，只能是等待頁(yè)面全部加載完，或者是殺死進(jìn)程。

部分鎖定

一個(gè)新的頁(yè)面被分為兩個(gè)部分，一是靜態(tài)數(shù)據(jù)部分，在下載apk的時(shí)候就已經(jīng)設(shè)置好的，比如說(shuō)返回退出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)菊花，沒(méi)有被鎖定的部分是靜態(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ù)與上一次打開(kāi)該應(yīng)用時(shí)的回調(diào)參數(shù)是否一致，若是一致，向本地緩存調(diào)用參數(shù)，查看一下本地是否有該頁(yè)面的緩存，部分模塊可能存在于緩存之中，如果有，則先展示出來(lái)緩存的內(nèi)容，讓頁(yè)面上先有一些內(nèi)容供用戶瀏覽。每當(dāng)加載完一個(gè)模塊的數(shù)據(jù)之后，顯示出來(lái)一個(gè)模塊的內(nèi)容，沒(méi)加載出來(lái)的顯示轉(zhuǎn)菊花。

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

默認(rèn)樣式填充

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

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

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

進(jìn)度條

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

技巧分享

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

在用戶等待游戲加載時(shí)，可以顯示一些APP操作技巧，比如說(shuō)國(guó)粹手游歡樂(lè)麻將，在我每次等待游戲進(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)備。

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

我的假設(shè)

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

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

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

四、總結(jié)

Loading頁(yè)面的樣式千變?nèi)f化，我從體驗(yàn)過(guò)的loading頁(yè)面中，總結(jié)出來(lái)兩大類型，針對(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ì)出來(lái)，更多耐人尋味的細(xì)節(jié)被考慮到。

分享名稱：APPloading頁(yè)面交互設(shè)計(jì)方法
標(biāo)題來(lái)源：http://www.bm7419.com/news46/159496.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站營(yíng)銷、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、小程序開(kāi)發(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)