系統(tǒng)應(yīng)該讓用戶(hù)時(shí)刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶(hù)了解自己處于何種狀態(tài)、對(duì)過(guò)去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來(lái)去向有所了解，一般的方法是在合適的時(shí)間給用戶(hù)適當(dāng)?shù)姆答?，防止用?hù)使用出現(xiàn)錯(cuò)誤。

我們知道，用戶(hù)在和頁(yè)面發(fā)生交互時(shí)會(huì)遇到各種狀態(tài)，此時(shí)需要通過(guò)一定的界面反饋將信息反饋給用戶(hù)，“反饋”是人機(jī)交互最重要的原則，無(wú)論是視覺(jué)（界面變化）、聽(tīng)覺(jué)（聲音提醒）、觸覺(jué)（震動(dòng)），都可以幫助用戶(hù)理解自己所在頁(yè)面的狀態(tài)及接下來(lái)會(huì)發(fā)生了什么、怎么做。

其實(shí)討論“狀態(tài)可見(jiàn)原則”就是討論如何把“反饋”設(shè)計(jì)得更合理。下面我從產(chǎn)品常見(jiàn)的幾大異常狀態(tài)切入，討論出現(xiàn)異常狀態(tài)時(shí)對(duì)應(yīng)的解決方案，讓錯(cuò)誤狀態(tài)“可見(jiàn)”。

目前主要整理了以下常見(jiàn)9種異常，以后會(huì)不間斷補(bǔ)充：

1. 網(wǎng)絡(luò)異常
2. 空狀態(tài)
3. 服務(wù)器異常
4. 流量模式警告
5. 版本不兼容
6. 操作失敗
7. 無(wú)權(quán)限
8. 功能建設(shè)狀態(tài)
9. 內(nèi)容刪除、違規(guī)導(dǎo)致的查看異常

一、網(wǎng)絡(luò)異常狀態(tài)提示

當(dāng)設(shè)備丟失網(wǎng)絡(luò)連接時(shí)，導(dǎo)致網(wǎng)頁(yè)/APP無(wú)法傳輸數(shù)據(jù)導(dǎo)致的異常狀態(tài)。網(wǎng)絡(luò)異常通常有兩種觸發(fā)場(chǎng)景：

1. 自動(dòng)觸發(fā)：斷網(wǎng)后，用戶(hù)進(jìn)入軟件時(shí)，程序檢測(cè)到無(wú)網(wǎng)絡(luò)，自動(dòng)提示
2. 被動(dòng)觸發(fā)：斷網(wǎng)時(shí)用戶(hù)在軟件內(nèi)操作，系統(tǒng)被動(dòng)觸發(fā)無(wú)網(wǎng)絡(luò)提醒

在無(wú)網(wǎng)絡(luò)的情況下打開(kāi)APP時(shí)頁(yè)面需要刷新，此時(shí)需要提醒用戶(hù)網(wǎng)絡(luò)問(wèn)題，常見(jiàn)的提醒方式有如下四種，分別適合于不同的應(yīng)用場(chǎng)景：

對(duì)于這幾種提示類(lèi)型，除了本篇討論的斷網(wǎng)提示之外，還有很多的其它的應(yīng)用場(chǎng)景，如操作提示、進(jìn)度提醒、程序提醒等。我們來(lái)看下各種提示形式的特點(diǎn)及應(yīng)用場(chǎng)景。

1.?缺省頁(yè)面提示

在內(nèi)容更新頻繁的內(nèi)容型產(chǎn)品（如視頻、帖子動(dòng)態(tài)類(lèi)）中常用缺省頁(yè)的形式表現(xiàn)無(wú)網(wǎng)絡(luò)狀態(tài)，直接明了，附有個(gè)性化插圖及提示文案，同時(shí)帶有【刷新】或者【解決方案】入口，引導(dǎo)用戶(hù)點(diǎn)擊查看原因解決問(wèn)題。

2.?tips提示

tips提示常見(jiàn)于頁(yè)面頂部或者底部固定，更適用于于信息列表類(lèi)頁(yè)面，如圖示的釘釘及微信等，采用tips的形式，樣式上與列表形式更接近、和諧統(tǒng)一。點(diǎn)擊后可以跳轉(zhuǎn)系統(tǒng)設(shè)置或幫助頁(yè)面。

