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