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