當遇到數據為空或異常狀態的時候，產品則會出現空白頁面，那麼這個時候，空白頁面中需要設計些什麼內容呢？又有什麼設計要點呢？
- 在什麼場景下會碰到空白頁面？
- 空白頁面有通用的設計模式嗎？
- 你在過往項目中是否有對空白設計進行經驗總結？
- … …
你是否有以上疑問，下文將為你一一解答。
01 空白頁面為什麼要設計？
對空白狀態的設計，主要有以下幾種原因：
- 用戶可以知道本頁面將放置什麼內容
- 安撫用戶疑惑或焦慮的情緒，解決用戶的困惑
- 可以刺激用戶創造內容或提高點擊轉化
02 什麼場景下會碰到空白頁面？
1. 數據為空
a 『用戶無權限』
指用戶無權限訪問當前頁面，但當前頁面又不能對用戶進行隱藏的場景。
b 『搜索無結果』
指搜索情況下無結果的場景。
c 『篩選無結果』
指篩選情況下無結果的場景。
d 『頁面無數據』
指當前頁面無數據，該場景很常見，對於需要用戶操作、系統產生，隨著時間積累逐漸產生數據的頁面在App中比比皆是。
這些頁面在初次訪問時都是無數據狀態，比如：系統通知列表、我的優惠券頁面、我的賬單頁面等等。
還有一種情況就是若以上頁面支持用戶清空數據，那麼清空之後也是恢復到了無數據的狀態。
2. 異常狀態
a 『網絡異常』
指因為網絡連接權限未開啟、網絡連接狀態較差等原因導致網絡異常而無法正常訪問頁面內容的場景。
b 『服務器異常』
指因為服務器異常（服務器中斷、服務器過載等）導致數據加載失敗無法正常傳輸到前端展示的場景。
c 『加載失敗』
在數據加載過程中，導致異常的原因可能是：
- 網絡異常導致加載失敗
- 服務器請求數據失敗導致加載失敗
所以該場景的對應設計策略視導致加載失敗的原因而定，不用單獨將『加載失敗』當作一個獨立的場景來設計相應的空白頁面。
03 空白頁面設計模式
1. 圖案(可選)+文案
適用場景：『用戶無權限』、『搜索無結果』、『篩選無結果』、『頁面無數據』
指通過缺省頁占位空白區域，缺省頁包含的元素有圖案及文案，文案必選，圖案則根據需要看是否設計。
舉例1：普通員工訪問企業App的管理頁面，提示『用戶無權限』。
舉例2：去哪兒酒店『搜索無結果』。
舉例3-1：滴答清單安排任務流程，對已有清單進行篩選，『篩選無結果』顯示如下：
舉例3-2：去哪兒對某旅游地的游玩攻略進行篩選，『篩選無結果』顯示如下：
舉例4：去哪兒我的點評『頁面無數據』。
2. 圖案(可選)+文案+引導操作
主要通過“創建操作、功能說明、點擊重試、反饋操作”等幾種方式來引導用戶操作。
a 創建操作
常用場景：『搜索無結果』、『頁面無數據』
缺省頁中除了圖案(可選)和文案元素，還附上添加/創建數據的功能入口，用戶點擊後去到可以“創建”數據的頁面，比如瀏覽商品添加到購物車，比如去書城將喜歡的書加入書架等。
舉例1：去哪兒某城市搜索某地點『搜索無結果』，為用戶提供創建地點的操作入口，可借助用戶已知的信息豐富地點庫。
舉例2-1：Booking未登錄狀態進入“我的訂單”列表，因無法讀取用戶信息，故此時『頁面無數據』，頁面中提供登錄或導入訂單按鈕用戶操作以讀取相關的訂單信息。
舉例2-2：Booking進入消息列表頁面，消息列表『頁面無數據』展示如下，同時附上了預定酒店的按鈕，用戶點擊後即跳轉到酒店預定頁面。
b 功能說明
常用場景：『頁面無數據』
缺省頁中除了圖案(可選)和文案元素，通過附上功能說明的形式告知用戶如何去“創造”數據，在缺省頁中無法加功能入口的情況下，可以選擇該設計模式。
舉例：滴答清單某日任務『頁面無數據』狀態提示用戶點擊+按鈕添加。
c 點擊重試
常用場景：『網絡異常』、『服務器異常』、『加載失敗』
缺省頁中除了圖案(可選)和文案元素，因為該空白狀態是“暫時”的，所以給用戶提供點擊重試的按鈕。
舉例1：去哪兒機票查詢因『網絡異常』導致查詢失敗。
舉例2：小米金融貸，進入貸款頁面『服務器異常』。
d 反饋操作
常用場景：『搜索無結果』
缺省頁中除了圖案(可選)和文案元素，還附上用戶反饋的功能入口，基於用戶反饋數據，在優化搜索的同時也提供了用戶反饋訴求的入口。
舉例：微信讀書『搜索無結果』頁面的底部提供一個入口讓用戶填寫書籍名稱和作者，基於用戶的反饋數據，微信讀書在後續書城書目的收錄工作中，就可以優先收錄用戶反饋率較高的書籍了。
3. 圖案(可選)+文案+推薦內容
常用場景：『搜索無結果』、『頁面無數據』
舉例1-1：Booking酒店某旅游景點關鍵詞『搜索無結果』場景下，會推薦其他景點的相關搜索結果。
舉例1-2：微信讀書書架搜索某關鍵詞『搜索無結果』，為用戶推薦書城中的搜索結果。
舉例2-1：去哪兒我的作品模塊關註的人『頁面無數據』的話，會為我推薦一些大v用戶。
舉例2-2：去哪兒我的作品模塊喜歡的作品『頁面無數據』的話，會為我推薦一些廣受好評的作品。
4. 預置內容
預置內容指事先準備好一批真實案例的數據，而不是以缺省頁的形式呈現給用戶。
常用場景：工具型App的『頁面無數據』
舉例：滴答清單初次使用者，還沒有自己創建的數據，進入App看到的是示例數據，同時結合使用說明在示例清單中呈現出來，用戶既知道真實數據是這樣的，也能夠按教程快速上手。
04 空白頁面設計策略
從設計模式來看，除了“預置內容”模式，另外3種設計模式均包含圖案和文案元素，不管是圖案設計還是文案設計，均有一定的設計策略可循。
1. 圖案篇
在空白頁面設計中，圖案的重要性最低，可以選擇沒有，有的話也可以錦上添花，起到向用戶傳達情緒或增強App視覺特色的作用。
若選擇有，圖案的設計要和文案傳達的意思保持一致，不能圖案表達的是一種意思，文案表達的是另外一種意思。
圖案可以Icon化，同時也可以結合App品牌形象進行插畫設計。
2. 文案篇
文案是必選項，不同空白場景下的文案設計有所不同。
a 數據為空
『用戶無權限』要告知用戶無權限訪問的原因和解決方案，比如B端產品常用的解決方案就是聯繫管理員添加權限。
『搜索無結果』告知用戶搜索無數據的結果，如有必要可推薦相關內容，或為用戶提供創建或反饋數據的入口。
『篩選無結果』一般直接告知篩選無結果。
『頁面無數據』文案設計有幾個方向：
- 告訴用戶這裡將會存放什麼數據
- 給用戶一個主動創造數據的理由，比如通過話術引起用戶心理共鳴
- 若頁面無數據會給用戶造成困惑，則可以說明原因打消用戶的困惑
b 異常狀態
『網絡異常』指出當前狀態為網絡異常，並給出解決方案，註意這裡不需要詳細告知因為什麼具體原因導致網絡異常的，原因的告知對用戶無太大意義，甚至可能給用戶造成困惑。
『服務器異常』指出當前狀態為服務器異常，並給出解決方案，同理，無需描述詳細的原因。
『加載失敗』加載失敗主要會由網絡異常或服務器異常造成，所以文案設計可依以下而定：
- 由網絡異常引起加載失敗，同『網絡異常』文案設計策略
- 由服務器異常引起加載失敗，同『服務器異常』文案設計策略
總結
以上，我在空白頁面設計中會先將碰到的場景進行對應，然後結合“設計策略”選擇適合的“設計模式”，不要完全照搬（不要誤以為某設計模式只適用於上文中提到的空白場景），可以根據功能和業務需求進行調整或創新。
相關閱讀
《關於異常狀態的設計總結》
作者：辛小仲；一名正在成長的交互設計師，公眾號：辛小仲。
本文由 @辛小仲 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Pexels，基於CC0協議