筆者例舉了使用產(chǎn)品過(guò)程中容易出現(xiàn)的10種異常狀態(tài)，一起來(lái)看看吧~

在做設(shè)計(jì)的過(guò)程中，大部分設(shè)計(jì)師只專(zhuān)注于主操作流程、主頁(yè)面、分支流程、小頁(yè)面和頁(yè)面的不同狀態(tài)。卻容易忽略產(chǎn)品中容易出現(xiàn)的各種異常狀態(tài)。

當(dāng)用戶(hù)停留任何一個(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ì)，開(kāi)發(fā)直接復(fù)用異常狀態(tài)的規(guī)范。省時(shí)省力、提高效率、設(shè)計(jì)規(guī)范、運(yùn)行更流暢、減少代碼重復(fù)率、安裝包也會(huì)更小。

異常狀態(tài)一共有以下10類(lèi)：

1. 網(wǎng)絡(luò)異常
2. 消耗大量流量時(shí)
3. 空數(shù)據(jù)
4. 加載失敗
5. 操作失敗
6. 服務(wù)器異常
7. 搜索無(wú)結(jié)果
8. 無(wú)權(quán)限
9. 功能建設(shè)中
10. 內(nèi)容被刪除

01 網(wǎng)絡(luò)異常

當(dāng)移動(dòng)設(shè)備網(wǎng)絡(luò)異常時(shí)，導(dǎo)致無(wú)法上傳和下載數(shù)據(jù)，從而無(wú)法正常的使用產(chǎn)品。

網(wǎng)絡(luò)異常存在兩種場(chǎng)景：

1. 網(wǎng)絡(luò)異常時(shí)，用戶(hù)打開(kāi)App，這種情況App會(huì)出現(xiàn)異常狀態(tài)提示給用戶(hù)，這是App主動(dòng)告知行為；
2. 用戶(hù)點(diǎn)擊操作時(shí)，由于網(wǎng)絡(luò)異常，這時(shí)候通過(guò)交互反饋給用戶(hù)，這是App被動(dòng)告知行為。

App主動(dòng)行為

當(dāng)無(wú)網(wǎng)絡(luò)時(shí)，用戶(hù)打開(kāi)App，通常有三種方式提醒用戶(hù)當(dāng)前網(wǎng)絡(luò)異常。

1. tips提示，通過(guò)tips提示用戶(hù)當(dāng)前網(wǎng)絡(luò)不可用，tips使用場(chǎng)景一般為用戶(hù)打開(kāi)后，界面停留在首頁(yè)， 且首頁(yè)以列表形式展示，這樣的話(huà)，tips才能合理的融入到界面中，常見(jiàn)使用這種布局方式的有微信、qq等。
2. 使用toast提示用戶(hù)網(wǎng)絡(luò)異常，同時(shí)提示用戶(hù)可以去使用非數(shù)據(jù)影響的的操作。例如網(wǎng)易云音樂(lè)，當(dāng)無(wú)網(wǎng)絡(luò)時(shí)候，告知用戶(hù)可以去正常聽(tīng)已下載的音樂(lè)。
3. 使用對(duì)話(huà)框，引導(dǎo)用戶(hù)進(jìn)入設(shè)置頁(yè)面，關(guān)閉飛行模式或者打開(kāi)Wi-Fi，例如美團(tuán)進(jìn)入首頁(yè)后的對(duì)話(huà)框提示。

App被動(dòng)行為

當(dāng)前無(wú)網(wǎng)絡(luò)時(shí)，用戶(hù)點(diǎn)擊操作時(shí)，無(wú)法正常使用產(chǎn)品，這時(shí)候通常有兩種處理方式。

一種是操作當(dāng)前界面出現(xiàn)toast提示。另一種是進(jìn)入下一級(jí)界面，以缺省頁(yè)的形式提醒用戶(hù)當(dāng)前網(wǎng)絡(luò)異常。

例如手機(jī)淘寶，沒(méi)有網(wǎng)絡(luò)用戶(hù)點(diǎn)擊，進(jìn)入下一頁(yè)，出現(xiàn)缺省頁(yè)提示，告知用戶(hù)網(wǎng)絡(luò)異常，同時(shí)提供刷新按鈕。

美團(tuán)在無(wú)網(wǎng)絡(luò)時(shí)，點(diǎn)擊其他tab bar時(shí)，出現(xiàn)toast提示用戶(hù)當(dāng)前網(wǎng)絡(luò)異常，稍后重試。

總結(jié)：

1. 個(gè)人覺(jué)得，當(dāng)App打開(kāi)進(jìn)入列表頁(yè)面時(shí)，常見(jiàn)的如IM，則使用tips提示告知用戶(hù)，非列表的IM工具時(shí)，可使用toast告知用戶(hù)即可。
2. 當(dāng)用戶(hù)進(jìn)行界面交互時(shí)，用戶(hù)點(diǎn)擊操作，通過(guò)toast告知用戶(hù)即可。