3. toast提示類(lèi)

toast（不帶交互性）

toast提示的特點(diǎn)是彈出后自動(dòng)消失（一般至少為1s），視覺(jué)層級(jí)高，能夠吸引用戶(hù)的注意力。消失后用戶(hù)可以在軟件中繼續(xù)其它點(diǎn)擊動(dòng)作。但是由于存在時(shí)間短，容易被用戶(hù)忽視，所以一般不會(huì)放置過(guò)多文字和重要信息。

此種方式很適合比較用于有不需要聯(lián)網(wǎng)即可查看/使用部分功能內(nèi)容（緩存）的產(chǎn)品中，比如網(wǎng)易云音樂(lè)，無(wú)網(wǎng)絡(luò)時(shí)仍然可以選擇聽(tīng)本地歌曲。

表現(xiàn)形式上，toast出現(xiàn)的位置以中、上為主，因?yàn)樗某霈F(xiàn)是在動(dòng)作之后，所以位置不能偏離動(dòng)作發(fā)生位置過(guò)多，以免造成視覺(jué)的跳躍感。

Snackbars（帶交互性）

Material Design（Android）中有一個(gè)與常見(jiàn)Toast類(lèi)似的提示–Snackbars，是一種針對(duì)操作的輕量級(jí)反饋機(jī)制，一般在頁(yè)面下方浮出，在該頁(yè)面層級(jí)最高，同樣在一定時(shí)間后自動(dòng)消失。

與toast最大的區(qū)別是允許用戶(hù)交互，用戶(hù)可以手動(dòng)點(diǎn)擊頁(yè)面其它地方或手動(dòng)滑動(dòng)關(guān)閉snackbars，有時(shí)也會(huì)帶有操作按鈕，提供繼續(xù)或撤銷(xiāo)功能。

Snackbars使用原則：

Snackbars演示示例：

有興趣的同學(xué)可以去matreia design官網(wǎng)了解snackbars https://www.material.io/components/snackbars/#anatomy

4. 模態(tài)彈窗（Alert）

模態(tài)彈窗打斷用戶(hù)的操作，用于提供重要信息或者要求用戶(hù)決策。出現(xiàn)時(shí)會(huì)禁用所有的應(yīng)用程序功能，并且一直顯示在屏幕上，直到用戶(hù)選擇確認(rèn)、關(guān)閉或已采取必要措施為止。但由于會(huì)打斷用戶(hù)，所以要謹(jǐn)慎使用。

模態(tài)彈窗的使用原則：

因此模態(tài)彈窗更適用于以下兩種情景：

• 阻止應(yīng)用正常運(yùn)行的錯(cuò)誤
• 需要特定用戶(hù)任務(wù)，決策或確認(rèn)的關(guān)鍵信息

網(wǎng)絡(luò)異常反饋形式總結(jié)：

• 對(duì)于不同情景下的網(wǎng)絡(luò)異常提示，我們需要區(qū)別考慮，選用最優(yōu)的狀態(tài)反饋方式，我認(rèn)為有以下幾點(diǎn)在之后的設(shè)計(jì)中可以運(yùn)用：
• 對(duì)于一般的列表消息類(lèi)的APP，采用相對(duì)簡(jiǎn)單、與整體列表和諧的tips提示，可以加入跳轉(zhuǎn)邏輯，如引導(dǎo)用戶(hù)查看幫助等
• 對(duì)于內(nèi)容類(lèi)產(chǎn)品，經(jīng)常需要刷新頁(yè)面讀取最新動(dòng)態(tài)內(nèi)容的產(chǎn)品，采用toast提示，一般存在1-2s，需要注意不要放置過(guò)多文字
• toast的延伸類(lèi)型snackbars可以加入按鈕、拖拽關(guān)閉等，比常規(guī)toast更具備交互性，可以用于向用戶(hù)展示一些比基礎(chǔ)的正確/錯(cuò)誤反饋稍重要些的提示
• 除非重要信息提醒/緊急情況，慎用/不用模態(tài)彈窗

二、空狀態(tài)提示

由于空狀態(tài)沒(méi)有實(shí)質(zhì)性的頁(yè)面內(nèi)容，所以需要反饋給用戶(hù)相關(guān)信息去添加或重新提交數(shù)據(jù)請(qǐng)求。

