這篇文章轉自公眾號海鹽社，作者小火焰，一來主要是讓大家理解空白頁面的重要性，二是給大家提供設計空白頁面的思路，希望對大家有用。
一. 空白頁面的基礎知識
1. 空白頁面的重要性
空白頁面是APP中重要的存在場景，但是經常被我們忽略掉，因為我們會將關注重點放在頁面設計上，殊不知在用戶初始使用產品的時候，能否留下深刻的印象，並對產品有好感，空頁面起著很重要的作用。讓用戶明確當前在哪裡，出現了什麼問題，應該怎麼解決；同時這也是一個很好的機會可以與用戶建立情感化鏈接，強化品牌形象等等。
2. 出現空白頁面場景
在我們的產品中空白頁面出現的場景主要有五類：
● 用戶初次使用未：比如關注、點贊、收藏、發佈、評論、瀏覽記錄、購物車等等
● 用戶完成/清空了內容：收件箱、任務列表
● 操作無結果：搜索無結果、識別無結果、篩選無結果
● 未登錄頁面
● 出錯頁面：404、無網絡
3. 空白頁面需要解決的問題
● 告訴用戶當前頁面的信息狀態/出現了什麼問題
● 告訴用戶解決方案並引導用戶進行操作
● 傳達品牌定位、格調和氣質，與用戶建立情感鏈接
二. 需要空白頁面的場景及設計思路
通過上方內容我們瞭解了空白頁面出現的場景和可以解決的問題，接下來我們就看看在不同的場景下，空白頁面的設計思路。
1、用戶初次使用無內容
幾乎所有的app都會出現這樣的場景，它的設計小技巧有以下六個方面：
① 告知用戶當前狀態
這個時候對用戶來說最重要的就是要告知用戶當前狀態，我們也會遇到有些APP的空白頁面什麼內容都沒有，這樣很容易給用戶造成困擾，不確定這個頁面是什麼情況，是網絡不好沒加載出來呢，還是就是沒有內容，所以最簡單的方式是通過文字進行最直觀的表達
● 無XXX -- 無內容 / 無結果
● 暫無XXX -- 暫無評價 / 暫無訂閱
● 暫時還沒有XXX -- 這裡暫時還沒有文章 / 暫時還沒有歌曲
● 還沒有XXX -- 你還沒有自己的專題哦 / 居然還沒有訂單
● XXX是空的 -- 收藏夾是空的
● 尚未XXX — 尚未開通專欄
有些APP為了增加趣味性，會將文案進行了調整，用一些簡單、俏皮的語言進行表達，會給用戶特別不一樣的感覺，一般會出現在購物類、音樂類、社交類等生活娛樂類產品中。
● 大神什麼都沒有贊過耶
● 這個星球找不到
● 購物車空空的
● 居然還沒有訂單
● 蝦米也沒有 -- 蝦米音樂
● 空空如也，請請勤勞發帖 -- 最右
● 大神什麼都沒贊過哎~ -- 最右
● 與人互動，心自徜徉 -- 最右
● 有喜歡的記得告訴我 -- 淘票票
② 提醒用戶這裡會出現什麼內容
● 這裡可以管理下載的音頻 -- 得到
● 下載的音頻會出現在這裡 -- 得到
● 這裡可以看到近7天你所贊過的圖片哦 -- 好好住
● Mark一下，養肥再看 我的收藏 -- 36Kr
● 你好像還未收藏過 如果你喜歡某篇專欄· 電子書的文章，只需要將它收藏，以後就可以在這裡找到 尋找喜歡的互專欄 · 電子書
③ 引導用戶進行操作
初次進入的用戶面對空頁面，產品一方面需要讓用戶知道自己當前的狀態或者之後這裡會出現什麼內容，另外很多頁面其實是需要引導用戶進行進一步的操作，增加數據，互動等信息，因為只有當用戶與平臺進行了交互，被留下來的可能性才更大，所以現在很多產品都傾向於在空頁面引導用戶進行操作。
具體的引導方式有兩種，一種是通過文案進行說明，另一個更直接，會在頁面上放置操作按鈕或者鏈接，讓用戶直接到達操作頁面。當然很多時候，這兩種方式是結合在一起滴。
● 這裡需要你的態度 -- 36Kr
● 該合集下還沒有緩存視頻，在詳情頁可點擊離線緩存按鈕進行緩存 -- 騰訊視頻
● 來發布第一個問題吧
● 發表提問，大家幫你回答 -- 鹹魚
● 36氪還沒有你的腳印，去首頁看看吧 -- 36Kr
● 啊，這麼好玩的站，你居然還不去關注啊 -- Mono
● 最近沒有和好友互動過，快去找他玩耍吧
● 暫無關注的商家 去首頁逛逛吧 -- 餓了嗎
● 點我發樹洞 什麼是樹洞 -- 最右
● 木有內容，快來補充吧 -- 最右
● 暫無關注，先去推薦裡看看吧 -- 最右
● 無頻道真可怕，你可以在“發現”裡關注你感興趣的
● 無法定位 請在設置中打開“位置”開關，以查看附近聽音樂的人
● 把私房音樂收錄到精選集，在蝦米音樂快樂地聆聽和分享 製作第一張精選集、聽大蝦們的精選集 -- 蝦米
● 太懶了，快與好友分享好片 -- 騰訊視頻
● 還沒有人留言，還不快來搶沙發 -- 鹹魚
● 怕什麼真理無窮，進一寸有一寸的歡喜 開始制定學習計劃 根據你的每日學習時間和頻率，制定專屬學習計劃，隨時調整，養成好習慣 -- 得到
● 收藏分類 效率翻倍 快來創建第一個收藏加吧 新建收藏夾 --馬蜂窩
● 你還沒有發佈圖片 先看看這些熱門徵集 -- 好好住
● 你還沒有發佈過整屋案例 先參觀一下住友們的家 -- 好好住
● 你還沒有相關訂單 可以去看看有哪些想買的 -- 淘寶
● 暫無商家收藏 你可以將喜歡的商家收藏到這裡 隨便逛逛 -- 美團
● 你還沒有清單，創建一個體驗下吧 創建清單 -- 美團
● 購物車還是空的 快去搶幾件折扣好貨 去搶購
● 你還沒有超讚哦 去發佈寶貝，獲得更多超讚吧！ 發佈寶貝 -- 鹹魚
● 你還沒有關注任何人哦 別那麼高冷，趕緊去關注吧 -- 鹹魚
● 你還沒有粉絲哦 別太低調嘛，多發佈寶貝能增加曝光呦 發佈寶貝 -- 鹹魚
● 暫時沒給任何讚賞 有時候，鼓勵他人是一種心意 -- 蝦米
● 居然還沒有訂單 好東西，手慢無 去逛逛
● 您還沒有相關訂單 可以去看看有哪些想買的 -- 淘寶我的訂單
● 你還未給喜愛的TA加油呢，快去送人氣吧 -- 騰訊視頻
● 竟然一個腳印都沒有留下 明知買買買是個泥坑，還是忍不住往裡踩 -- 淘寶
● 購物車竟然是空的 “再忙，也要記得買點什麼犒賞自己~” -- 淘寶購物車
④ 增加情感化文案
有些APP為了增添一些情感化體驗，會在空白頁面放置一些飽含詩意的語句，這種表達方式在一些文藝類、旅遊類、做飯類等一些跟生活體驗相關的APP中比較常見，比如馬蜂窩、下廚房等
馬蜂窩
● 這裡暫時還沒有內容，願你在每一片開闊浩瀚的海面上，都有碧海藍天收入眼底
● 這裡還沒有內容，願你在每一個薄暮晨光的早上，都能被陽光親吻
● 這裡暫時還沒有內容，願你在每一片一望無際的田野上，清風都摻著淡淡麥香
● 這裡暫時還沒有內容，願你在每一條川流不息的道路上，都能捕捉到沿途的精彩
● 這裡暫時還沒有內容，願你在每一個夜深人靜的晚上，都有一片好思緒
下廚房
● 等候著第一封信 美味調劑生活，訂閱你最喜歡的美食欄目，將會在這裡收到最新的高人氣菜譜和美文 去看看值得訂閱的欄目 -- 下廚房
● 創建菜譜的人事廚房裡的天使 開始創建第一道菜譜 -- 下廚房
● 記錄美食，味道因回憶而美麗 分享我的美食作品 -- 下廚房
TIM
● 通過，讓溝通更順利 用心傾聽，真誠對話 - TIM
● 來到了內容的荒原 暫無本類型文件 -- TIM
● 郵件，讓工作更專業 收不到郵件？獲取幫助 開始寫郵件 -- TIM
⑤ 操作引導
用戶知道當前頁面狀態了，但是對於功能，用戶可能不理解，或者不知道該怎麼做，就需要給用戶提供一個操作指導入口
● 啊哦，你的文章頁空空的哦 打開編輯器協作吧 新手指南 -- 簡書
⑥ 直接推薦內容
可以推薦內容或服務
● 對於購物車、訂單頁面、收藏等頁面，如果已經知道用戶的喜好，或者平臺上有重點推的用戶或商品，可以直接在空白頁面下方放置“猜你喜歡“的模塊，用戶可以直接從下方推薦的內容中進行關注、收藏或選購，既讓用戶知道了當前頁面狀態，又為產品增加了推薦入口。
● 招聘類網站未收到邀請的頁面， 會在這裡推薦簡歷置頂服務，告知用戶使用這項服務後簡歷被查看的次數可大幅提升！
2. 清空
評論頁面、消息頁面、任務管理頁面等需要鼓勵用戶處理完成當前頁面任務，所以如果當前任務處理完成後需要給用戶鼓勵性的空白頁面，讓用戶再有新任務的時候可以及時完成。
這裡需要給用戶一些積極、肯定、鼓勵的語言或語氣：
● 哇，訂單全部都評論完了~ -- 美團外賣
● 你已經讀完所有消息了
另外，有些產品會在空頁面說明自己產品的功能賣點，增加用戶的好感度。
● 您暫時沒有可以清理的賬號 我們會定期幫你找出那些關店的，六個月沒有看過的，以及你可能不喜歡的賬號哦，很智能噠！
3. 未登錄提示
大多數空白頁面都是需要用戶登陸後才能看到數據的，所以當用戶沒有登錄的時候，將登錄提示放置在當前頁面也是個不錯的選擇
● 登錄後查看已關注內容 -- 36氪
● 登錄後可閱讀已訂閱的欄目 -- 36氪
4. 已結束/未開始/被刪除
在購物類APP中經常會有優惠券發放、或者店面活動，當活動結束的時候要用空白頁面承載信息告知用戶當前狀態，來緩解用戶未得到的失落感
● 手慢了，本店代金券被搶完 -- 餓了嗎
● 本店打烊啦 暫時不接受新訂單 -- 美團外賣
● 優惠券正在生產中，敬請期待 --36氪
● 問題被刪除
5. 錯誤狀態
通常有兩種情況會出現當前頁面，一種是網絡連接失敗，一種是頁面不存在了/404頁面。
① 頁面不存在的話只需要給用戶說明當前頁面不存在了或訪問不到，設計一種有趣好玩的情感化場景來環節緩解用戶的焦慮感。
② 網絡連接失敗的話，有3項信息是可以給到用戶的，一是告知用戶當前連接失敗，二是給用戶解決問題的途徑，三是給用戶反饋的途徑
告知/引導
● 對不起，您訪問的頁面已不存在
● 網絡不給力哦 點擊頁面再試試吧~ -- 愛奇藝
● 網絡未連接，請檢查網絡設置 刷新重試 -- 愛奇藝
● 視頻加載失敗，請稍後再試 點擊重試 -- 騰訊視頻
● 當前網絡狀況複雜，請嘗試使用其它 查看連接失敗的原因及解決方法
● 網絡不給力，請稍後重試 重新加載 -- 手機百度
● 與你想要的文章之間，還差一點網 刷新試試 --界面新聞
● 網絡請求失敗，請點擊重試 刷新試試
反饋
● 無法連接到網絡 推薦你嘗試這樣解決問題>>,或直接反饋給我們，反饋QQ群：678XXX9267 -- 騰訊視頻
● 網絡竟然崩潰了 別緊張，試試看刷新頁面 報錯/刷新 -- 淘寶
6. 搜索/篩選無結果
對用戶來說出現搜索無結果的錯誤類型可能會比較多，一個可能是數據讀取有問題可以引導用戶再次操作；一個可能是因為關鍵詞不對，需要更換關鍵詞；也可能是因為篩選條件太多，沒有交集；或者是當前產品中就是會缺少某些內容，需要用戶輔助進行內容的補充完善，所以要根據產品經常存在的問題，來決定搜索無結果的內容。
告知/引導
● 無結果，未搜索到匹配的項目 再試一次 --
● 未識別到歌曲，點擊重新識別
● 點擊重新識別，請確保將你的手機靠近聲音來源
● 要不...換個關鍵詞試試
● 很抱歉，沒有找到任何相關內容 建議你減少一些篩選條件試試
反饋
● 沒搜到你想看的內容？點擊這裡告訴我們 -- 好好住
● 沒有找到想要的結果 戳一下產品 -- 馬蜂窩
結語：
1. 空白頁面需要解決3個的問題
● 告訴用戶當前頁面的信息狀態/出現了什麼問題
● 告訴用戶解決方案並引導用戶進行操作
● 傳達品牌定位、格調和氣質，與用戶建立情感鏈接
2. 會出現空白頁面的場景
● 用戶初次使用未
● 用戶完成/清空了內容
● 操作無結果
● 未登錄頁面
● 出錯頁面
閱讀更多 UI巴巴 的文章
