干貨:一篇文章搞定10種異常狀態(tài)
筆者例舉了使用產(chǎn)品過程中容易出現(xiàn)的10種異常狀態(tài),一起來看看吧~
在做設(shè)計(jì)的過程中,大部分設(shè)計(jì)師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態(tài)。卻容易忽略產(chǎn)品中容易出現(xiàn)的各種異常狀態(tài)。
當(dāng)用戶停留任何一個(gè)界面,進(jìn)行任何一個(gè)操作都可能發(fā)生異常狀態(tài)。
如果接到每個(gè)需求都去制定一次異常狀態(tài),這樣的后果可能會(huì)使得產(chǎn)品的不同模塊、不同流程,異常狀態(tài)都不一致。全局規(guī)范性被破壞,同時(shí)設(shè)計(jì)師的效率也降低。
因此全局制定異常狀態(tài)規(guī)范,后續(xù)就不需要再設(shè)計(jì),開發(fā)直接復(fù)用異常狀態(tài)的規(guī)范。省時(shí)省力、提高效率、設(shè)計(jì)規(guī)范、運(yùn)行更流暢、減少代碼重復(fù)率、安裝包也會(huì)更小。
異常狀態(tài)一共有以下10類:
- 網(wǎng)絡(luò)異常
- 消耗大量流量時(shí)
- 空數(shù)據(jù)
- 加載失敗
- 操作失敗
- 服務(wù)器異常
- 搜索無結(jié)果
- 無權(quán)限
- 功能建設(shè)中
- 內(nèi)容被刪除
01 網(wǎng)絡(luò)異常
當(dāng)移動(dòng)設(shè)備網(wǎng)絡(luò)異常時(shí),導(dǎo)致無法上傳和下載數(shù)據(jù),從而無法正常的使用產(chǎn)品。
網(wǎng)絡(luò)異常存在兩種場景:
- 網(wǎng)絡(luò)異常時(shí),用戶打開App,這種情況App會(huì)出現(xiàn)異常狀態(tài)提示給用戶,這是App主動(dòng)告知行為;
- 用戶點(diǎn)擊操作時(shí),由于網(wǎng)絡(luò)異常,這時(shí)候通過交互反饋給用戶,這是App被動(dòng)告知行為。
App主動(dòng)行為
當(dāng)無網(wǎng)絡(luò)時(shí),用戶打開App,通常有三種方式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。
- tips提示,通過tips提示用戶當(dāng)前網(wǎng)絡(luò)不可用,tips使用場景一般為用戶打開后,界面停留在首頁, 且首頁以列表形式展示,這樣的話,tips才能合理的融入到界面中,常見使用這種布局方式的有微信、qq等。
- 使用toast提示用戶網(wǎng)絡(luò)異常,同時(shí)提示用戶可以去使用非數(shù)據(jù)影響的的操作。例如網(wǎng)易云音樂,當(dāng)無網(wǎng)絡(luò)時(shí)候,告知用戶可以去正常聽已下載的音樂。
- 使用對話框,引導(dǎo)用戶進(jìn)入設(shè)置頁面,關(guān)閉飛行模式或者打開Wi-Fi,例如美團(tuán)進(jìn)入首頁后的對話框提示。
App被動(dòng)行為
當(dāng)前無網(wǎng)絡(luò)時(shí),用戶點(diǎn)擊操作時(shí),無法正常使用產(chǎn)品,這時(shí)候通常有兩種處理方式。
一種是操作當(dāng)前界面出現(xiàn)toast提示。另一種是進(jìn)入下一級界面,以缺省頁的形式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。
例如手機(jī)淘寶,沒有網(wǎng)絡(luò)用戶點(diǎn)擊,進(jìn)入下一頁,出現(xiàn)缺省頁提示,告知用戶網(wǎng)絡(luò)異常,同時(shí)提供刷新按鈕。
美團(tuán)在無網(wǎng)絡(luò)時(shí),點(diǎn)擊其他tab bar時(shí),出現(xiàn)toast提示用戶當(dāng)前網(wǎng)絡(luò)異常,稍后重試。
總結(jié):
- 個(gè)人覺得,當(dāng)App打開進(jìn)入列表頁面時(shí),常見的如IM,則使用tips提示告知用戶,非列表的IM工具時(shí),可使用toast告知用戶即可。
- 當(dāng)用戶進(jìn)行界面交互時(shí),用戶點(diǎn)擊操作,通過toast告知用戶即可。
02 消耗大量流量時(shí)
當(dāng)涉及需要消耗大量流量數(shù)據(jù)時(shí),且非Wi-Fi情況下,這時(shí)候需要告知用戶。常見的例如:看視頻,聽/下載歌曲、視頻通話、下載上傳文件等。
例如B站,當(dāng)使用移動(dòng)數(shù)據(jù)看視頻時(shí)候,則通過提示語和對應(yīng)按鈕上面當(dāng)流量數(shù)告知用戶。
網(wǎng)易云音樂在非Wi-Fi情況下,下載音樂時(shí),通過對話框,告知用戶當(dāng)前使用數(shù)據(jù)流量,同時(shí)提供操作可繼續(xù)下載,也提供通過辦理新業(yè)務(wù)解決數(shù)據(jù)流量的問題。
03 空數(shù)據(jù)
空數(shù)據(jù)一共分為兩種類型,分別為初始狀態(tài)和清空狀態(tài)
初始狀態(tài)
用戶首次使用,沒有任何內(nèi)容數(shù)據(jù)時(shí),需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面,這時(shí)候需要提示用戶需要進(jìn)行某種操作才會(huì)出現(xiàn)內(nèi)容。
例如淘寶App,當(dāng)用戶沒有把商品加入購物車時(shí),進(jìn)入購物車界面,會(huì)給出提示購物車界面為空,給出用戶提示后,給出相對應(yīng)的入口按鈕,引導(dǎo)用戶操作。
如果初始狀態(tài),無任何內(nèi)容直接給出一個(gè)空白界面,那樣的話用戶可能以為該界面出bug了,不知所措。
Gmail直接用一個(gè)插畫提示用戶收件箱為空。
一般對于初始狀態(tài)的設(shè)計(jì),常規(guī)做法是簡單的插畫配合簡潔的文案,必要的時(shí)候給出引導(dǎo)用戶操作行為的按鈕。
現(xiàn)在流行的設(shè)計(jì)趨勢是插畫越輕量越簡單越好,以免搶奪了文案信息。
清空狀態(tài)
當(dāng)用戶清空當(dāng)前的頁面內(nèi)容,產(chǎn)生了空界面,這時(shí)候需要有明確的提示告知用戶出現(xiàn)當(dāng)前頁面當(dāng)原因,且告知用戶該如何處理。
清空狀態(tài)是對初始狀態(tài)的進(jìn)一步細(xì)化。清空狀態(tài)的界面和初始狀態(tài)設(shè)計(jì)很相似,唯一不同的是文案的提示。
有的產(chǎn)品設(shè)計(jì)直接把清空狀態(tài)的界面按照初始狀態(tài)來設(shè)計(jì),這樣也是可以的,缺點(diǎn)就是沒有告知用戶產(chǎn)生空狀態(tài)原因是初始化還是清空所致。
04 加載失敗
在加載過程中,App向服務(wù)器請求數(shù)據(jù),如果是網(wǎng)絡(luò)原因?qū)е?,則使用網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范。
如果非網(wǎng)絡(luò)異常原因,則可能因?yàn)榉?wù)器異常導(dǎo)致接口請求不到數(shù)據(jù),從而導(dǎo)致加載失敗。
第一次請求失敗,有些場景可能重試2次例如微信支付寶,這種情況可使用toast告知用戶加載失敗的原因。
05 操作失敗
任何操作行為的交互界面都伴隨著操作失敗的概率。
當(dāng)用戶操作失敗時(shí),在當(dāng)前頁面給予一個(gè)反饋,告知用戶操作失敗,最好告知用戶操作失敗的原因,讓用戶知道接下來如何避免操作失敗。
06 服務(wù)器異常
因?yàn)榉?wù)器異常是小概率事件,但是也會(huì)發(fā)生。
當(dāng)服務(wù)器異常時(shí),且用戶在操作過程中,出現(xiàn)這種情況,一般可設(shè)計(jì)為對話框提示,明確告知用戶,服務(wù)器出現(xiàn)問題,讓用戶稍后重試。
例如下圖的華為云備份恢復(fù)界面。
07 搜索無結(jié)果
用戶在搜索過程中,除了出現(xiàn)正常的匹配結(jié)果,還存在無匹配結(jié)果的情況,針對搜索無結(jié)果的情況,要給予用戶操作無結(jié)果的提示。
幾乎搜索的搜索無結(jié)果狀態(tài)都是在內(nèi)容區(qū)出現(xiàn)對應(yīng)的提示(插圖)
例如iOS相冊,通過搜索關(guān)鍵詞,當(dāng)沒有匹配照片時(shí),則出現(xiàn)對應(yīng)的提示,如下圖右側(cè)圖。
下圖淘寶買家版后臺,當(dāng)用戶搜索關(guān)鍵詞無結(jié)果時(shí),出現(xiàn)對應(yīng)的提示語和插圖。
08 無權(quán)限
無權(quán)限的場景,通常適用b端產(chǎn)品,對于不同組織架構(gòu)的企業(yè)員工,會(huì)存在不同的權(quán)限。
例如部分重要的內(nèi)容,非同一組織架構(gòu)的員工無權(quán)限觀看,這種情況,用戶點(diǎn)擊進(jìn)入一般給出對應(yīng)的提示。
當(dāng)然最好的方案是在App上面過濾掉無法查看的內(nèi)容,但是存在員工間的轉(zhuǎn)發(fā)行為,這時(shí)候無權(quán)限的員工,點(diǎn)擊進(jìn)入,則顯示暫無權(quán)限查看的提示頁面。
09 功能建設(shè)中
一般App功能正在開發(fā)中,這種情況不會(huì)在App界面中展示出來,只有完全開發(fā)完畢并上線后才會(huì)出現(xiàn)在App上。
但是也有一些產(chǎn)品的特殊業(yè)務(wù),會(huì)將一些未開發(fā)的功能展示出來,例如微信公眾號,長按微信文章,即出現(xiàn)對應(yīng)的提示。
也有一些新聞?lì)l道還沒有開發(fā)完畢上線,這時(shí)候用戶點(diǎn)擊進(jìn)入進(jìn)入下級界面,則出現(xiàn)對應(yīng)的提示語/插圖提示,如下圖所示。
10 內(nèi)容被刪除
有的時(shí)候,由于文件或者頁面內(nèi)容被刪除,由于文件或者頁面內(nèi)容的上一級頁面有緩存,所以當(dāng)用戶點(diǎn)擊進(jìn)入時(shí),會(huì)出現(xiàn)文章/文件被刪除的情況。
已被刪除的異常狀態(tài),常見的設(shè)計(jì)是用戶進(jìn)入新頁面出現(xiàn)對應(yīng)的插畫和標(biāo)題提示。
例如下圖微信公眾號文章內(nèi)容被作者刪除,讀者點(diǎn)擊進(jìn)入,加載后的界面就出現(xiàn)內(nèi)容被刪除的提示。
以上就是常見的10種異常狀態(tài)的簡單介紹和說明。
大家如果制定異常狀態(tài)的設(shè)計(jì)規(guī)范時(shí),可以參考本篇文章。
當(dāng)然也有公司特殊的業(yè)務(wù)導(dǎo)致存在很特殊的異常狀態(tài),針對這種情況,可以適當(dāng)?shù)脑黾?、刪除或者修改使其屬于自己公司項(xiàng)目的異常狀態(tài)的設(shè)計(jì)規(guī)范。
歡迎大家閱讀,如果覺得對你有用的話,歡迎傳播給更多朋友學(xué)習(xí),同時(shí)歡迎大家在留言區(qū)交流。
#專欄作家#
UX,微信公眾號:Echo的設(shè)計(jì)筆記,人人都是產(chǎn)品經(jīng)理專欄作家。前美團(tuán)點(diǎn)評高級交互設(shè)計(jì)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
可以