關(guān)于異常狀態(tài)的設(shè)計(jì)總結(jié)

6 評(píng)論 13725 瀏覽 185 收藏 16 分鐘

本文對(duì)幾種常見(jiàn)的異常狀態(tài)進(jìn)行設(shè)計(jì)總結(jié),其中介紹了不同異常狀態(tài)的表現(xiàn)形式以及我們應(yīng)展現(xiàn)的設(shè)計(jì)狀態(tài)與規(guī)范。

異常狀態(tài)多在特殊場(chǎng)景下出現(xiàn),比如服務(wù)器異常、網(wǎng)絡(luò)異常等,因?yàn)楫惓顟B(tài)出現(xiàn)的概率是較低的,所以異常狀態(tài)也常常會(huì)被忽略,等到實(shí)際碰到的時(shí)候才會(huì)意識(shí)到原來(lái)還有這種狀態(tài)……

作為交互設(shè)計(jì)師,在完成主流程設(shè)計(jì)后,也應(yīng)該考慮到異常場(chǎng)景。

從全局性出發(fā),我們可以預(yù)先考慮到產(chǎn)品將會(huì)碰到的異常狀態(tài),針對(duì)不同的異常狀態(tài)制定相應(yīng)的設(shè)計(jì)規(guī)范,在后續(xù)的設(shè)計(jì)需求中直接復(fù)用即可。

下面對(duì)幾種常見(jiàn)的異常狀態(tài)進(jìn)行設(shè)計(jì)總結(jié)。

一、網(wǎng)絡(luò)異常

1. 原因

網(wǎng)絡(luò)異常的原因主要有以下兩種原因:

(1)網(wǎng)絡(luò)連接權(quán)限

針對(duì)某App的網(wǎng)絡(luò)連接權(quán)限可以通過(guò)手機(jī)進(jìn)行設(shè)置,可設(shè)置為關(guān)閉應(yīng)用使用數(shù)據(jù),或者只允許應(yīng)用在WLAN下使用,或者允許應(yīng)用在WLAN與蜂窩網(wǎng)絡(luò)下均可使用。

所以以下均屬于網(wǎng)絡(luò)異常的情況:

  • 關(guān)閉應(yīng)用使用數(shù)據(jù),在流量或WI-FI環(huán)境下打開(kāi)App
  • 只允許應(yīng)用在WI-FI下使用,但在流量環(huán)境下打開(kāi)App

(2)網(wǎng)絡(luò)連接狀況

在斷網(wǎng)(打開(kāi)飛行模式)、弱網(wǎng)(手機(jī)信號(hào)差)的情況下, 也無(wú)法正常獲取數(shù)據(jù)。

2. 處理方式

當(dāng)網(wǎng)絡(luò)異常時(shí),用戶點(diǎn)擊進(jìn)入新頁(yè)面或在當(dāng)前頁(yè)進(jìn)行操作時(shí),App會(huì)通過(guò)異常狀態(tài)缺省頁(yè)或交互反饋來(lái)告知用戶當(dāng)前異常狀態(tài)和解決方案。主要分為兩種情況:

(1)當(dāng)用戶操作進(jìn)入App新的頁(yè)面時(shí),常以缺省頁(yè)的形式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。當(dāng)應(yīng)用檢測(cè)到有可用網(wǎng)絡(luò)時(shí),缺省頁(yè)將自動(dòng)刷新頁(yè)面內(nèi)容。

比如網(wǎng)易云音樂(lè)在無(wú)網(wǎng)絡(luò)連接下,進(jìn)入新頁(yè)面時(shí),缺省頁(yè)以簡(jiǎn)單的文案告知無(wú)網(wǎng)絡(luò)的基礎(chǔ)原因,通過(guò)查看詳情來(lái)告知用戶解決方案以及引導(dǎo)如何解決問(wèn)題。

美團(tuán)、騰訊視頻等,引導(dǎo)用戶檢查網(wǎng)絡(luò)權(quán)限設(shè)置和稍后再嘗試刷新頁(yè)面,稍后再試是因?yàn)槿蹙W(wǎng)環(huán)境是暫時(shí)的,比如在地鐵上高鐵上或者某處手機(jī)信號(hào)接收較差的地方。

(2)當(dāng)用戶點(diǎn)擊操作當(dāng)前頁(yè)面時(shí),比如上拉加載頁(yè)面、下拉刷新頁(yè)面,點(diǎn)贊、關(guān)注等操作時(shí),常以toast或?qū)υ捒虻男问教崾居脩簟?/p>