02 消耗大量流量時(shí)

當(dāng)涉及需要消耗大量流量數(shù)據(jù)時(shí)，且非Wi-Fi情況下，這時(shí)候需要告知用戶(hù)。常見(jiàn)的例如：看視頻，聽(tīng)/下載歌曲、視頻通話(huà)、下載上傳文件等。

例如B站，當(dāng)使用移動(dòng)數(shù)據(jù)看視頻時(shí)候，則通過(guò)提示語(yǔ)和對(duì)應(yīng)按鈕上面當(dāng)流量數(shù)告知用戶(hù)。

網(wǎng)易云音樂(lè)在非Wi-Fi情況下，下載音樂(lè)時(shí)，通過(guò)對(duì)話(huà)框，告知用戶(hù)當(dāng)前使用數(shù)據(jù)流量，同時(shí)提供操作可繼續(xù)下載，也提供通過(guò)辦理新業(yè)務(wù)解決數(shù)據(jù)流量的問(wèn)題。

03 空數(shù)據(jù)

空數(shù)據(jù)一共分為兩種類(lèi)型，分別為初始狀態(tài)和清空狀態(tài)

初始狀態(tài)

用戶(hù)首次使用，沒(méi)有任何內(nèi)容數(shù)據(jù)時(shí)，需要用戶(hù)進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面，這時(shí)候需要提示用戶(hù)需要進(jìn)行某種操作才會(huì)出現(xiàn)內(nèi)容。

例如淘寶App，當(dāng)用戶(hù)沒(méi)有把商品加入購(gòu)物車(chē)時(shí)，進(jìn)入購(gòu)物車(chē)界面，會(huì)給出提示購(gòu)物車(chē)界面為空，給出用戶(hù)提示后，給出相對(duì)應(yīng)的入口按鈕，引導(dǎo)用戶(hù)操作。

如果初始狀態(tài)，無(wú)任何內(nèi)容直接給出一個(gè)空白界面，那樣的話(huà)用戶(hù)可能以為該界面出bug了，不知所措。

Gmail直接用一個(gè)插畫(huà)提示用戶(hù)收件箱為空。

一般對(duì)于初始狀態(tài)的設(shè)計(jì)，常規(guī)做法是簡(jiǎn)單的插畫(huà)配合簡(jiǎn)潔的文案，必要的時(shí)候給出引導(dǎo)用戶(hù)操作行為的按鈕。

現(xiàn)在流行的設(shè)計(jì)趨勢(shì)是插畫(huà)越輕量越簡(jiǎn)單越好，以免搶奪了文案信息。

清空狀態(tài)

當(dāng)用戶(hù)清空當(dāng)前的頁(yè)面內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示告知用戶(hù)出現(xiàn)當(dāng)前頁(yè)面當(dāng)原因，且告知用戶(hù)該如何處理。

清空狀態(tài)是對(duì)初始狀態(tài)的進(jìn)一步細(xì)化。清空狀態(tài)的界面和初始狀態(tài)設(shè)計(jì)很相似，唯一不同的是文案的提示。

有的產(chǎn)品設(shè)計(jì)直接把清空狀態(tài)的界面按照初始狀態(tài)來(lái)設(shè)計(jì)，這樣也是可以的，缺點(diǎn)就是沒(méi)有告知用戶(hù)產(chǎn)生空狀態(tài)原因是初始化還是清空所致。

04 加載失敗

在加載過(guò)程中，App向服務(wù)器請(qǐng)求數(shù)據(jù)，如果是網(wǎng)絡(luò)原因?qū)е拢瑒t使用網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范。

如果非網(wǎng)絡(luò)異常原因，則可能因?yàn)榉?wù)器異常導(dǎo)致接口請(qǐng)求不到數(shù)據(jù)，從而導(dǎo)致加載失敗。

第一次請(qǐng)求失敗，有些場(chǎng)景可能重試2次例如微信支付寶，這種情況可使用toast告知用戶(hù)加載失敗的原因。

05 操作失敗

任何操作行為的交互界面都伴隨著操作失敗的概率。

當(dāng)用戶(hù)操作失敗時(shí)，在當(dāng)前頁(yè)面給予一個(gè)反饋，告知用戶(hù)操作失敗，最好告知用戶(hù)操作失敗的原因，讓用戶(hù)知道接下來(lái)如何避免操作失敗。

06 服務(wù)器異常

因?yàn)榉?wù)器異常是小概率事件，但是也會(huì)發(fā)生。

