網(wǎng)絡(luò)異常時,APP該如何設(shè)計?

形式可以千變?nèi)f化,但總歸是為了服務(wù)功能,而功能又立足于用戶需求。深刻理解用戶需求才是靈活運用設(shè)計形式的根本。
用戶在使用App時,除了正常的使用場景,還會碰到許多特殊場景:頁面內(nèi)容為空(缺省頁面);網(wǎng)絡(luò)異常;信息輸入錯誤;App升級等。如何友好的設(shè)計特殊場景下的App頁面,對于用戶體驗至關(guān)重要。這也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計人員的基本功。
這些特殊情況下的APP設(shè)計我會陸續(xù)寫文章介紹,今天先講講“網(wǎng)絡(luò)異常時,APP該如何設(shè)計?”
網(wǎng)絡(luò)異常有兩種情況,一種是網(wǎng)絡(luò)切換,即從WiFi狀態(tài)切換到3G/4G網(wǎng)絡(luò);第二種是網(wǎng)絡(luò)中斷,APP與服務(wù)器的數(shù)據(jù)傳輸。
網(wǎng)絡(luò)切換
一些需要消耗大量流量的APP,用戶一般只會在WiFi的網(wǎng)絡(luò)狀態(tài)下運行(土豪用戶除外),像視頻APP,音樂APP,還有現(xiàn)在很火的直播APP。
當網(wǎng)絡(luò)狀態(tài)從WiFi切換到3G/4G時,為了防止用戶消耗流量,APP會采取一定的設(shè)計形式來告訴用戶,網(wǎng)絡(luò)狀態(tài)切換了,請小心。
QQ音樂&蝦米音樂
QQ音樂、蝦米音樂,不僅提示了用戶的網(wǎng)絡(luò)狀態(tài)切換了,還告訴了用戶這種情況下該怎么辦,是繼續(xù)用流量播放還是訂購免流量包。
告訴用戶發(fā)生了什么,遇到了什么問題,也給用戶提供解決問題的辦法和入口,這才是好的設(shè)計。
網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷
網(wǎng)絡(luò)中斷,APP無法與服務(wù)器交換數(shù)據(jù)。一般有三種設(shè)計形式處理網(wǎng)絡(luò)中斷問題。
①整頁提示
當由于網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷等原因引起頁面數(shù)據(jù)無法調(diào)取狀態(tài)時,頁面做此處理。
閃電購&貓眼
整頁異常的設(shè)計樣式包括三部分:icon或者插畫形式;網(wǎng)絡(luò)異常文案;重新連接網(wǎng)絡(luò)的button。
上面兩圖分別是閃電購和貓眼的整頁異常設(shè)計,都采用了品牌形象的插畫形式,不僅增添了趣味性還起到了宣傳品牌形象的作品,可謂一舉兩得。閃電購在button下還增加了一個入口:搞不定網(wǎng)絡(luò),看看小貼士。因為有部分用戶可能并不清楚當前的網(wǎng)絡(luò)中斷是由于什么引起的,尤其對于小白用戶來說,添加一個下貼士的入口,幫助用戶解決問題。所以從用戶體驗的角度來看,閃電狗比貓眼做的更用心。
②預(yù)設(shè)圖和占位符提示
當由于網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷等原因引起頁面數(shù)據(jù)無法調(diào)取狀態(tài)時,我們可以事先在APP中預(yù)設(shè)好圖標和占位符來替代加載的數(shù)字、圖片、文字等數(shù)據(jù)。也就是預(yù)處理過程。
京東
keep&一個
這種設(shè)計形式有一個最大的好處就是當網(wǎng)絡(luò)中斷時間很短時,用戶幾乎察覺不到網(wǎng)絡(luò)中斷,APP就已經(jīng)恢復(fù)正常了。這就是利用設(shè)計技巧,不給用戶帶來額外操作成本和認知負擔(dān)。
③toast和dialog提示
網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷時,用戶還在繼續(xù)操作APP,為了提示用戶,會采用toast或dialog的形式來提示用戶網(wǎng)絡(luò)異常。
path&招行
上面兩個頁面都使用了dialog來提示用戶網(wǎng)絡(luò)異常,但是又有所區(qū)別。因為左邊的path直接給出“設(shè)置”入口,讓用戶直接前往設(shè)置界面開啟網(wǎng)絡(luò),而右邊招行的dialog就遜色一點,僅僅是提示了用戶網(wǎng)絡(luò)異常,如果僅僅是提示用戶網(wǎng)絡(luò)異常,直接用toast的會更好,因為toast不會獲得用戶焦點,并且不會中斷用戶的操作。
摩拜單車&網(wǎng)易考拉
摩拜單車和網(wǎng)易考拉采用了toast的形式提示用戶網(wǎng)絡(luò)異常。
上述說的三種設(shè)計形式并不是孤立的,是可以配合使用的。上圖的網(wǎng)易考拉APP就使用了整頁提示和toast提示。形式可以千變?nèi)f化,但總歸是為了服務(wù)功能,而功能又立足于用戶需求。深刻理解用戶需求才是靈活運用設(shè)計形式的根本。
作者:鄒志楠,個人公眾號:UE修養(yǎng),一枚交互設(shè)計師
本文由 @鄒志楠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
干貨!學(xué)習(xí)到了,謝謝
謝謝分享這種干貨文章
有無緩存的情況下要分別處理
居然看到你了,哈哈哈
能說下怎么具體處理么?
有些不能用整頁是因為 webview加載的頁面,不同情況不同考慮。