UI界面設(shè)計

app空白頁面設(shè)計思路分享

7036

一. 空白頁面的基礎(chǔ)知識

1. 空白頁面的重要性

空白頁面是APP中重要的存在場景，但是經(jīng)常被我們忽略掉，因為我們會將關(guān)注重點放在頁面設(shè)計上，殊不知在用戶初始使用產(chǎn)品的時候，能否留下深刻的印象，并對產(chǎn)品有好感，空頁面起著很重要的作用。讓用戶明確當(dāng)前在哪里，出現(xiàn)了什么問題，應(yīng)該怎么解決；同時這也是一個很好的機(jī)會可以與用戶建立情感化鏈接，強(qiáng)化品牌形象等等。

2. 出現(xiàn)空白頁面場景

在我們的產(chǎn)品中空白頁面出現(xiàn)的場景主要有五類：

● 用戶初次使用未：比如關(guān)注、點贊、收藏、發(fā)布、評論、瀏覽記錄、購物車等等

● 用戶完成/清空了內(nèi)容：收件箱、任務(wù)列表

● 操作無結(jié)果：搜索無結(jié)果、識別無結(jié)果、篩選無結(jié)果

● 未登錄頁面

● 出錯頁面：404、無網(wǎng)絡(luò)

3. 空白頁面需要解決的問題

● 告訴用戶當(dāng)前頁面的信息狀態(tài)/出現(xiàn)了什么問題

● 告訴用戶解決方案并引導(dǎo)用戶進(jìn)行操作

● 傳達(dá)品牌定位、格調(diào)和氣質(zhì)，與用戶建立情感鏈接

二. 需要空白頁面的場景及設(shè)計思路

通過上方內(nèi)容我們了解了空白頁面出現(xiàn)的場景和可以解決的問題，接下來我們就看看在不同的場景下，空白頁面的設(shè)計思路。

1,用戶初次使用無內(nèi)容

幾乎所有的app都會出現(xiàn)這樣的場景，它的設(shè)計小技巧有以下六個方面：

① 告知用戶當(dāng)前狀態(tài)

這個時候?qū)τ脩魜碚f最重要的就是要告知用戶當(dāng)前狀態(tài)，我們也會遇到有些APP的空白頁面什么內(nèi)容都沒有，這樣很容易給用戶造成困擾，不確定這個頁面是什么情況，是網(wǎng)絡(luò)不好沒加載出來呢，還是就是沒有內(nèi)容，所以最簡單的方式是通過文字進(jìn)行最直觀的表達(dá)

● 無XXX ?-- ?無內(nèi)容 / 無結(jié)果

● 暫無XXX ?-- ?暫無評價 / 暫無訂閱

● 暫時還沒有XXX ?-- ?這里暫時還沒有文章 / 暫時還沒有歌曲

● 還沒有XXX ?-- 你還沒有自己的專題哦 / 居然還沒有訂單

● XXX是空的 ?-- ?收藏夾是空的

● 尚未XXX ?— 尚未開通專欄

有些APP為了增加趣味性，會將文案進(jìn)行了調(diào)整，用一些簡單、俏皮的語言進(jìn)行表達(dá)，會給用戶特別不一樣的感覺，一般會出現(xiàn)在購物類、音樂類、社交類等生活娛樂類產(chǎn)品中。

● 大神什么都沒有贊過耶

● 這個星球找不到

● 購物車空空的

● 居然還沒有訂單

● 蝦米也沒有 ?-- 蝦米音樂

● 空空如也，請請勤勞發(fā)帖 ?-- 最右

● 大神什么都沒贊過哎~ ?-- 最右

● 與人互動，心自徜徉 ?-- 最右

● 有喜歡的記得告訴我 ?-- 淘票票

② 提醒用戶這里會出現(xiàn)什么內(nèi)容

● 這里可以管理下載的音頻 ?-- 得到

● 下載的音頻會出現(xiàn)在這里 -- 得到

● 這里可以看到近7天你所贊過的圖片哦 ?-- 好好住

● Mark一下，養(yǎng)肥再看 ?我的收藏 ? -- 36Kr

● 你好像還未收藏過 ?如果你喜歡某篇專欄· 電子書的文章，只需要將它收藏，以后就可以在這里找到 ?尋找喜歡的互專欄 · 電子書