比如網(wǎng)易云音樂(lè),網(wǎng)絡(luò)異常情況下下拉刷新或上拉加載頁(yè)面均進(jìn)行對(duì)話框提示,并引導(dǎo)用戶檢查網(wǎng)絡(luò)權(quán)限設(shè)置。

美團(tuán)外賣,無(wú)網(wǎng)絡(luò)連接環(huán)境下,在我的訂單頁(yè)面進(jìn)行評(píng)價(jià)操作,會(huì)進(jìn)行toast提示。

二、流量警告

前面說(shuō)完網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范,接下來(lái)就不得不提到流量警告的場(chǎng)景。

對(duì)于需要消耗大量流量的應(yīng)用:

(1)在流量環(huán)境下進(jìn)行需要消耗大流量的操作,比如播放/下載音視頻等,頁(yè)面會(huì)進(jìn)行流量警告。比如網(wǎng)易云音樂(lè)在流量環(huán)境下打開(kāi)MV。

(2)在WI-FI環(huán)境下切換到流量環(huán)境時(shí)通常應(yīng)用會(huì)主動(dòng)暫停進(jìn)程并進(jìn)行流量警告,并在頁(yè)面上告知用戶原因,讓用戶選擇是否繼續(xù)進(jìn)程。

比如網(wǎng)易云音樂(lè)、愛(ài)奇藝、芒果TV、BiliBili等音視頻娛樂(lè)App,在以上2種場(chǎng)景下,在視頻畫布上進(jìn)行告知讓用自己選擇是否繼續(xù)播放,同時(shí)也提供按鈕入口讓用戶辦理業(yè)務(wù)可免流量進(jìn)行播放。其中,芒果TV和BiliBili的繼續(xù)播放按鈕還貼心地告知了用戶將要消耗的流量值。

對(duì)以上兩種場(chǎng)景的處理方式進(jìn)行歸納,均為流量警告方式。

三、網(wǎng)絡(luò)異常和流量警告適用場(chǎng)景快速查詢

總結(jié)完網(wǎng)絡(luò)異常和流量警告的設(shè)計(jì)規(guī)范,我們知道其中影響因素包含:網(wǎng)絡(luò)連接權(quán)限、網(wǎng)絡(luò)連接狀況以及網(wǎng)絡(luò)環(huán)境的變化,下面做一個(gè)小總結(jié),以便快速查詢。

在總結(jié)之前強(qiáng)調(diào)一下,網(wǎng)絡(luò)權(quán)限設(shè)置是針對(duì)某App,連接Wi-Fi和流量是針對(duì)手機(jī)(所有應(yīng)用)。以iOS為例,設(shè)置截圖如下:

情況一:當(dāng)前網(wǎng)絡(luò)環(huán)境不變化

情況二:當(dāng)前網(wǎng)絡(luò)環(huán)境發(fā)生變化

針對(duì)以上情況,表現(xiàn)狀態(tài)為“網(wǎng)絡(luò)異常”,則參照網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范;表現(xiàn)狀態(tài)為“流量警告”,則參照流量警告的設(shè)計(jì)規(guī)范。

四、服務(wù)器異常

服務(wù)器出錯(cuò)的情況是較少出現(xiàn)的,若出現(xiàn)服務(wù)器異常,其異常的時(shí)間也較為短暫。

一般不提示具體原因,處理方式為進(jìn)入新頁(yè)面的話則以缺省頁(yè)(文案或是文案+插畫)的形式進(jìn)行提示+重試按鈕,例如,進(jìn)入小米金融貸頁(yè)面時(shí)服務(wù)器出現(xiàn)異常,缺省頁(yè)提示錯(cuò)誤原因同時(shí)提供重試按鈕。

點(diǎn)擊操作的話則以toast或?qū)υ捒虻男问竭M(jìn)行提示并重試,比如下圖的段友a(bǔ)pp,服務(wù)器出錯(cuò),刷新頁(yè)面后進(jìn)行toast提示;前段時(shí)間超級(jí)火的zao應(yīng)用,朋友圈火爆傳播,一度造成服務(wù)器訪問(wèn)過(guò)載,制作視頻的時(shí)候應(yīng)用給出了對(duì)話框提示。

五、加載失敗

1. 原因

在數(shù)據(jù)加載過(guò)程中,導(dǎo)致異常的原因可能是:
1、網(wǎng)絡(luò)異常導(dǎo)致加載失敗