一般來(lái)說(shuō)，我們說(shuō)的空狀態(tài)有兩種觸發(fā)場(chǎng)景：

1. 需要用戶(hù)主動(dòng)添加信息的空狀態(tài)

此類(lèi)空狀態(tài)一般有時(shí)會(huì)通過(guò)文案提示引導(dǎo)用戶(hù)創(chuàng)建內(nèi)容，如上圖中的“下廚房”APP，利用了俏皮文案加操作指引的方式引導(dǎo)用戶(hù)創(chuàng)建菜譜。

設(shè)計(jì)形式上需要注意：遵循產(chǎn)品整體風(fēng)格、文案+插圖的形式比較常見(jiàn)美觀。

2. 用戶(hù)通過(guò)APP內(nèi)的操作如搜索、刪除等導(dǎo)致的空狀態(tài)

這種被動(dòng)空狀態(tài)的情況更需要提示用戶(hù)

• 為什么會(huì)出現(xiàn)空狀態(tài)的情況
• 怎樣做可以解決空狀態(tài)
• 其它可能你需要的功能等

從上圖實(shí)例中可以看出，功能系統(tǒng)較為完善的產(chǎn)品中，當(dāng)有被動(dòng)空狀態(tài)出現(xiàn)時(shí)，往往會(huì)給用戶(hù)其它選擇避免當(dāng)前的“尷尬”，而不是冷冰冰的空白頁(yè)面，不知道的還以為正在搜索或者是卡了呢！

空狀態(tài)反饋機(jī)制總結(jié)：

• 注意區(qū)分兩種情境下的空狀態(tài)
• 空狀態(tài)的文案和插圖可以根據(jù)產(chǎn)品風(fēng)格自由發(fā)揮，能幫到用戶(hù)當(dāng)然更好
• 當(dāng)出現(xiàn)空狀態(tài)時(shí)，可以提供給用戶(hù)其它相似/推薦內(nèi)容，使部分用戶(hù)的體驗(yàn)更為順滑，而不是斷斷續(xù)續(xù)的體驗(yàn)。

三、服務(wù)器異常狀態(tài)提示

因?yàn)榫W(wǎng)絡(luò)或者服務(wù)器問(wèn)題導(dǎo)致的頁(yè)面加載失敗問(wèn)題，同樣需要反饋給用戶(hù)，告知用戶(hù)當(dāng)前的狀態(tài)問(wèn)題，如最近因?yàn)橐咔楦綦x的原因各種服務(wù)器崩潰的軟件。（愛(ài)奇藝↑）

服務(wù)器異常導(dǎo)致的加載失敗等問(wèn)題可以采用同上文討論的網(wǎng)絡(luò)異常問(wèn)題的解決方案，但仍然需要針對(duì)不同異常場(chǎng)景采用不同的設(shè)計(jì)方案：

• 如果是簡(jiǎn)單的服務(wù)器滿(mǎn)員等問(wèn)題導(dǎo)致頁(yè)面加載失敗，可以用toast或缺省頁(yè)面的形式提醒用戶(hù)。
• 如果有詳細(xì)告知用戶(hù)服務(wù)器的問(wèn)題的需要（如金融交易相關(guān)），為避免造成用戶(hù)恐慌，可以采用承載信息更多的模態(tài)彈窗提示，吸引用戶(hù)的注意力，把情況說(shuō)明白。

需要注意的是提示的問(wèn)題類(lèi)型的文案描述要清晰，畢竟網(wǎng)絡(luò)問(wèn)題和服務(wù)器問(wèn)題是不同的，避免誤導(dǎo)用戶(hù)進(jìn)行無(wú)用的修復(fù)。如果我知道是因?yàn)榉?wù)器崩了而不是我網(wǎng)絡(luò)的問(wèn)題，那我可能就去微博看是不是上熱搜了，而不是重啟網(wǎng)絡(luò)試試，對(duì)吧~

服務(wù)器異常反饋機(jī)制總結(jié)：

• 注意區(qū)分不同情境下的異常及嚴(yán)重程度采用最簡(jiǎn)單直接的提示形式，考慮解釋不清是否會(huì)對(duì)用戶(hù)造成恐慌或更嚴(yán)重的后果？
• 文案描述要清晰準(zhǔn)確，避免用戶(hù)為了解決問(wèn)題做無(wú)用操作

