優秀空白頁指南

09-03

前言

大家可能覺得空白頁只是 app 附加頁面，不必花費過得精力去做。但其實並不是這樣的，因為好的空白頁能在空數據或者意外情況下挽留用戶，提高產品的留存率。接下來我們從設計和功能的角度來判定一個優秀的空白頁到底具備那些品質？

1.空白頁的定義

2.空白頁的設計四大要素

3.空白頁的作用

4.總結

空狀態頁的定義

空狀態，顧名思義就是空白的狀態。出現這種狀況的兩大原因是：數據缺失+網路異常。

這兩個狀態基本都是災難性。就好比用戶褲子都脫了，你卻給他個空白頁面，用戶難免會感到失望，情緒低落。

用戶無法接受的原因有兩種，首先是不符合自己的預期，當用戶熱情高漲的時候，你潑了一盆涼水，造成了極大的心裡落差。其次是網路異常，原則上不是產品的錯，但是用戶不會透過現象看本質，心神領會的想這裡可能沒信號或者自己手機問題，用戶這個時候多半會被「簡單歸因」的想法所左右，主管的批評產品並且潛意識裡將其貼上不靠譜的標籤。

但是好的空白頁卻能幫助你解決這些問題，空白頁最大的作用就是緩解用戶的焦慮的情緒，避免負面情緒的產生，進而減少對產品的產品負面形象的評價。並在功能上指導教育用戶完成當前任務，能夠順利執行之後的操作，更好的服務用戶。

由此我們可以看出一個合格的空白頁是多麼重要，接下來我們就來探究一下怎樣才是一個合格的空白頁，我們從會從設計和功能的角度進行分析。

空白頁設計的4大要素

一個好的空白頁設計並不是天馬行空的想像，而是在一定約束下的最佳表現。好的空白頁設計一定是符合以下四項設計需求，如下圖所示例：

A.品牌

品牌具有戰略意義，所以說品牌設計會始終貫穿如意。我們作為設計師的最終目的服務於產品和公司，所以我們的設計必須遵循公司的品牌調性。

品牌的設計是貫穿一個產品的始終，是對產品標準化、規則化的基礎，品牌設計使我們看到產品的第一印象。例如我們在生活中，通過的品牌規範的設計語言就能得知這是什麼品牌的產品。我們舉一個工業設計的例子，以寶馬汽車為例：

寶馬汽車將品牌的設計語言在所有產品上始終貫穿如一，即使不同類型的汽車，我們仍可以通過設計語言看出品牌的調性，即使摘掉 logo 我們仍可以一眼看出這是寶馬的產品。

我們評判一個好的空白頁首先就是看到整體設計是否符合其產品的品牌設計。如果不符合品牌設計的基礎調性，會讓用戶感到迷茫，心想這是？？？所以符合品牌設計是我們設計的空白頁的基礎，我們以騰訊動漫為例：

騰訊動漫是的logo是一個卡通人物（鵝娘）。在空白頁中同樣也是通過對卡通人物的形象延展展，通過塑造卡通任務驚訝的表情來詮釋空白頁中的內容缺失。值得誇讚的是騰訊動漫整體空白頁都保持了高度的一致的品牌性，鵝娘的形象充分運用到了所用空白頁中。

B.創意

空白頁是設計師充分發揮創意的地方，好的創意是幫助用戶趕走的枯燥的利器，能讓用戶感到耳目一新的感覺。使原本枯燥無味的空白頁顯得生動有趣，讓用戶更加有動力去執行之後的操作。甚至有一點忍不住截圖分享的衝動。

這裡我們以 Google 瀏覽器的網路異常的空頁面為例：

Google 瀏覽器網路異常的空頁面，是一個迷路的灰色像素小恐龍。畫面好像在講「我迷失在網路的世界，找不到有效的數據而變得灰暗，需要你的幫助，讓我回到我的世界。」通過簡單的創意來引發用戶的思考，讓用戶主動去參與網路異常的修復。

C.情感

由於空白的本身內容的確實會給用戶造成情緒上焦慮，所以說情感的設計是空白頁必備的元素之一。

好的情感設計能夠有效撫慰用戶的焦躁的心情，減少用戶的負面情緒，並能讓用戶的轉移到當前操作上，避免用戶因為情緒的不滿而放棄操作。我們以嗶哩嗶哩為例：

