尼爾森十大可用性原則——“狀態(tài)可見”原則
系統(tǒng)應(yīng)該讓用戶時刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當(dāng)前目標(biāo)、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當(dāng)?shù)姆答?，防止用戶使用出現(xiàn)錯誤。
我們知道，用戶在和頁面發(fā)生交互時會遇到各種狀態(tài)，此時需要通過一定的界面反饋將信息反饋給用戶，“反饋”是人機(jī)交互最重要的原則，無論是視覺（界面變化）、聽覺（聲音提醒）、觸覺（震動），都可以幫助用戶理解自己所在頁面的狀態(tài)及接下來會發(fā)生了什么、怎么做。
其實討論“狀態(tài)可見原則”就是討論如何把“反饋”設(shè)計得更合理。下面我從產(chǎn)品常見的幾大異常狀態(tài)切入，討論出現(xiàn)異常狀態(tài)時對應(yīng)的解決方案，讓錯誤狀態(tài)“可見”。
本文主要討論了以下常見9種異常，無限期補(bǔ)充：
1.網(wǎng)絡(luò)異常
2.空狀態(tài)
3.服務(wù)器異常
4.流量模式警告
5.版本不兼容
6.操作失敗
7.無權(quán)限
8.功能建設(shè)狀態(tài)
9.內(nèi)容刪除、違規(guī)導(dǎo)致的查看異常
1.網(wǎng)絡(luò)異常狀態(tài)提示
當(dāng)設(shè)備丟失網(wǎng)絡(luò)連接時，導(dǎo)致網(wǎng)頁/APP無法傳輸數(shù)據(jù)導(dǎo)致的異常狀態(tài)。網(wǎng)絡(luò)異常通常有兩種觸發(fā)場景：
1.自動觸發(fā)：斷網(wǎng)后，用戶進(jìn)入軟件時，程序檢測到無網(wǎng)絡(luò)，自動提示
2.被動觸發(fā)：斷網(wǎng)時用戶在軟件內(nèi)操作，系統(tǒng)被動觸發(fā)無網(wǎng)絡(luò)提醒
在無網(wǎng)絡(luò)的情況下打開APP時頁面需要刷新，此時需要提醒用戶網(wǎng)絡(luò)問題，常見的提醒方式有如下四種，分別適合于不同的應(yīng)用場景：
對于這幾種提示類型，除了本篇討論的斷網(wǎng)提示之外，還有很多的其它的應(yīng)用場景，如操作提示、進(jìn)度提醒、程序提醒等。我們來看下各種提示形式的特點及應(yīng)用場景。
(1) 缺省頁面提示
在內(nèi)容更新頻繁的內(nèi)容型產(chǎn)品（如視頻、帖子動態(tài)類）中常用缺省頁的形式表現(xiàn)無網(wǎng)絡(luò)狀態(tài)，直接明了，附有個性化插圖及提示文案，同時帶有【刷新】或者【解決方案】入口，引導(dǎo)用戶點擊查看原因解決問題。
(2) tips提示
tips提示常見于頁面頂部或者底部固定，更適用于于信息列表類頁面，如圖示的釘釘及微信等，采用tips的形式，樣式上與列表形式更接近，和諧統(tǒng)一。
點擊可以跳轉(zhuǎn)系統(tǒng)設(shè)置或幫助頁面。
(3) toast提示類
toast提示的特點是彈出后自動消失（一般至少為1s），視覺層級高，能夠吸引用戶的注意力。消失后用戶可以在軟件中繼續(xù)其它點擊動作。但是由于存在時間短，容易被用戶忽視，所以一般不會放置過多文字和重要信息。
此種方式很適合比較用于有不需要聯(lián)網(wǎng)即可查看/使用部分功能內(nèi)容（緩存）的產(chǎn)品中，比如網(wǎng)易云音樂，無網(wǎng)絡(luò)時仍然可以選擇聽本地歌曲。
表現(xiàn)形式上，toast出現(xiàn)的位置以中、上為主，因為它的出現(xiàn)是在動作之后，所以位置不能偏離動作發(fā)生位置過多，以免造成視覺的跳躍感。
Material Design（Android）中有一個與常見Toast類似的提示--Snackbars，是一種針對操作的輕量級反饋機(jī)制，一般在頁面下方浮出，在該頁面層級最高，同樣在一定時間后自動消失。
與toast最大的區(qū)別是允許用戶交互，用戶可以手動點擊頁面其它地方或手動滑動關(guān)閉snackbars，有時也會帶有操作按鈕，提供繼續(xù)或撤銷功能。
Snackbars使用原則：
演示示例：
有興趣的同學(xué)可以去matreia design官網(wǎng)了解snackbars：
https://www.material.io/components/snackbars/#anatomy
(4) 模態(tài)彈窗（Alert）
模態(tài)彈窗打斷用戶的操作，用于提供重要信息或者要求用戶決策。出現(xiàn)時會禁用所有的應(yīng)用程序功能，并且一直顯示在屏幕上，直到用戶選擇確認(rèn)、關(guān)閉或已采取必要措施為止。但由于會打斷用戶，所以要謹(jǐn)慎使用。
模態(tài)彈窗的使用原則：
因此模態(tài)彈窗更適用于以下兩種情景：
網(wǎng)絡(luò)異常反饋形式總結(jié)：
2.空狀態(tài)提示
由于空狀態(tài)沒有實質(zhì)性的頁面內(nèi)容，所以需要反饋給用戶相關(guān)信息去添加或重新提交數(shù)據(jù)請求。
一般來說，我們說的空狀態(tài)有兩種觸發(fā)場景：
(1) 需要用戶主動添加信息的空狀態(tài)
此類空狀態(tài)一般有時會通過文案提示引導(dǎo)用戶創(chuàng)建內(nèi)容，如上圖中的“下廚房”APP,利用了俏皮文案加操作指引的方式引導(dǎo)用戶創(chuàng)建菜譜。
設(shè)計形式上需要注意：遵循產(chǎn)品整體風(fēng)格、文案+插圖的形式比較常見美觀。
(2) 用戶通過APP內(nèi)的操作如搜索、刪除等導(dǎo)致的空狀態(tài)
這種被動空狀態(tài)的情況更需要提示用戶
為什么會出現(xiàn)空狀態(tài)的情況
怎樣做可以解決空狀態(tài)
其它可能你需要的功能等
從上圖實例中可以看出，功能系統(tǒng)較為完善的產(chǎn)品中，當(dāng)有被動空狀態(tài)出現(xiàn)時，往往會給用戶其它選擇避免當(dāng)前的“尷尬”，而不是冷冰冰的空白頁面，不知道的還以為正在搜索或者是卡了呢！
空狀態(tài)反饋機(jī)制總結(jié)：
3.服務(wù)器異常狀態(tài)提示
因為網(wǎng)絡(luò)或者服務(wù)器問題導(dǎo)致的頁面加載失敗問題，同樣需要反饋給用戶，告知用戶當(dāng)前的狀態(tài)問題，如最近因為疫情隔離的原因各種服務(wù)器崩潰的軟件。（愛奇藝↑）
服務(wù)器異常導(dǎo)致的加載失敗等問題可以采用同上文討論的網(wǎng)絡(luò)異常問題的解決方案，但仍然需要針對不同異常場景采用不同的設(shè)計方案：
如果是簡單的服務(wù)器滿員等問題導(dǎo)致頁面加載失敗，可以用toast或缺省頁面的形式提醒用戶。
如果有詳細(xì)告知用戶服務(wù)器的問題的需要（如金融交易相關(guān)），為避免造成用戶恐慌，可以采用承載信息更多的模態(tài)彈窗提示，吸引用戶的注意力，把情況說明白。
需要注意的是提示的問題類型的文案描述要清晰，畢竟網(wǎng)絡(luò)問題和服務(wù)器問題是不同的，避免誤導(dǎo)用戶進(jìn)行無用的修復(fù)。如果我知道是因為服務(wù)器崩了而不是我網(wǎng)絡(luò)的問題，那我可能就去微博看是不是上熱搜了，而不是重啟網(wǎng)絡(luò)試試，對吧~
服務(wù)器異常反饋機(jī)制總結(jié)：
4.流量模式警告狀態(tài)提示
當(dāng)處于流量模式下用戶觀看視頻、下載文件、播放歌曲等會消耗大量流量，此時有必要警告用戶目前處于流量模式，以免應(yīng)用先消耗大量流量導(dǎo)致欠費(fèi)問題。
針對該警告的提示形式有以下幾種：
(1) 播放區(qū)/加載區(qū)文字提示
主要適用于視頻播放、直播類軟件，將提示和播放區(qū)結(jié)合設(shè)計的好處是：用戶原先進(jìn)入播放頁后緊接著就會關(guān)注視頻播放區(qū)域，所以這種提示很符合應(yīng)用場景，比較自然和直白，也能直接看到需要消耗多少流量。
(2) 簡單toast提示，在切換WiFi之前會繼續(xù)消耗流量
常見于抖音等短視頻軟件，這種軟件對用戶的體驗流暢度要求很高，單個短視頻消耗流量并不多，而且在播放下個視頻之前不需要提前緩存。
綜合來看，采用toast的形式既不會過度干擾用戶觀看視頻的體驗，居中顯示的提示也容易被用戶注意到，可以在播放下一個短視頻時可以及時更改流量模式。同時，遇到網(wǎng)絡(luò)不穩(wěn)定的情況，WIFI流量互切時，也不至于打斷用戶觀看視頻。
(3) 模態(tài)彈窗提醒
現(xiàn)在軟件一般都內(nèi)置流量模式設(shè)置，用戶可以依據(jù)自己的情況開啟流量模式下的查看/下載功能，一般默認(rèn)關(guān)閉流量模式下的下載功能。
以騰訊視頻為例可以看到，點擊下載時從開始的提示到設(shè)置過程，兩次出現(xiàn)了模態(tài)彈窗提示，并輔以詳細(xì)的文字說明?？梢娔B(tài)彈窗的形式比較適合在“下載”這種通過用戶主動觸發(fā)且流量消耗大的動作情景下使用，減少用戶的錯誤點擊，并且可以提供設(shè)置按鈕入口。
(4) 貼心的“已WiFi預(yù)加載”
在一些用戶體驗良好的產(chǎn)品中，我們還可以看到設(shè)計者在一些加載、廣告頁面添加的溫馨提示比如“過程不消耗流量”、“已WiFi預(yù)加載”，這也是狀態(tài)可見原則更細(xì)節(jié)貼心的應(yīng)用。
流量模式警告反饋機(jī)制總結(jié)：
5.版本不兼容狀態(tài)提示
版本不兼容一般有兩種觸發(fā)情景:
(1) 消息等內(nèi)容類顯示不兼容提示
我們使用低版產(chǎn)品收到高版本用戶發(fā)來的消息，若此低版本產(chǎn)品不兼容此消息的顯示樣式，則應(yīng)該觸發(fā)該提示，提醒用戶當(dāng)前版本不兼容或者，一般以在消息旁邊注明版本不兼容，點擊該文字提示，彈出產(chǎn)品升級提示彈窗，引導(dǎo)用戶升級版本。
(2) 非消息類內(nèi)容版本不兼容提示
長時間不更新版本過低，導(dǎo)致產(chǎn)品部分功能無法正常使用，此時提示用戶立即更新版本。常見直接以模態(tài)彈窗的方式提醒用戶更新版本比較合適，一是因為該功能已不可用，及時打斷，提醒用戶；二是彈窗內(nèi)可配置下載更新按鈕，引導(dǎo)用戶前往更新。
6.操作失敗
在操作過程中經(jīng)常伴隨著操作失敗的情況，此時要及時告知用戶失敗的狀態(tài)。一般以toast的形式進(jìn)行提示。
7.無權(quán)限狀態(tài)提示
無權(quán)限的情況在B端產(chǎn)品及辦公類APP（如釘釘）常見，常見的處理方式有三種：
(1) 跳轉(zhuǎn)后給出提示，APP端使用toast或者缺省頁面比較合適，B端常用彈窗的形式提示用戶
(2) 頁面內(nèi)直接隱藏?zé)o權(quán)限的功能或內(nèi)容，雖然簡單粗暴，但是容易給用戶帶來困擾，因為用戶會相互比較，如果發(fā)現(xiàn)比別人少了什么，難免心里會打問號甚至誤以為BUG。
(3) 用戶無權(quán)限點擊的功能置灰，不可點擊。用戶嘗試點擊后可以給一個toast或者tips提示，告知無權(quán)限。
8.功能建設(shè)狀態(tài)
一般未開發(fā)上線的內(nèi)容不會在頁面內(nèi)占位顯示，但有一些用戶期待較高的功能我認(rèn)為可以配合如何運(yùn)營的思路，在頁面內(nèi)相應(yīng)區(qū)域提示用戶“功能建設(shè)中，敬請期待哦”，可以增加用戶的期待感和參與感。
9.內(nèi)容刪除、違規(guī)導(dǎo)致的查看異常
內(nèi)容刪除導(dǎo)致的查看異常
此時想查看內(nèi)容，頁面需要分為兩種情況考慮：
(1) 發(fā)布內(nèi)容鏈接被轉(zhuǎn)發(fā)后，如果刪除了原鏈接內(nèi)容，建議在之后轉(zhuǎn)發(fā)出的鏈接中注明被轉(zhuǎn)發(fā)的鏈接內(nèi)容已刪除，防止用戶點開浪費(fèi)時間。
(2) A發(fā)布內(nèi)容，B在信息流中瀏覽過，此時若A刪除，B用戶因為有緩存，仍可以看到該內(nèi)容，當(dāng)點擊打開該內(nèi)容鏈接時，出現(xiàn)刪除提示。
內(nèi)容違規(guī)造成的查看異常
內(nèi)容違規(guī)造成的異常比較特殊，一般在打開前用戶是不知道違規(guī)的，所以打開后頁面以缺省頁的形式注明違規(guī)即可，同時附帶違規(guī)法律及違規(guī)詳情。
End...未完待續(xù)，下面可能會寫正常狀態(tài)相關(guān)的“可見”設(shè)計。
本篇小結(jié)
“魔鬼存在于細(xì)節(jié)之中”
通過本次的總結(jié)分析，發(fā)現(xiàn)有很多自己之前做項目并沒有考慮到的異常場景，自然也沒有做相應(yīng)的設(shè)計，算是有些遺憾吧。可以發(fā)現(xiàn)，這些異常都是我們經(jīng)常會遇到的，不同產(chǎn)品對他們的優(yōu)化程度也參差不齊。我認(rèn)為，當(dāng)今產(chǎn)品趨同化越來越嚴(yán)重的時代，誰能把諸如此類的細(xì)節(jié)做細(xì)、做精、做的貼近用戶，誰就有更大的機(jī)會殺出重圍。
在如今產(chǎn)品快速開發(fā)迭代的背景下，快難免會有缺憾，希望自己接下來設(shè)計時，心能夠靜下來，做真正關(guān)懷用戶的產(chǎn)品。畢竟，如果沒有人做這些異常狀態(tài)的反饋，那這些產(chǎn)品只不過在冷冰冰的耍帥罷了。
公眾號：阿澤設(shè)計筆記
Powered by Froala Editor
公zhong號：百感交互集
19
作品
354
粉絲
15
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