③ 引導(dǎo)用戶進(jìn)行操作

初次進(jìn)入的用戶面對空頁面，產(chǎn)品一方面需要讓用戶知道自己當(dāng)前的狀態(tài)或者之后這里會出現(xiàn)什么內(nèi)容，另外很多頁面其實是需要引導(dǎo)用戶進(jìn)行進(jìn)一步的操作，增加數(shù)據(jù)，互動等信息，因為只有當(dāng)用戶與平臺進(jìn)行了交互，被留下來的可能性才更大，所以現(xiàn)在很多產(chǎn)品都傾向于在空頁面引導(dǎo)用戶進(jìn)行操作。

具體的引導(dǎo)方式有兩種，一種是通過文案進(jìn)行說明，另一個更直接，會在頁面上放置操作按鈕或者鏈接，讓用戶直接到達(dá)操作頁面。當(dāng)然很多時候，這兩種方式是結(jié)合在一起滴。

● 這里需要你的態(tài)度 ?-- 36Kr

● 該合集下還沒有緩存視頻，在詳情頁可點擊離線緩存按鈕進(jìn)行緩存 ?-- ?騰訊視頻

● 來發(fā)布第一個問題吧

● 發(fā)表提問，大家?guī)湍慊卮??-- 咸魚

● 36氪還沒有你的腳印，去首頁看看吧 ?-- 36Kr

● 啊，這么好玩的站，你居然還不去關(guān)注啊 ?-- Mono

● 最近沒有和好友互動過，快去找他玩耍吧

● 暫無關(guān)注的商家去首頁逛逛吧 ? -- 餓了嗎

● 點我發(fā)樹洞 ?什么是樹洞 ?-- 最右

● 木有內(nèi)容，快來補(bǔ)充吧 ? --?最右

● 暫無關(guān)注，先去推薦里看看吧 ?-- 最右

● 無頻道真可怕，你可以在“發(fā)現(xiàn)”里關(guān)注你感興趣的

● 無法定位 ?請在設(shè)置中打開“位置”開關(guān)，以查看附近聽音樂的人

● 把私房音樂收錄到精選集，在蝦米音樂快樂地聆聽和分享 ?制作第一張精選集、聽大蝦們的精選集 -- 蝦米

● 太懶了，快與好友分享好片 ? -- 騰訊視頻

● 還沒有人留言，還不快來搶沙發(fā) ?-- 咸魚

● 怕什么真理無窮，進(jìn)一寸有一寸的歡喜 ? 開始制定學(xué)習(xí)計劃 ? 根據(jù)你的每日學(xué)習(xí)時間和頻率，制定專屬學(xué)習(xí)計劃，隨時調(diào)整，養(yǎng)成好習(xí)慣 ?-- 得到

● 收藏分類效率翻倍 ?快來創(chuàng)建第一個收藏加吧 ?新建收藏夾 ? --馬蜂窩

● 你還沒有發(fā)布圖片 ?先看看這些熱門征集?-- 好好住

● 你還沒有發(fā)布過整屋案例 ?先參觀一下住友們的家?-- 好好住

● 你還沒有相關(guān)訂單可以去看看有哪些想買的 ?-- 淘寶

● 暫無商家收藏你可以將喜歡的商家收藏到這里 ?隨便逛逛 ? -- 美團(tuán)

● 你還沒有清單，創(chuàng)建一個體驗下吧 ? 創(chuàng)建清單 ?-- 美團(tuán)

● 購物車還是空的 ?快去搶幾件折扣好貨 ? 去搶購

● 你還沒有超贊哦 ?去發(fā)布寶貝，獲得更多超贊吧！ ? 發(fā)布寶貝 ?-- ?咸魚

● 你還沒有關(guān)注任何人哦 ?別那么高冷，趕緊去關(guān)注吧 ? ?-- 咸魚

● 你還沒有粉絲哦 ?別太低調(diào)嘛，多發(fā)布寶貝能增加曝光呦 ? 發(fā)布寶貝 ?-- 咸魚

● 暫時沒給任何贊賞 ?有時候，鼓勵他人是一種心意 ? -- 蝦米

● 居然還沒有訂單 ?好東西，手慢無 ? 去逛逛

