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 原創發布于人人都是產品經理。未經許可，禁止轉載。