當(dāng)服務(wù)器異常時(shí)，且用戶(hù)在操作過(guò)程中，出現(xiàn)這種情況，一般可設(shè)計(jì)為對(duì)話(huà)框提示，明確告知用戶(hù)，服務(wù)器出現(xiàn)問(wèn)題，讓用戶(hù)稍后重試。

例如下圖的華為云備份恢復(fù)界面。

07 搜索無(wú)結(jié)果

用戶(hù)在搜索過(guò)程中，除了出現(xiàn)正常的匹配結(jié)果，還存在無(wú)匹配結(jié)果的情況，針對(duì)搜索無(wú)結(jié)果的情況，要給予用戶(hù)操作無(wú)結(jié)果的提示。

幾乎搜索的搜索無(wú)結(jié)果狀態(tài)都是在內(nèi)容區(qū)出現(xiàn)對(duì)應(yīng)的提示（插圖）

例如iOS相冊(cè)，通過(guò)搜索關(guān)鍵詞，當(dāng)沒(méi)有匹配照片時(shí)，則出現(xiàn)對(duì)應(yīng)的提示，如下圖右側(cè)圖。

下圖淘寶買(mǎi)家版后臺(tái)，當(dāng)用戶(hù)搜索關(guān)鍵詞無(wú)結(jié)果時(shí)，出現(xiàn)對(duì)應(yīng)的提示語(yǔ)和插圖。

08 無(wú)權(quán)限

無(wú)權(quán)限的場(chǎng)景，通常適用b端產(chǎn)品，對(duì)于不同組織架構(gòu)的企業(yè)員工，會(huì)存在不同的權(quán)限。

例如部分重要的內(nèi)容，非同一組織架構(gòu)的員工無(wú)權(quán)限觀看，這種情況，用戶(hù)點(diǎn)擊進(jìn)入一般給出對(duì)應(yīng)的提示。

當(dāng)然最好的方案是在App上面過(guò)濾掉無(wú)法查看的內(nèi)容，但是存在員工間的轉(zhuǎn)發(fā)行為，這時(shí)候無(wú)權(quán)限的員工，點(diǎn)擊進(jìn)入，則顯示暫無(wú)權(quán)限查看的提示頁(yè)面。

09 功能建設(shè)中

一般App功能正在開(kāi)發(fā)中，這種情況不會(huì)在App界面中展示出來(lái)，只有完全開(kāi)發(fā)完畢并上線后才會(huì)出現(xiàn)在App上。

但是也有一些產(chǎn)品的特殊業(yè)務(wù)，會(huì)將一些未開(kāi)發(fā)的功能展示出來(lái)，例如微信公眾號(hào)，長(zhǎng)按微信文章，即出現(xiàn)對(duì)應(yīng)的提示。

也有一些新聞?lì)l道還沒(méi)有開(kāi)發(fā)完畢上線，這時(shí)候用戶(hù)點(diǎn)擊進(jìn)入進(jìn)入下級(jí)界面，則出現(xiàn)對(duì)應(yīng)的提示語(yǔ)/插圖提示，如下圖所示。

10 內(nèi)容被刪除

有的時(shí)候，由于文件或者頁(yè)面內(nèi)容被刪除，由于文件或者頁(yè)面內(nèi)容的上一級(jí)頁(yè)面有緩存，所以當(dāng)用戶(hù)點(diǎn)擊進(jìn)入時(shí)，會(huì)出現(xiàn)文章/文件被刪除的情況。

已被刪除的異常狀態(tài)，常見(jiàn)的設(shè)計(jì)是用戶(hù)進(jìn)入新頁(yè)面出現(xiàn)對(duì)應(yīng)的插畫(huà)和標(biāo)題提示。

例如下圖微信公眾號(hào)文章內(nèi)容被作者刪除，讀者點(diǎn)擊進(jìn)入，加載后的界面就出現(xiàn)內(nèi)容被刪除的提示。

以上就是常見(jiàn)的10種異常狀態(tài)的簡(jiǎn)單介紹和說(shuō)明。

大家如果制定異常狀態(tài)的設(shè)計(jì)規(guī)范時(shí)，可以參考本篇文章。

當(dāng)然也有公司特殊的業(yè)務(wù)導(dǎo)致存在很特殊的異常狀態(tài)，針對(duì)這種情況，可以適當(dāng)?shù)脑黾?、刪除或者修改使其屬于自己公司項(xiàng)目的異常狀態(tài)的設(shè)計(jì)規(guī)范。

歡迎大家閱讀，如果覺(jué)得對(duì)你有用的話(huà)，歡迎傳播給更多朋友學(xué)習(xí)，同時(shí)歡迎大家在留言區(qū)交流。

#專(zhuān)欄作家#

UX，微信公眾號(hào)：Echo的設(shè)計(jì)筆記，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。前美團(tuán)點(diǎn)評(píng)高級(jí)交互設(shè)計(jì)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議