● 您還沒有相關(guān)訂單可以去看看有哪些想買的 ? -- 淘寶我的訂單

● 你還未給喜愛的TA加油呢，快去送人氣吧 ?-- 騰訊視頻

● 竟然一個腳印都沒有留下 ?明知買買買是個泥坑，還是忍不住往里踩 ?-- 淘寶

● 購物車竟然是空的 ?“再忙，也要記得買點什么犒賞自己~” ? ? -- 淘寶購物車

④ 增加情感化文案

有些APP為了增添一些情感化體驗，會在空白頁面放置一些飽含詩意的語句，這種表達(dá)方式在一些文藝類、旅游類、做飯類等一些跟生活體驗相關(guān)的APP中比較常見，比如馬蜂窩、下廚房等

馬蜂窩

● 這里暫時還沒有內(nèi)容，愿你在每一片開闊浩瀚的海面上，都有碧海藍(lán)天收入眼底

● 這里還沒有內(nèi)容，愿你在每一個薄暮晨光的早上，都能被陽光親吻

● 這里暫時還沒有內(nèi)容，愿你在每一片一望無際的田野上，清風(fēng)都摻著淡淡麥香

● 這里暫時還沒有內(nèi)容，愿你在每一條川流不息的道路上，都能捕捉到沿途的精彩

● 這里暫時還沒有內(nèi)容，愿你在每一個夜深人靜的晚上，都有一片好思緒

下廚房

● 等候著第一封信 ?美味調(diào)劑生活，訂閱你最喜歡的美食欄目，將會在這里收到最新的高人氣菜譜和美文 ? 去看看值得訂閱的欄目? -- 下廚房

● 創(chuàng)建菜譜的人事廚房里的天使 ?開始創(chuàng)建第一道菜譜? -- 下廚房

● 記錄美食，味道因回憶而美麗 ? 分享我的美食作品 ? -- 下廚房

TIM

● 通過，讓溝通更順利 ?用心傾聽，真誠對話 ?- TIM

● 來到了內(nèi)容的荒原 ?暫無本類型文件 ? ?-- TIM

● 郵件，讓工作更專業(yè) ?收不到郵件？獲取幫助 ? 開始寫郵件 ?-- TIM

⑤ 操作引導(dǎo)

用戶知道當(dāng)前頁面狀態(tài)了，但是對于功能，用戶可能不理解，或者不知道該怎么做，就需要給用戶提供一個操作指導(dǎo)入口

● 啊哦，你的文章頁空空的哦 ? 打開編輯器協(xié)作吧 ? ?新手指南 ? -- 簡書

⑥ 直接推薦內(nèi)容

可以推薦內(nèi)容或服務(wù)

● 對于購物車、訂單頁面、收藏等頁面，如果已經(jīng)知道用戶的喜好，或者平臺上有重點推的用戶或商品，可以直接在空白頁面下方放置“猜你喜歡“的模塊，用戶可以直接從下方推薦的內(nèi)容中進(jìn)行關(guān)注、收藏或選購，既讓用戶知道了當(dāng)前頁面狀態(tài)，又為產(chǎn)品增加了推薦入口。

● 招聘類網(wǎng)站未收到邀請的頁面，會在這里推薦簡歷置頂服務(wù)，告知用戶使用這項服務(wù)后簡歷被查看的次數(shù)可大幅提升！

2. 清空

評論頁面、消息頁面、任務(wù)管理頁面等需要鼓勵用戶處理完成當(dāng)前頁面任務(wù)，所以如果當(dāng)前任務(wù)處理完成后需要給用戶鼓勵性的空白頁面，讓用戶再有新任務(wù)的時候可以及時完成。

這里需要給用戶一些積極、肯定、鼓勵的語言或語氣：

● 哇，訂單全部都評論完了~ ? ?-- 美團(tuán)外賣

● 你已經(jīng)讀完所有消息了

另外，有些產(chǎn)品會在空頁面說明自己產(chǎn)品的功能賣點，增加用戶的好感度。

● 您暫時沒有可以清理的賬號 ?我們會定期幫你找出那些關(guān)店的，六個月沒有看過的，以及你可能不喜歡的賬號哦，很智能噠！

3. 未登錄提示