四、流量模式警告狀態(tài)提示

當(dāng)處于流量模式下用戶(hù)觀看視頻、下載文件、播放歌曲等會(huì)消耗大量流量，此時(shí)有必要警告用戶(hù)目前處于流量模式，以免應(yīng)用先消耗大量流量導(dǎo)致欠費(fèi)問(wèn)題。

針對(duì)該警告的提示形式有以下幾種：

1. 播放區(qū)/加載區(qū)文字提示

主要適用于視頻播放、直播類(lèi)軟件，將提示和播放區(qū)結(jié)合設(shè)計(jì)的好處是：用戶(hù)原先進(jìn)入播放頁(yè)后緊接著就會(huì)關(guān)注視頻播放區(qū)域，所以這種提示很符合應(yīng)用場(chǎng)景，比較自然和直白，也能直接看到需要消耗多少流量。

2. 簡(jiǎn)單toast提示，在切換WiFi之前會(huì)繼續(xù)消耗流量

常見(jiàn)于抖音等短視頻軟件，這種軟件對(duì)用戶(hù)的體驗(yàn)流暢度要求很高，單個(gè)短視頻消耗流量并不多，而且在播放下個(gè)視頻之前不需要提前緩存。

綜合來(lái)看，采用toast的形式既不會(huì)過(guò)度干擾用戶(hù)觀看視頻的體驗(yàn)，居中顯示的提示也容易被用戶(hù)注意到，可以在播放下一個(gè)短視頻時(shí)可以及時(shí)更改流量模式。同時(shí)，遇到網(wǎng)絡(luò)不穩(wěn)定的情況，WIFI流量互切時(shí)，也不至于打斷用戶(hù)觀看視頻。

3. 模態(tài)彈窗提醒

現(xiàn)在軟件一般都內(nèi)置流量模式設(shè)置，用戶(hù)可以依據(jù)自己的情況開(kāi)啟流量模式下的查看/下載功能，一般默認(rèn)關(guān)閉流量模式下的下載功能。

以騰訊視頻為例可以看到，點(diǎn)擊下載時(shí)從開(kāi)始的提示到設(shè)置過(guò)程，兩次出現(xiàn)了模態(tài)彈窗提示，并輔以詳細(xì)的文字說(shuō)明。可見(jiàn)模態(tài)彈窗的形式比較適合在“下載”這種通過(guò)用戶(hù)主動(dòng)觸發(fā)且流量消耗大的動(dòng)作情景下使用，減少用戶(hù)的錯(cuò)誤點(diǎn)擊，并且可以提供設(shè)置按鈕入口。

4. 貼心的“已WiFi預(yù)加載”

在一些用戶(hù)體驗(yàn)良好的產(chǎn)品中，我們還可以看到設(shè)計(jì)者在一些加載、廣告頁(yè)面添加的溫馨提示比如“過(guò)程不消耗流量”、“已WiFi預(yù)加載”，這也是狀態(tài)可見(jiàn)原則更細(xì)節(jié)貼心的應(yīng)用。

流量模式警告反饋機(jī)制總結(jié)：

• 結(jié)合應(yīng)用本身的特點(diǎn)采取合適的反饋形式，如有的不需要強(qiáng)制打斷，有的必須打斷用戶(hù)，讓用戶(hù)確認(rèn)?？傮w設(shè)計(jì)原則是不過(guò)分打擾用戶(hù)，體驗(yàn)良好。
• 挖掘用戶(hù)可能會(huì)認(rèn)為消耗流量但并不會(huì)消耗流量的細(xì)節(jié)頁(yè)面，比如進(jìn)度加載、廣告等，通過(guò)提示告知用戶(hù)。這不僅是產(chǎn)品狀態(tài)可見(jiàn)，也是讓用戶(hù)心理狀態(tài)更“放心”的可見(jiàn)。

五、版本不兼容狀態(tài)提示

版本不兼容一般有兩種觸發(fā)情景:

1. 消息等內(nèi)容類(lèi)顯示不兼容提示

