B端空狀態(tài)異常頁面設(shè)計指南
空狀態(tài)是空白的狀態(tài),是對沒有數(shù)據(jù)頁面的補充,一種對零數(shù)據(jù)的設(shè)計形式。良好的空狀態(tài)頁面設(shè)計,能夠給用戶帶來更好的交互體驗。本文作者對此進行了分析,希望對你有幫助。
一、概念
很多新手設(shè)計師在設(shè)計產(chǎn)品界面的時候很容易忽略空狀態(tài)的頁面設(shè)計,但如果我們的產(chǎn)品擁有良好的空狀態(tài)設(shè)計,那么它就可以幫助呈現(xiàn)出更加引人注目的用戶體驗,同時進行更有效的交互。
空狀態(tài)是空白的狀態(tài),是對沒有數(shù)據(jù)頁面的補充,一種對零數(shù)據(jù)的設(shè)計形式。
空狀態(tài)是B端產(chǎn)品中不可缺少的一部部分undefined以網(wǎng)購為例,回想一下常見的空狀態(tài)情況:
- 搜索商品卻沒有找到的狀態(tài)
- 查看商品時加載不出來或出錯的狀態(tài)
- 購物車?yán)餂]有商品時的狀態(tài)
- 地址管理頁面中收貨地址為空的狀態(tài)
- 提交訂單后的狀態(tài)
良好的空狀態(tài)能夠讓用戶感知當(dāng)前系統(tǒng)的真實狀態(tài)undefined明確下一步的操作。例如,當(dāng)用戶在表格中進行篩選的時候輸入對應(yīng)的篩選內(nèi)容,無匹配結(jié)果需要反饋一個空狀態(tài)告知用戶,讓用戶感知系統(tǒng)狀態(tài)是在執(zhí)行篩選后的無匹配項,而不是系統(tǒng)不工作,并且此時可以告知用戶的下一步操作,如更改關(guān)鍵詞等。
1. 異常狀態(tài)類型
最常見的空狀態(tài)類型有:
- 首次使用——新產(chǎn)品沒有內(nèi)容可以顯示時,例如打開新注冊的印象筆記時會遇到這種情況。
- 內(nèi)容被清除——當(dāng)用戶完成類似清空消息或收件箱等操作后,會出現(xiàn)一個空白的屏幕。
- 出現(xiàn)錯誤——產(chǎn)品由于網(wǎng)絡(luò)問題造成離線時,會出現(xiàn)空狀態(tài)的使用。
- 無結(jié)果——如果用戶進行搜索,但是查詢內(nèi)容為空時會發(fā)生這種情況。
- 由于B端產(chǎn)品使用場景是在工作中進行,對于B端的業(yè)務(wù)產(chǎn)品來說,會多一些異常狀態(tài)。B端產(chǎn)品常見的異常狀態(tài)有:
1)403
含義:
通常指沒有權(quán)限訪問此頁面。在B端產(chǎn)品中,由于用戶角色的權(quán)限關(guān)系,導(dǎo)致一個頁面部分用戶可以看到操作,部分用戶無法打開。當(dāng)沒有權(quán)限的用戶打開鏈接后就會提示403。
對應(yīng)操作:
由于是權(quán)限關(guān)系,表示此用戶無權(quán)限操作或查看該頁面,并且這種場景出現(xiàn)概率極低,通常給返回首頁按鈕即可,用戶點擊可返回首頁或工作臺。
2)404
含義:
404是一種http狀態(tài)碼,意思是:所請求的頁面不存在或已被刪除。
對應(yīng)操作:
該頁面不存在或者被刪除,可以給返回首頁按鈕,引導(dǎo)用戶返回首頁進行其他業(yè)務(wù)操作。
3)500
含義:
服務(wù)器遇到了一個未曾預(yù)料的狀況,導(dǎo)致了它無法完成對請求的處理。一般來說,這個問題都會在服務(wù)器端的源代碼出現(xiàn)錯誤時出現(xiàn)。
對應(yīng)操作:
對于服務(wù)器出現(xiàn)的故障,可以給用戶一個刷新的按鈕或者關(guān)閉按鈕。這種情況下頁面無法進行其他操作。
4)無結(jié)果
含義:
最常出現(xiàn)在B端查詢界面中,輸入查詢條件后,無匹配的結(jié)果
對應(yīng)操作:
可以提醒用戶重新輸入查詢條件試試
5)數(shù)據(jù)為空
含義:
數(shù)據(jù)為空更多出現(xiàn)在新用戶剛進入系統(tǒng)的場景,沒有新的數(shù)據(jù)產(chǎn)生,會出現(xiàn)數(shù)據(jù)為空的表格、詳情等。
對應(yīng)操作:
數(shù)據(jù)為空的情況下在B端產(chǎn)品中比較少見,也需要區(qū)分情況。任務(wù)型的數(shù)據(jù)為空可以給予用戶一個贊或者鼓勵的正向反饋,讓用戶的本能層感知到產(chǎn)品的情感化。
二、如何設(shè)計B端異常狀態(tài)頁面
我總結(jié)了B端異常狀態(tài)的頁面,大概是五種設(shè)計類型:
1. 純配圖、圖形
此形式在商業(yè)產(chǎn)品中使用較少,多見于飛機稿及一些小眾產(chǎn)品。一圖勝千言是理想的情況,真實場景下,孤零零的一張配圖無法闡述當(dāng)前發(fā)生了什么以及應(yīng)該如何擺脫困境。不建議使用。
2. 純文案
純文案能夠簡潔清晰描述問題或狀態(tài),幫助用戶快速定位問題點。適用于極簡產(chǎn)品、對視覺沒有極致要求的B端產(chǎn)品,有個性設(shè)計語言的小眾產(chǎn)品等。缺點是略顯單調(diào),無法進一步觸發(fā)場景,產(chǎn)生共鳴。創(chuàng)造更多價值。
3. 插畫+文案標(biāo)題
比較主流的空狀態(tài)內(nèi)容形式,通過精心設(shè)計的插畫陳述產(chǎn)品狀態(tài),引導(dǎo)體驗路徑甚至傳達品牌價值,輔之對應(yīng)的精確文案。從傳達信息的角度幫助用戶理解當(dāng)前所處的狀態(tài),遇到的問題,以及解決方案。
如果你決定要使用插圖和文案,請確保它們要有層次感,不會相互影響。一個好的插圖能夠為頁面帶來足夠的樂趣和參與度,此時,你可以使用簡單且常用的文案。
4. 插畫+文案標(biāo)題+按鈕
按鈕有更強的操作指引效果,強引導(dǎo)用戶去點擊操作按鈕,此時操作按鈕的跳轉(zhuǎn)邏輯很重要,需要能夠在異常狀態(tài)的場景下真正幫助用戶解決問題或緩解焦慮。
5. 動畫+文案標(biāo)題+描述文字
在空狀態(tài)設(shè)計中,使用友好且合適的文案內(nèi)容能夠帶來意想不到的效果。搭配上特別設(shè)計的插畫,可以幫助你設(shè)計出一個成功的空狀態(tài)。所以空狀態(tài)的設(shè)計我們應(yīng)該不容忽略!
常見的設(shè)計形式:
1)線性、面性、2.5D、3D
2)中性色、中性色+彩色、彩色
3)是否包含人物插畫
異常狀態(tài)頁面的視覺設(shè)計使用中性或幽默的語氣;與產(chǎn)品的品牌風(fēng)格保持一致。文案需要遵循的規(guī)則:文案傳達出有用的信息;在不需要操作的情況下,告訴用戶頁面的作用。
本文由 @晨屹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
很有啟發(fā)!這種非正常情況正是我的思維漏洞,獲益匪淺謝謝!