2、服務(wù)器請(qǐng)求數(shù)據(jù)失敗導(dǎo)致加載失敗

2. 處理方式

1、如果是因?yàn)榫W(wǎng)絡(luò)異常導(dǎo)致加載失敗,處理方式參照網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范。

2、如果是服務(wù)器請(qǐng)求數(shù)據(jù)失敗,處理方式參照服務(wù)器異常的設(shè)計(jì)規(guī)范。

六、空狀態(tài)

1. 原因

空狀態(tài)就是指頁(yè)面當(dāng)前無(wú)內(nèi)容,主要在以下場(chǎng)景下會(huì)出現(xiàn)空狀態(tài)的情況:

  1. 無(wú)權(quán)限,某些界面和功能會(huì)針對(duì)不同的角色設(shè)定不同的使用權(quán)限,無(wú)權(quán)限訪問(wèn)的頁(yè)面會(huì)出現(xiàn)空狀態(tài)的情況
  2. 搜索無(wú)結(jié)果,搜索無(wú)相應(yīng)結(jié)果會(huì)進(jìn)行空狀態(tài)提示
  3. 初始內(nèi)容為空,例如無(wú)瀏覽記錄、無(wú)收藏、無(wú)購(gòu)買記錄、無(wú)訂單記錄、無(wú)下載記錄等
  4. 內(nèi)容被刪,若內(nèi)容允許被清空,內(nèi)容清空后會(huì)回到初始前的空狀態(tài)

2. 處理方式

當(dāng)前頁(yè)面為空一般會(huì)提示用戶當(dāng)前頁(yè)面為空狀態(tài),同時(shí)也可能會(huì)做適當(dāng)?shù)囊龑?dǎo)。

針對(duì)空狀態(tài)的場(chǎng)景,主要采取以下幾種設(shè)計(jì)原則:

(1)用戶無(wú)權(quán)限

一般在B端產(chǎn)品中會(huì)碰到這種場(chǎng)景,通常來(lái)說(shuō),若用戶無(wú)權(quán)限訪問(wèn)某功能模塊的話,處理方式一般是將該功能模塊對(duì)用戶進(jìn)行隱藏。

若有其他原因不能隱藏對(duì)應(yīng)功能模塊,處理方式為缺省頁(yè)面(文案或是文案+插畫),但文案要足夠明確,告知無(wú)權(quán)限的用戶該如何處理才能訪問(wèn),一般是聯(lián)系管理員添加權(quán)限。

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

搜索無(wú)結(jié)果的處理方式一般有兩種處理方式,一種是缺省頁(yè)面(文案或是文案+插畫),另一種是在第一種的基礎(chǔ)上加上相關(guān)推薦。具體用哪一種根據(jù)設(shè)計(jì)目標(biāo)來(lái)決定。

比如網(wǎng)易云音樂(lè)搜索音樂(lè)無(wú)結(jié)果直接用文案告知。豆瓣搜索書影單無(wú)結(jié)果以插畫+文案的形式展示結(jié)果。美團(tuán)搜索不到相應(yīng)的內(nèi)容,應(yīng)用直接推薦其他商家刺激用戶購(gòu)買。

另外也有應(yīng)用會(huì)添加一些引導(dǎo)操作收集用戶數(shù)據(jù)來(lái)優(yōu)化搜索,比如微信讀書找不到相關(guān)的數(shù)據(jù),在頁(yè)面的底部提供一個(gè)入口讓用戶填寫書籍名稱和作者,基于用戶的反饋數(shù)據(jù),微信讀書在后續(xù)書城書目的收錄工作中,就可以優(yōu)先收錄用戶搜索率較高的書籍了,在優(yōu)化搜索的同時(shí)也提供了用戶反饋訴求的入口。

(3)初始內(nèi)容為空

需要用戶進(jìn)行操作產(chǎn)生內(nèi)容的頁(yè)面,初始狀態(tài)一般為空,和搜索無(wú)結(jié)果的處理方式類似,有2種處理方式,一種是缺省頁(yè)面(文案或是文案+插畫),另一種是在第一種的基礎(chǔ)上加上快捷入口或推薦內(nèi)容,其目的都是在于引導(dǎo)用戶進(jìn)行操作從而產(chǎn)生數(shù)據(jù)。具體用哪一種還是根據(jù)設(shè)計(jì)目標(biāo)來(lái)決定。