嗶哩嗶哩的默認收藏夾的空白頁以自身的卡通 IP 形象進行延展設計，加以情緒化的表達。如上圖通過類比營造一個收作業的場景，因為不能及時上交作業的而感到悲傷哭泣，比喻數據缺失的狀態。通過哭泣的表情讓用戶產生同情心，並且企圖幫助她，這樣有效的減少了用戶負面的情緒。

D.規則

規則是為了保證產品的一致性，特別是平台性質的產品，需要保持每一個模塊和頁面的統一性，空頁面屬於產品的一部分，一個優秀的空白頁必定是遵循產品的設計規則。通過設計規則可以將用戶可以在設計形式做到高度統一，以及可以將設計語言貫穿始終，並減少用戶的認知壓力。我們以same為例：

通過圖例我們可以看出，same 在不同內容的空白頁高度遵循產品設計的規則，使用相同的圖形插畫和組合形式，通過這種形式可以有效的減少用戶的認知壓力，用戶能夠迅速識別頁面的狀態，從而進行下一步的操作。

空白頁的作用

空狀態就好像一粒緩衝劑，當頁面沒有內容或者出現異常的時候，空白頁需要想盡各種辦法挽留用戶，讓用戶留下來，並能指導用戶解決問題。接下來我們看看的空白頁具備哪些主要功能才是合格的！

空白頁的主要作用是：教育用戶、取悅用戶、引導用戶。

A.教育用戶

一個優秀的空白頁的首要目的是教育用戶如何使用 App，理解當前頁面的功能，引導用戶執行下一步操作。並且必須符合3W原則：

何物（What）：這個頁面在講什麼

何地（Where）：告知用戶當前的位置，以及接下來可以幹什麼

何時（When）：解釋此處空白在什麼情況下才能出現有效的數據

3W原則告訴用這個頁面在說什麼，以及用戶當前所處的位置，並解釋在什麼情況下會出現空白頁面。我們以滴答清單為例：

滴答清單日曆頁面告訴用戶的這是一個根據日程建立任務的頁面，現在處於任務的空白期可以通過右下角的「+」號來添加任務，只有通過添加任務才能出現有效的數據。

B.取悅用戶

優秀的空白頁能夠取悅用戶，讓用戶的保持預約的心情。用戶的愉悅保證了產品的留存，即使在空狀態頁面的情況，用戶也願意留下來，根據信息指示完成任務操作。我們以嗶哩嗶哩為例：

嗶哩嗶哩通過取悅用戶通過使用自身的動漫 IP 來引發用戶的情感共鳴，通過動漫人物「好奇、可愛」的表情來感染用戶登陸。

C.引導用戶

當用戶進入一個初始狀態的頁面的時候，需要用戶創建數據的時候，我們需要能夠快速引導用戶進行操作，而不是用戶在一頓摸索之後最終放棄操作。

我們需要通過一下三種形式來引導用戶：激勵用戶、說服用戶、指導用戶。

激勵用戶：用激勵化的語言和設計去推動你的用戶。我們以貓頭鷹旅行為例：

貓頭鷹綠旅行通過激勵性的語言：探索並收藏您最愛的創意。來鼓勵用戶操作去「創建行程。」

說服用戶：提醒用戶他們使用您的產品時將會收到的好處。這裡我們以ASOS為例：

ASOS 其中的英文翻譯是：「我公司免費提供8次免費送貨和退貨」。直接通過利益的吸引來誘導用戶參與。

指導用戶：推薦並向他們展示開始使用的最佳方式。提供指引性的按鈕，以指導用戶看到空白屏幕所需的操作，來獲得更有意義的內容。這裡我們以人人視頻為例：

人人視頻的視頻空頁面，通過蜘蛛俠的卡通形象下落的狀態，配以文字和按鈕，來指導用戶點擊刷新。

總結

通過上述內容，我們了解到如何做一個合格的空白頁，首先在設計層面上要滿足用戶「品牌、創意、情感、規則」的四要素，其次在功能上要「教育用戶」、「取悅用戶」、「引導用戶」，這樣才能成為一個合格的空白頁設計。我們需要在形式和功能上雙向滿足用戶。

超實用！3個小技巧幫你設計優秀的空白頁面

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中的空白頁設計

https://zhuanlan.zhihu.com/p/24361388