APP loading頁面:淺析「先進入再loading」的交互方法
loading頁面的展示方式多種多樣,我總結了幾點和大家一起探討交流。
一、類型:
Loading頁從邏輯上講,會有兩種分類:一種是先loading再進入、另一種是先進入再loading。兩種分類從順序上看,就是加載數據和進入頁面,哪個放在前面。下面我們具體的看一下這兩種分類。
先loading再進入
在一個頁面中點擊一個button或者一個入口時,app會先加載完下一個頁面的所有數據之后,再進行跳轉操作,下一個頁面的所有樣式布局、所有的數據,都是在加載完該頁面所有的模塊之后,才會跳轉并顯示出來。這里你可能會比較差異,自己平時用的app里面好像很少有這種交互方法。
確實,這樣的交互比較少見,我在AppStore排行榜前一百位的應用里面,也沒有見到這樣的交互方式。平時在移動端能接觸到這種交互方式的,應該是我們手機的開機過程,加載完所有模塊之后才進入新的頁面。這樣做的原因在于,新的頁面極其重要,為了不影響新頁面的體驗效果,才會做成先loading再進入。但同時這樣做會讓用戶產生一定的等待焦慮,全部數據加載完,可能會需要很長一段時間,在這段時間里,用戶只能在本頁面看著轉菊花,卻不能體驗新的功能或者產品。所以這樣的交互越來越少見了。
先進入再loading
在一個頁面中點擊一個button或者一個入口時,app會先進行跳轉操作,下一個頁面所需要的數據一步一步的加載出來。這樣的交互方式比較常見,也比較符合用戶的使用行為,用戶點一個button,進入新的頁面,肯定是迫不及待的想體驗新頁面的功能或者產品,所以先進入新的頁面,再一步一步的加載,也成為了主流的交互方法。
二、方案:
這里討論的方案,是類型二:先進入再loading的交互方法的實現方案。方案一:先loading再進入的使用情況比較少見,我們就不做討論了。
全部鎖定
下一個頁面中全屏被鎖定,只顯示出轉菊花(加載中),在頁面沒有全部加載完的時候,用戶沒有任何其他的交互操作的機會(包括返回退出button)。這樣的交互方案,實際上是和類型一“先loading再進入”是一個意思,都得是新的頁面所有數據加載完之后,用戶才可以有交互操作。
全部鎖定這樣的方案,存在著很大的弊端,當網絡環境比較差,處于弱網斷網的情況下,或者所需要的加載的數據量龐大,加載的時間可能會很長。但是用戶又沒有其他的方式改變這樣的情況,只能是等待頁面全部加載完,或者是殺死進程。
部分鎖定
一個新的頁面被分為兩個部分,一是靜態數據部分,在下載apk的時候就已經設置好的,比如說返回退出button等,不隨著頁面的變動而變動。二是動態數據部分,每次進入新的頁面時,app會向服務器請求動態數據部分的數據信息,這時頁面中動態數據部分被鎖定,顯示轉菊花,沒有被鎖定的部分是靜態數據部分,方便用戶在弱網斷網、數據量龐大這些情況發生時,可以選擇退出,使用app內的其他功能。
如大眾點評的loading方案,在進入一個新的頁面時,需要加載的部分是內容部分,頂部的框架是在app喚醒時就已經加載好的,不隨著每個新的頁面變化而發生改變。方便用戶在弱網斷網、數據量龐大的情況下做出相應的改變。
局部loading
在一個新的頁面被加載時,首先會向服務器發送請求參數,看看回調參數與上一次打開該應用時的回調參數是否一致,若是一致,向本地緩存調用參數,查看一下本地是否有該頁面的緩存,部分模塊可能存在于緩存之中,如果有,則先展示出來緩存的內容,讓頁面上先有一些內容供用戶瀏覽。每當加載完一個模塊的數據之后,顯示出來一個模塊的內容,沒加載出來的顯示轉菊花。
這是現網上比較常用的一個方法,比如微信用的就是這種交互的方法,我把網斷掉,模擬弱網斷網的環境,由于彩票不在微信錢包的第一屏,故之前沒有加載到緩存中,數據從服務器返回到app之前,首先加載出來緩存中的數據,緩存中沒有的數據,用系統的空白來代替。
默認樣式填充
在等待回調的數據時,為了在頁面不顯示空的值,一般都會顯示轉菊花,來告知用戶該頁面處于加載中,有些APP在轉菊花的部分,顯示的是app的logo圖,并且配上一定的文案說明,如上圖的映兔視頻。樣式統一并且傳遞的風格也是一致的。讓用戶對APP有一致的印象,給用戶留下好感。
三、細節
Loading頁,會有很多值得關注的細節問題,我根據我見過的loading頁面,總結出來下面三條,最后一點是我根據自己的痛點做出的設想。
進度條
直觀的反映出數據加載的進度,能有效的減輕用戶等待的焦慮。我們最常見的進度條,可能就是微信的公眾號文章了。進度條主體顏色為綠色,和微信logo的顏色相同,且在白色的背景襯托下顯得明亮突出。由于公眾號文章可能存在較多圖片或者視頻音頻,所以加載的時間長短不一,進度條的存在恰好的反映了加載的進度,減輕了用戶等待的焦慮。
技巧分享
這種交互常見于手游,由于手游的規則邏輯都極其復雜,用戶很難會認真的讀完用戶手冊或者幫助說明之后再去玩游戲。用戶肯定是想在第一時間跳過那些 復雜的規則,先玩兒上一局爽爽再說。這時在loading頁加入一些技巧分享,可以免去用戶很多的操作失誤,并且可以為用戶帶來直觀的利益。
在用戶等待游戲加載時,可以顯示一些APP操作技巧,比如說國粹手游歡樂麻將,在我每次等待游戲進入的時候,都會提示不同的友情提示,麻將的玩法套路眾多,很適合于這樣的技巧分享。
消息互通
雖然所有的頁面加載都可以歸結為一個詞:loading。但是這其中處理的流程、加載的數據、等待的時間卻都有所差距。加載頁的存在,不僅要讓用戶知道在加載數據,更要讓用戶知道在加載什么數據,如果等待時間很長的話,要告知用戶,等待的時間大概是多長。讓用戶心里有個準備。
比如說大型一點的手游,用戶遇到的問題就會五花八門,在移動網絡下會不會消耗太多流量,在游戲加載時,等待時間會不會很長,等等…所以在頁面加載時會有很多類型的文案,“此過程不會消耗流量”,“正在更新資源”…APP會各種各樣的手段減輕用戶的焦慮狀態。比如騰訊出的這款魂斗羅,在下載新的資源時,會文案提示“正在更新資源”,同時在進度條附近顯示出加載的總數據量,及加載速度。為的就是怕用戶在如此漫長的等待過程中,因焦躁情緒而退出游戲。
我的假設
順著魂斗羅加載數據這個情況接著說,我依然會出現焦躁的情緒,實際上我除了等之外,沒有任何可以進行交互的地方。我想這也是大型手游玩家共同存在的一個痛點。我們粗算一下,總數據量300MB,加載速度0.25MB/s,需要的時間大約是20分鐘。就算把網速提高到2MB/s,那也得需要兩分半鐘。
這么長的等待時間,我只能瞪眼看著沒有變化的屏幕,哪怕來點廣告,也是新鮮幸福的事情吧。廣告算是這種長等待時間的一種簡單粗暴的解決方案,既可以實現快速變現,又可以免去用戶等待時的無聊情緒。
還有一種是我的設想,我們可以根據APP的本質類型,做出來一種小游戲,比如說魂斗羅這個手游,在長等待時間,可以展示出來,不用的槍械打出來的火焰效果。就類似于冒著藍火噠噠響的加特林。
四、總結
Loading頁面的樣式千變萬化,我從體驗過的loading頁面中,總結出來兩大類型,針對于先進入再loading類型,又給出了四種解決方案。又加入了四點自己發現的細節。其實最終落地的loading頁面,不只是這四種方案中的一種,可能是一種或者多種的結合,需要產品的同學們根據自己的APP情況,具體的去解決。但是萬變不離其宗,loading頁最初的設計原因就是讓用戶在等待的時候不那么無聊,不那么焦慮。本著原則出發,會有更多好的方案設計出來,更多耐人尋味的細節被考慮到。
作者:Mitsuizq,微信公眾號:Mitsuizq
本文由 @Mitsuizq 原創發布于人人都是產品經理。未經許可,禁止轉載。
你好呀,你說的這個痛點,有的軟件就解決啦。比如劍網三,游戲很大100G了快,下載需要一天兩天,不過他可下載微端,下載一個基本地圖,然后邊玩后臺自動下載其他地圖,不影響體驗,還有一個手游大概1G,叫云裳羽衣,一個換裝游戲,下載中可以給人物打扮捏臉,有一些可以使用的小功能。就很好!這倆游戲都是西山居做得,國內游戲知名企業啦!
謝謝指導,有空了我體驗下
對我這種小白來說,已經夠用學習中 ??
寫文不易,鼓勵下。關于Loading細節部分,其實還有挺多的Loading細節,建議之后補充
嗯嗯,小白還得向大佬多請教 ??