直接用缺省頁(yè)面告知方式上,例如網(wǎng)易云音樂(lè),個(gè)人未發(fā)布相關(guān)動(dòng)態(tài),該動(dòng)態(tài)頁(yè)面直接用簡(jiǎn)短的文案告知用戶暫無(wú)相關(guān)動(dòng)態(tài)。

提供快捷入口上,比如微信讀書,用戶未加入書籍到書架時(shí),進(jìn)入書架頁(yè)面,會(huì)有一句話文案引起用戶共鳴,另外附上找書按鈕方便用戶快捷進(jìn)入書城進(jìn)行找書。

如果通過(guò)用戶瀏覽記錄和搜索行為等能夠分析出用戶的興趣愛(ài)好,進(jìn)行精準(zhǔn)推送,那在空狀態(tài)頁(yè)面進(jìn)行推薦引導(dǎo)也不乏是一種很好的嘗試。比如網(wǎng)易云音樂(lè)、騰訊視頻和美團(tuán)均有采取該方式。

網(wǎng)易云音樂(lè)里頭我從未購(gòu)買或領(lǐng)取過(guò)數(shù)字專輯,該頁(yè)面也是無(wú)數(shù)據(jù)的,網(wǎng)易云音樂(lè)在頁(yè)面底部進(jìn)行了數(shù)據(jù)專輯的推薦,具體的推薦算法不太清楚,我覺(jué)得可以是銷售量較大的專輯,或者根據(jù)我個(gè)人的搜索和瀏覽記錄進(jìn)行相關(guān)推薦,最后通過(guò)埋點(diǎn)數(shù)據(jù)分析通過(guò)推薦引導(dǎo)購(gòu)買是否提高了專輯購(gòu)買率。

(4)內(nèi)容被刪除

頁(yè)面內(nèi)容被刪除區(qū)分場(chǎng)景說(shuō)明。

第一種是需要用戶操作產(chǎn)生內(nèi)容的頁(yè)面,用戶也可以通過(guò)刪除將頁(yè)面內(nèi)容清空。

對(duì)于該場(chǎng)景,當(dāng)頁(yè)面內(nèi)容被用戶清空后,頁(yè)面內(nèi)容為空,處理方式和初始狀態(tài)為空類似,以缺省頁(yè)(文案或是文案+插畫)的形式告知或在此基礎(chǔ)上加上快捷入口或用戶推薦。

比如清空網(wǎng)易云音樂(lè)中我的下載列表所有單曲、清空騰訊視頻我的緩存視頻,清空微信讀書的書架,清空后的狀態(tài)和初始狀態(tài)是一致的。

另一種場(chǎng)景是的頁(yè)面入口依然存在,但二級(jí)頁(yè)面內(nèi)容已經(jīng)被刪除了,二級(jí)空頁(yè)面的設(shè)計(jì)處理方式是以缺省頁(yè)(文案或是文案+插畫)的形式告知,文案信息告知用戶內(nèi)容已被刪除。

例如某微信訂閱號(hào)的文章發(fā)布記錄中的某篇文章已經(jīng)被刪除,點(diǎn)擊進(jìn)入二級(jí)頁(yè)面后的提示如下:

七、功能重建

功能已上線,后期進(jìn)行產(chǎn)品升級(jí)或迭代功能正在開(kāi)發(fā)中,功能入口沒(méi)有進(jìn)行關(guān)閉還是允許用戶訪問(wèn),通常會(huì)在用戶進(jìn)入該頁(yè)面之后進(jìn)行對(duì)話對(duì)話框提示,告知原因。

總結(jié)

以上對(duì)幾種常見(jiàn)異常狀態(tài)的設(shè)計(jì)規(guī)范進(jìn)行了總結(jié),相對(duì)正常狀態(tài),異常狀態(tài)較為少見(jiàn),容易忽略,大家可以參照以上規(guī)范進(jìn)行異常狀態(tài)設(shè)計(jì)和優(yōu)化調(diào)整。后面碰到其他異常狀態(tài),我會(huì)繼續(xù)補(bǔ)充。

 

作者:辛小仲;一名正在成長(zhǎng)的交互設(shè)計(jì)師,公眾號(hào):辛小仲。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫的相當(dāng)不錯(cuò)

    來(lái)自河南 回復(fù)
  2. 感覺(jué)很全面??

    來(lái)自貴州 回復(fù)
  3. ??????

    回復(fù)
  4. 很棒棒

    來(lái)自廣東 回復(fù)
  5. 太棒了

    來(lái)自湖南 回復(fù)
  6. 非常棒

    回復(fù)