文章主要為大家解析空白頁的存在意義及其設計技巧，希望對你有益。

為什么經常做APP產品設計的分析，分析與熟悉一款app產品，對于之后的設計邏輯能夠更加清晰，而對于產品邏輯也會慢慢有一個更好的認知。之后會通過用戶需求與用戶體驗繼續與大家討論，一個優秀的設計，其背后蘊含了大量的可學習知識，感興趣的朋友可以訂閱?；貧w正題，這篇文章要為大家解析空白頁的存在意義及設計技巧。

一、概念

空白頁：

空白頁是什么？

空白頁指的是當前頁面內容為空白，或者當前頁面內容錯誤、丟失等，與原本跳轉頁面不相符的頁面，一般以白色頁面為主，所以一般被稱之為空白頁。

有人會問，為什么不叫缺失頁、404頁，而叫做空白頁。因為空白頁不僅是白色的頁面，而且還包括了頁面中的錯誤頁、缺失頁等等，還是不理解的可以繼續往下看。

二、分類

以下就空白頁的類別、產生原因、用戶使用場景與解決方案為大家闡述空白頁的人性化設計。

先給大家看一張關系圖縷清他們各者之間的關系：

數據加載頁

為什么把加載頁歸結到空白頁中，其實加載頁經常會被人所忽略，這里的加載頁是指頁面的正在加載。數據還未讀取完成，頁面肯定數據不齊全，那么一般加載頁有兩種展示方式，這里不涉及開發，僅說明設計展示方式：一種是全頁式加載，一種是模塊式加載（這里的說法可能與開發有所出入，僅為了方便設計與產品閱讀）。

產生原因：數據讀取中

使用場景：當用戶第一次打開應用時或刷新時，肯定會有一個數據加載的過程，對于用戶來說，這就是產品的第一印象。有時候數據加載速度非?？炜梢院雎约虞d頁的存在，但是考慮有些使用場景，用戶還是會看到加載頁面，像之前體驗的一款競品，剛打開的時候除了頂部導航欄和底部標簽欄，所有東西都是空白，正好那時候是在網絡環境非常差的情況下，用戶心理預期肯定覺得這個產品不是很靠譜。

有道、簡書、貓眼電影（全屏加載）

Null頁（數據為空）

這個頁面應用較為廣泛，在產品中多稱為無數據頁面，與以上的服務器異常頁有所區別，在上述中頁面中，服務器無法提供正常的信息數據，但是在null頁里，是服務器本身就不存在相關的數據，也就是數據為空。

產生原因：無數據信息

使用場景：在使用產品時候，需要用戶創建與存儲信息時，應該有相關的提示引導內容，而當頁面不存在數據時，空白頁面會讓用戶存在失落感，怎么樣引導這種失落感讓用戶創建與存儲信息內容呢？

例如使用抖音時，在“我”的頁面中有個人作品、喜歡、故事等板塊，如果你沒有發布過任何作品，頁面肯定是空的，但是在點擊“作品”模塊時，其對應的“發布”按鈕上方會有個窗口提示，這對于用戶來說比簡單的問題提示來的更加淺顯易懂，但是要注意，不是所有Null頁都合適這種做法，過多的動效、圖形引導會讓用戶感到視覺疲勞，要分場合并適可而止。

例：QQ、易信、same

推薦：抖音

網絡異常頁

網絡異常情況可謂是時有發生，在使用產品的過程中，碰到這類情況的用戶肯定也覺得莫名其妙。但是網絡異常情況也就一般只有兩種：

1、斷網弱網：完全沒有網絡環境，或者網絡信號弱無法上傳與加載數據

2、切換網絡：例如在wifi情況下看視頻突然切換為移動數據網，就會存在。

產生原因：斷網弱網、切換網絡

使用場景：用戶正當瀏覽信息時，突然打不開產品頁面，呈現的是空白頁面，并沒有什么征兆，在連續刷新了幾次之后還是一樣，用戶不知道問題在哪里，肯定會離開產品去使用另外同類的產品。斷網弱網并不是產品能夠解決的問題，但是產品如果不給予用戶正確的信息引導，用戶必然會把問題歸責于產品本身。

• QQ：斷網弱網
• 優酷：斷網弱網
• bilibili：網絡切換

服務器/系統異常頁

是當前在瀏覽頁面時，服務器無法提供正常的信息數據，或者服務器無響應，且不知道原因所返回的頁面。一般在APP端比較少見，但是也會存在，無論是網頁設計還是app設計，這個頁面的設計都是必不可少的。

產生原因：服務器異常、系統異常、請求未響應。

使用場景：對于用戶來說，時間是非常寶貴的，產品的目的是滿足用戶需求，當用戶無法滿足需求時，不滿的情緒便會增加，積累了不滿的情緒有可能導致用戶對產品失去信賴感，從而拋棄產品。

用戶的焦躁情緒很大部分來自于對于當前頁面的不解，正如用戶在逛街時，看到一件超級喜歡的商品，想上去詢問價格，老板不在，員工也不在，這時用戶從開始的疑惑，到離開時的煩躁，都是在沒有得到相應信息的反饋情況下產生的。

三、解決方案

?無數據或數據異常：

無數據情況下，要引導用戶行為，比如當前需要用戶創作的頁面，但是用戶作品為空時，可以適當添加“創作”按鈕或者跳轉接口，指引用戶當前頁面內容是可編輯可添加的。再比如社交中的關注標簽，當用戶還沒有關注的話題時，可以推薦話題讓用戶關注。

數據異常時，用戶需要知道為什么、怎么做，通過圖和文來為用戶解釋當前情況，即便你把服務器存在的問題一一和用戶說明，但是用戶想知道的并不是你服務器中出現的詳細問題，用戶想知道是簡單的問題與解決的方法。

數據加載頁：

上面我們說了，當app第一次打開時，可以采用全頁式加載或模塊式加載，全屏加載頁面要要注意的是，為用戶傳達頁面正在運行的信息，這時候如果有動效畫面能讓用戶有耐心停留當前頁面，而不會因枯燥乏味地等待失去產品信任感。

模塊加載也可以用在刷新的情況下，能夠確切地告訴用戶還需要加載多少內容，在網絡較慢時，可以采用占位符進行設計，但是如資訊類，新聞類應用就不適宜使用圖案說明，頁面會顯得更加復雜。

網絡情況：

網絡情況存在的問題必須強調當前發生了什么，要怎么做，這點和數據異常是相似的，遵循“用戶不會犯錯”原則，如提示文案可以為“當前網絡異?！?、“請檢查當前網絡”、“無法連接到網絡等”。

可以按需添加一個“點擊重連”的按鈕，來規避因為用戶自身當前網絡不穩定或者網絡切換導致的讀取問題。

可以適當添加圖案來為用戶解釋當前問題，但是有些頁面不適合添加圖案，比如視頻頁面。但是，忌諱沒有任何提示信息，這里我指下微博的，首頁在沒有網絡的情況下，刷下不了，但是沒有任何提示，這可能會讓用戶感到困惑，不建議這樣的處理狀況。

四、總結

針對空白頁的設計可以見仁見智，不一定是要按照特定的設計樣式去解決自己產品中的問題，但是空白頁的設計是必要的，它的意義在于為用戶解釋說明，并引導用戶行為，可以說是非常重要，用戶需要知道自己現在所處的位置、所處的環境，然后來判斷接下來的行為，所以盡可能去引導用戶快捷地完成操作，減輕用戶認知負擔，才不失為一款好的產品。

作者：JaylonG，一位對產品有著濃厚興趣的設計尸。歡迎進行行業交流。

本文由 @Jaylon 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議