大多數(shù)空白頁面都是需要用戶登陸后才能看到數(shù)據(jù)的，所以當(dāng)用戶沒有登錄的時候，將登錄提示放置在當(dāng)前頁面也是個不錯的選擇

● 登錄后查看已關(guān)注內(nèi)容?-- 36氪

● 登錄后可閱讀已訂閱的欄目 ?-- 36氪

4. 已結(jié)束/未開始/被刪除

在購物類APP中經(jīng)常會有優(yōu)惠券發(fā)放、或者店面活動，當(dāng)活動結(jié)束的時候要用空白頁面承載信息告知用戶當(dāng)前狀態(tài)，來緩解用戶未得到的失落感

● 手慢了，本店代金券被搶完 ? ?-- 餓了嗎

● 本店打烊啦暫時不接受新訂單 ? -- 美團(tuán)外賣

● 優(yōu)惠券正在生產(chǎn)中，敬請期待 ?--36氪

● 問題被刪除

5. 錯誤狀態(tài)

通常有兩種情況會出現(xiàn)當(dāng)前頁面，一種是網(wǎng)絡(luò)連接失敗，一種是頁面不存在了/404頁面。

① 頁面不存在的話只需要給用戶說明當(dāng)前頁面不存在了或訪問不到，設(shè)計一種有趣好玩的情感化場景來環(huán)節(jié)緩解用戶的焦慮感。

② 網(wǎng)絡(luò)連接失敗的話，有3項信息是可以給到用戶的，一是告知用戶當(dāng)前連接失敗，二是給用戶解決問題的途徑，三是給用戶反饋的途徑

告知/引導(dǎo)

● 對不起，您訪問的頁面已不存在

● 網(wǎng)絡(luò)不給力哦點擊頁面再試試吧~ ? -- 愛奇藝

● 網(wǎng)絡(luò)未連接，請檢查網(wǎng)絡(luò)設(shè)置 ?刷新重試 ?-- 愛奇藝

● 視頻加載失敗，請稍后再試 ?點擊重試 ? -- 騰訊視頻

● 當(dāng)前網(wǎng)絡(luò)狀況復(fù)雜，請嘗試使用其它 ? ?查看連接失敗的原因及解決方法

● 網(wǎng)絡(luò)不給力，請稍后重試 ? ?重新加載 ? ?-- 手機(jī)百度

● 與你想要的文章之間，還差一點網(wǎng) ?刷新試試 ?--界面新聞

● 網(wǎng)絡(luò)請求失敗，請點擊重試 ?刷新試試

反饋

● 無法連接到網(wǎng)絡(luò) ? ?推薦你嘗試這樣解決問題>>,或直接反饋給我們，反饋QQ群：678XXX9267 ? ? -- 騰訊視頻

● 網(wǎng)絡(luò)竟然崩潰了 ?別緊張，試試看刷新頁面 ? ? ?報錯/刷新 ?-- ?淘寶

6. 搜索/篩選無結(jié)果

對用戶來說出現(xiàn)搜索無結(jié)果的錯誤類型可能會比較多，一個可能是數(shù)據(jù)讀取有問題可以引導(dǎo)用戶再次操作；一個可能是因為關(guān)鍵詞不對，需要更換關(guān)鍵詞；也可能是因為篩選條件太多，沒有交集；或者是當(dāng)前產(chǎn)品中就是會缺少某些內(nèi)容，需要用戶輔助進(jìn)行內(nèi)容的補(bǔ)充完善，所以要根據(jù)產(chǎn)品經(jīng)常存在的問題，來決定搜索無結(jié)果的內(nèi)容。

告知/引導(dǎo)

● 無結(jié)果，未搜索到匹配的項目 ?再試一次 ? --

● 未識別到歌曲，點擊重新識別

● 點擊重新識別，請確保將你的手機(jī)靠近聲音來源

● 要不...換個關(guān)鍵詞試試

● 很抱歉，沒有找到任何相關(guān)內(nèi)容 ?建議你減少一些篩選條件試試

反饋

● 沒搜到你想看的內(nèi)容？點擊這里告訴我們 ? -- 好好住

● 沒有找到想要的結(jié)果 ? 戳一下產(chǎn)品 ?-- 馬蜂窩