優秀空白頁の修養
空白頁看似簡單，但稍不用心就會造成使用者的流失。希望這次的分享能對大家在空白頁的設計上有所幫助。
前言
大家可能覺得空白頁只是 app 附加頁面，不必花費過得精力去做。但其實並不是這樣的，因為優秀的空白頁能在空資料或者意外情況下挽留使用者，提高產品的留存率。接下來我們從設計和功能的角度來判定一個優秀的空白頁到底具備那些修養？
目錄
1.空白頁的定義
2.空白頁的設計四大要素
3.空白頁的作用
4.總結
空狀態，顧名思義就是空白的狀態。出現這種狀況的兩大原因是： 資料缺失+網路異常。
這兩個狀態基本都是災難性。就好比使用者褲子都脫了，你卻給他個空白頁面，使用者難免會感到失望，情緒低落。
使用者無法接受的原因有兩種，首先是不符合自己的預期，當用戶熱情高漲的時候，你潑了一盆涼水，造成了極大的 心裡落差 ；其次是網路異常，原則上不是產品的錯，但是使用者不會透過現象看本質，心神領會的想這裡可能沒訊號或者自己手機問題，使用者這個時候多半會被“ 簡單歸因 ”的想法所左右，主觀的批評產品並且潛意識裡將其貼上不靠譜的標籤。
但是好的空白頁卻能幫助你解決這些問題，空白頁最大的作用就是緩解使用者焦慮的情緒，避免負面情緒的產生，進而減少對產品的產品負面形象的評價。並在功能上指導教育使用者完成當前任務，能夠順利執行之後的操作，更好的服務使用者。
由此我們可以看出一個合格的空白頁是多麼重要，接下來我們就來探究一下怎樣才是一個合格的空白頁，我們從會從設計和功能的角度進行分析。
一個好的空白頁設計並不是天馬行空的想象，而是在一定約束下的最佳表現。好的空白頁設計一定是符合以下四項設計需求，如下圖所示例：
A.品牌
品牌具有戰略意義，所以說品牌設計會始終貫穿如意。我們作為設計師的最終目的服務於產品和公司，所以我們的設計必須遵循公司的品牌調性。
品牌的設計是貫穿一個產品的始終，是對產品標準化、規則化的基礎，品牌設計使我們看到產品的第一印象。例如我們在生活中，通過的品牌規範的設計語言就能得知這是什麼品牌的產品。我們舉一個工業設計的例子，以寶馬汽車為例：
寶馬汽車將品牌的設計語言在所有產品上始終貫穿如一，即使不同型別的汽車，我們仍可以通過設計語言看出品牌的調性，即使摘掉 logo 我們仍可以一眼看出這是寶馬的產品。
我們評判一個好的空白頁首先就是看到整體設計是否符合其產品的品牌設計。如果不符合品牌設計的基礎調性，會讓使用者感到迷茫，心想這是？？？所以符合品牌設計是我們設計的空白頁的基礎，例如騰訊動漫：
騰訊動漫是的logo是一個卡通人物（鵝娘）。在空白頁中同樣也是通過對卡通人物的形象延展，通過塑造卡通任務驚訝的表情來詮釋空白頁中的內容缺失。值得誇讚的是騰訊動漫整體空白頁都保持了高度的一致的品牌性，鵝孃的形象充分運用到了所有空白頁中。
B.創意
空白頁是設計師充分發揮創意的地方，好的創意是幫助使用者趕走的枯燥的利器，能讓使用者感到耳目一新的感覺。使原本枯燥無味的空白頁顯得生動有趣，讓使用者更加有動力去執行之後的操作。甚至有一點忍不住截圖分享的衝動。
這裡我們以 Google 瀏覽器的網路異常的空頁面為例：
Google 瀏覽器網路異常的空頁面，是一個迷路的灰色畫素小恐龍。畫面好像在講“我迷失在網路的世界，找不到有效的資料而變得灰暗，需要你的幫助，讓我回到我的世界。”通過簡單的創意來引發使用者的思考，讓使用者主動去參與網路異常的修復。
C.情感
由於空白的本身內容的確實會給使用者造成情緒上焦慮，所以說情感的設計是空白頁必備的元素之一。
好的情感設計能夠有效撫慰使用者的焦躁的心情，減少使用者的負面情緒，並能讓使用者的轉移到當前操作上，避免使用者因為情緒的不滿而放棄操作。我們以嗶哩嗶哩為例：
嗶哩嗶哩的預設收藏夾的空白頁以自身的卡通 IP 形象進行延展設計，加以情緒化的表達。如上圖通過類比營造一個收作業的場景，因為不能及時上交作業的而感到悲傷哭泣，比喻資料缺失的狀態。通過哭泣的表情讓使用者產生同情心，並且企圖幫助她，這樣有效的減少了使用者負面的情緒。
D.規則
規則是為了保證產品的一致性，特別是平臺性質的產品，需要保持每一個模組和頁面的統一性，空頁面屬於產品的一部分，一個優秀的空白頁必定是遵循產品的設計規則。通過設計規則可以將使用者可以在設計形式做到高度統一，以及可以將設計語言貫穿始終，並減少使用者的認知壓力。我們以same為例：
通過圖例我們可以看出，same 在不同內容的空白頁高度遵循產品設計的規則，使用相同的圖形插畫和組合形式，通過這種形式可以有效的減少使用者的認知壓力，使用者能夠迅速識別頁面的狀態，從而進行下一步的操作。
空狀態就好像一粒緩衝劑，當頁面沒有內容或者出現異常的時候，空白頁需要想盡各種辦法挽留使用者，讓使用者留下來，並能指導使用者解決問題。接下來我們看看的空白頁具備哪些主要功能才是合格的！
空白頁的主要作用是：教育使用者、取悅使用者、引導使用者。
A.教育使用者
一個優秀的空白頁的首要目的是教育使用者如何使用 App，理解當前頁面的功能，引導使用者執行下一步操作。並且必須符合3W原則：
a.何物（What）：這個頁面在講什麼
b.何地（Where）：告知使用者當前的位置，以及接下來可以幹什麼
c .何時（When）：解釋此處空白在什麼情況下才能出現有效的資料
3W原則告訴用這個頁面在說什麼，以及使用者當前所處的位置，並解釋在什麼情況下會出現空白頁面。我們以滴答清單為例：
滴答清單日曆頁面告訴使用者的這是一個根據日程建立任務的頁面，現在處於任務的空白期可以通過右下角的“+”號來新增任務，只有通過新增任務才能出現有效的資料。
B.取悅使用者
優秀的空白頁能夠取悅使用者，讓使用者的保持預約的心情。使用者的愉悅保證了產品的留存，即使在空狀態頁面的情況，使用者也願意留下來，根據資訊指示完成任務操作。我們以嗶哩嗶哩為例：
嗶哩嗶哩通過取悅使用者通過使用自身的動漫 IP 來引發使用者的情感共鳴，通過動漫人物“好奇、可愛”的表情來感染使用者登陸。
C.引導使用者
當用戶進入一個初始狀態的頁面的時候，需要使用者建立資料的時候，我們需要能夠快速引導使用者進行操作，而不是使用者在一頓摸索之後最終放棄操作。
我們需要通過一下三種形式來引導使用者： 激勵使用者、說服使用者、指導使用者。
激勵使用者：用激勵化的語言和設計去推動你的使用者。例如貓頭鷹旅行：
貓頭鷹綠旅行通過激勵性的語言：探索並收藏您最愛的創意。來鼓勵使用者操作去“建立行程。”
說服使用者：提醒使用者他們使用您的產品時將會收到的好處。例如 ASOS ：
ASOS 其中的英文翻譯是：“我公司免費提供8次免費送貨和退貨”。直接通過利益的吸引來誘導使用者參與。
指導使用者：推薦並向他們展示開始使用的最佳方式。提供指引性的按鈕，以指導使用者看到空白螢幕所需的操作，來獲得更有意義的內容。例如人視訊為：
人人視訊的視訊空頁面，通過蜘蛛俠的卡通形象下落的狀態，配以文字和按鈕，來指導使用者點選重新整理。
通過上述內容，我們瞭解到一個合格的空白頁，首先在設計層面上要滿足使用者“品牌、創意、情感、規則”的四要素，其次在功能上要“教育使用者”、“取悅使用者”、“引導使用者”，這樣才能成為一個合格的空白頁設計。我們需要在形式和功能上雙向滿足使用者。
參考連結
超實用！3個小技巧幫你設計優秀的空白頁面
ofollow,noindex" target="_blank"> https://www.uisdc.com/design-empty-data-page#
互動乾貨！幫你消滅「空狀態介面」的5個常用方法
https://www.uisdc.com/kill-empty-ui-state#
從零開始帶你掌握空狀態設計的正確方法
https://www.uisdc.com/empty-states-design-correct-way
看似最簡單的空白頁，騰訊微雲的高手是如何設計的？
https://www.uisdc.com/weiyun-empty-states-design
移動端app中的空白頁設計