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

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

一、類型

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

先loading再進(jìn)入

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

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

先進(jìn)入再loading

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

二、方案

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

全部鎖定

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

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

部分鎖定

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

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

局部loading

在一個(gè)新的頁面被加載時(shí)，首先會向服務(wù)器發(fā)送請求參數(shù)，看看回調(diào)參數(shù)與上一次打開該應(yīng)用時(shí)的回調(diào)參數(shù)是否一致，若是一致，向本地緩存調(diào)用參數(shù)，查看一下本地是否有該頁面的緩存，部分模塊可能存在于緩存之中，如果有，則先展示出來緩存的內(nèi)容，讓頁面上先有一些內(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í)，為了在頁面不顯示空的值，一般都會顯示轉(zhuǎn)菊花，來告知用戶該頁面處于加載中，有些APP在轉(zhuǎn)菊花的部分，顯示的是app的logo圖，并且配上一定的文案說明，如上圖的映兔視頻。樣式統(tǒng)一并且傳遞的風(fēng)格也是一致的。讓用戶對APP有一致的印象，給用戶留下好感。

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

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

進(jìn)度條

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

技巧分享

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

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

消息互通

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

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

我的假設(shè)

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

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

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

四、總結(jié)

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

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

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

廣告

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