App空白頁淺析：人性化的考慮問題

本文主要對於表象的空白頁產生類型進行分析，探求背後相應的解決方案。

目錄：

• 空白頁產生原因
• 空白頁解決方案

一、空白頁產生原因

空白頁的產生原因大致可以分為如下三類。Null、弱網斷網、伺服器異常，下面具體的解釋一下三種情況。

Null

這種情況比較常見，用戶在某一模塊的數據是空的，比如說我的B站移動端，在收藏的話題這一塊，我沒有收藏任何話題，那麼這一塊的內容，手機向伺服器請求數據，返回來的就會是一個空值。

弱網斷網

手機處於網路信號不好或者沒網的時候，比如說在地下室或者飛機上，網路信號沒有，這時候用戶點進去某一個模塊，還是以B站舉例子，在我沒有聯網的情況下，進行刷新的操作，手機因為沒有網路環境差，無法向伺服器請求數據，「手機 -> 伺服器」的鏈路出現問題，也會出現空白頁的情況。

伺服器異常

這種情況手機信號沒有問題，伺服器的埠異常，這塊短時間不好找出相應的案例，伺服器異常的原因可能是由於伺服器在升級，或者其他一些原因，「伺服器 -> 手機」的鏈路出現問題，導致數據無法從伺服器傳向手機，同樣會出現空白頁。

二、空白頁解決方案

梳理清楚空白頁產生原因之後，我們來看看針對這些原因，都有哪些處理方式。

Null：用戶在某一模塊的數據是空。

這種情況下，會有兩種處理方式，一種是靜態的通過文案提示用戶，通過這樣的方式來告知用戶為什麼這個頁面是白的，沒有內容，就像剛才展示的B站的樣式那樣（上圖左），這裡沒有什麼技術上或者產品上的問題，只是文案的內容上會有區別。

另一種方式是引導用戶的行為，如上圖右展示，在知乎的個人中心 – 我的創作- 專欄頁面，我目前還沒有申請專欄，所以會產生空白頁，產生原因是null，知乎也和B站一樣，給了文案提示：還沒有內容；同時給了一個申請專欄的入口，去引導用戶的操作。引導用戶這樣的解決方案可能是通過用戶反饋一步一步迭代出來的，用戶在瀏覽到專欄這一步的時候，有申請專欄的訴求，知乎的產品同學於是乎就在文案提示的基礎之上，設計了這樣的一個申請入口。

這裡我們總結一下針對於null的解決方案，很顯然引導用戶是在文案提示的基礎之上通過產品迭代出來的，我猜測在文案提示之前，最早還會有一種更簡單的呈現形式，那就是完全空白放在那裡，因為用戶的極大困惑，完全的空白讓用戶不知道是什麼原因而產生的空白頁，才會出現的文案提示，在現網上應該很少能看見純白的空白頁了我認為。

文案提示的解決方案，最重要的就是內容的呈現，要能通過文字或者圖形，明確地告知用戶是什麼原因才產生了空白頁；其次就是文案及圖形的特色，對比知乎和B站兩個風格截然不同的app，他們的文案及圖形都遵循了自己app的特色，知乎是知識分享的平台，走嚴謹風；B站充斥著00后、95后、彈幕，走的是二次元的風格。

再談一下引導用戶，這個功能要根據不同的模塊因地制宜，拿知乎舉例子，如果用戶的關注列表是空的，設置這樣的一個引導功能，讓用戶去關注一些KOL，對於促活及留存都是很有必要的。但是如果用戶的餘額是空的，為零，這時候再引導用戶去充值，就顯得有點畫蛇添足了。

弱網斷網、伺服器異常

弱網斷網、伺服器異常，籠統的都可以概括為網路的異常，這兩個的解決方案通常是相同的。現網上對於網路異常的解決方案如下流程圖

當從伺服器請求失敗的時候，無論是「手機 -> 伺服器」鏈路出現問題，還是「伺服器 -> 手機」鏈路出現問題，都會首先訪問緩存，看看緩存有沒有該數據的緩存，若是有，展示緩存，若沒有，則展示相應的文案提示。

最終落地到頁面，會有兩種展示形式，一是文案提示（下圖左），二是在緩存的基礎上用toast提示用戶（下圖中、下圖右）。

對於哪些頁面會有本地的緩存，這裡也要有注意，我們應該把常用的頁面緩存在本地，對於不經常用到的頁面，每次點開都要請求伺服器的數據，這樣會最大限度的減少app的內存佔用。

雖然弱網斷網、伺服器異常都可以歸結於網路異常，但是二者的產生原因並不相同，用戶通過自己的操作解決空白頁的方法也就不同，弱網斷網可以人為的尋找更好地網路，但是伺服器異常的情況，用戶無論進行什麼操作，都無法改變現狀。

在這裡的文案提示或者toast提示，文字信息一定要準確的反映出問題的原因，比如說上圖左的文案提示，寫的就很模糊，載入失敗的原因既可以是斷網，也可以是伺服器異常，用戶看見這個文案，在不知道他自己的網路環境的情況下，用戶很可能做的是一遍一遍的刷新，但由於網路產品的空白頁，刷新是無濟於事的，這樣不明確的文案大大增加了用戶操作的成本，不友好。

反觀中圖的文案，電波無法到達哦，雖然扎眼也無法理解，但是再讀一遍可以理解出來其中的意思，至少文案是沒有歧義的。

這裡推薦右圖的文案，文案提示清晰明了，雖然提示框的形式是toast，但是他的欄位內容的指令性已經和須知差不多了。

再說一下伺服器異常的文案提示，我認為也是有必要向用戶告知實際情況，雖然部分用戶不理解伺服器異常是什麼鬼，但也不能用網路異常這樣的模糊字眼，可能靠譜的文案「伺服器異常，您可能需要安靜的等待片刻」，至少不會讓用戶盲目的刷新或者重連網路。

我在這個模塊有兩種功能性的設想，一是提示框的選取，對於這種必要進行的操作（若不採取措施就無法使用產品），我認為是可以用須知或者選擇這樣的提示形式的。

上圖是我設想的一種弱網斷網的解決方案（隨手畫的線框圖，不要太嫌棄），用強烈一些的提示框，選擇的方法進行提示，讓用戶意識到弱網斷網會影響到自己的產品體驗，點擊知道了返回到緩存界面，點擊去設置，跳轉到用戶的設置界面，去手動更改網路選擇。這樣的解決方案我認為可以減少用戶操作的成本，也更人性化。

三、總結

空白頁的產生方式會有很多，解決處理的方法也是五花八門，但是最精髓的一點，我認為要從用戶的角度出發，空白頁展示出來的瞬間，用戶是困惑的，產品要解決的問題實際上是明確地告知用戶原因，並且可能的去引導用戶去改變這樣的情況。

作者：Mitsuizq，

本文由 @Mitsuizq 原創發佈於人人都是產品經理。未經許可，禁止轉載。