我們使用低版產(chǎn)品收到高版本用戶(hù)發(fā)來(lái)的消息，若此低版本產(chǎn)品不兼容此消息的顯示樣式，則應(yīng)該觸發(fā)該提示，提醒用戶(hù)當(dāng)前版本不兼容或者，一般以在消息旁邊注明版本不兼容，點(diǎn)擊該文字提示，彈出產(chǎn)品升級(jí)提示彈窗，引導(dǎo)用戶(hù)升級(jí)版本。

2. 非消息類(lèi)內(nèi)容版本不兼容提示

長(zhǎng)時(shí)間不更新版本過(guò)低，導(dǎo)致產(chǎn)品部分功能無(wú)法正常使用，此時(shí)提示用戶(hù)立即更新版本。常見(jiàn)直接以模態(tài)彈窗的方式提醒用戶(hù)更新版本比較合適，一是因?yàn)樵摴δ芤巡豢捎?，及時(shí)打斷，提醒用戶(hù)；二是彈窗內(nèi)可配置下載更新按鈕，引導(dǎo)用戶(hù)前往更新。

六、操作失敗

在操作過(guò)程中經(jīng)常伴隨著操作失敗的情況，此時(shí)要及時(shí)告知用戶(hù)失敗的狀態(tài)。一般以toast的形式進(jìn)行提示。

七、無(wú)權(quán)限狀態(tài)提示

無(wú)權(quán)限的情況在B端產(chǎn)品及辦公類(lèi)APP（如釘釘）常見(jiàn)，常見(jiàn)的處理方式有三種：

點(diǎn)擊后給出提示，APP使用toast或者缺省頁(yè)面比較合適，B端常用彈窗的形式提示用戶(hù)

頁(yè)面內(nèi)直接隱藏?zé)o權(quán)限的功能或內(nèi)容，雖然簡(jiǎn)單粗暴，但是容易給用戶(hù)帶來(lái)困擾，因?yàn)橛脩?hù)會(huì)相互比較，如果發(fā)現(xiàn)比別人少了什么，難免心里會(huì)打問(wèn)號(hào)甚至誤以為BUG。

用戶(hù)無(wú)權(quán)限點(diǎn)擊的功能置灰，不可點(diǎn)擊。用戶(hù)嘗試點(diǎn)擊后可以給toast或者tips提示，告知無(wú)權(quán)限。

八、功能建設(shè)狀態(tài)

一般未開(kāi)發(fā)上線(xiàn)的內(nèi)容不會(huì)在頁(yè)面內(nèi)占位顯示，但有一些用戶(hù)期待較高的功能我認(rèn)為可以配合如何運(yùn)營(yíng)的思路，在頁(yè)面內(nèi)相應(yīng)區(qū)域提示用戶(hù)“功能建設(shè)中，敬請(qǐng)期待哦”，可以增加用戶(hù)的期待感和參與感。

九、內(nèi)容刪除、違規(guī)導(dǎo)致的查看異常

1. 內(nèi)容刪除導(dǎo)致的查看異常

此時(shí)想查看內(nèi)容，頁(yè)面需要分為兩種情況考慮：

發(fā)布內(nèi)容鏈接被轉(zhuǎn)發(fā)后，如果刪除了原鏈接內(nèi)容，建議在之后轉(zhuǎn)發(fā)出的鏈接中注明被轉(zhuǎn)發(fā)的鏈接內(nèi)容已刪除，防止用戶(hù)點(diǎn)開(kāi)浪費(fèi)時(shí)間。

A發(fā)布內(nèi)容，B在信息流中瀏覽過(guò)，此時(shí)若A刪除，B用戶(hù)因?yàn)橛芯彺?，仍可以看到該?nèi)容，當(dāng)點(diǎn)擊打開(kāi)該內(nèi)容鏈接時(shí)，出現(xiàn)刪除提示。

2. 內(nèi)容違規(guī)造成的查看異常

內(nèi)容違規(guī)造成的異常比較特殊，一般在打開(kāi)前用戶(hù)是不知道違規(guī)的，所以打開(kāi)后頁(yè)面以缺省頁(yè)的形式注明違規(guī)即可，同時(shí)附帶違規(guī)法律及違規(guī)詳情。

End…未完待續(xù)，下面可能會(huì)寫(xiě)正常狀態(tài)相關(guān)的“狀態(tài)可見(jiàn)”原則的應(yīng)用總結(jié)。

作者：阿澤，公眾號(hào)：阿澤設(shè)計(jì)筆記

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

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