建站
咨詢
售后
建站咨詢
新聞中心
本文說的關(guān)于網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計(jì)形式并不是孤立的，也不是只能單獨(dú)使用，是可以配合使用的。
2017年第26篇文章。
用戶在使用App時(shí)，除了正常的使用場景，還會(huì)碰到許多特殊場景：頁面內(nèi)容為空（缺省頁面）；網(wǎng)絡(luò)異常；信息輸入錯(cuò)誤；App升級(jí)等。如何友好的設(shè)計(jì)特殊場景下的App頁面，對于用戶體驗(yàn)至關(guān)重要。這也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員的基本功。
前面幾篇文章介紹了注冊登錄頁、啟動(dòng)頁、加載頁的設(shè)計(jì)，今天來講講“網(wǎng)絡(luò)異常時(shí)，APP該如何設(shè)計(jì)？”
網(wǎng)絡(luò)異常呈現(xiàn)在用戶面前有兩種情況，一種是網(wǎng)絡(luò)切換，即從WiFi狀態(tài)切換到3G/4G網(wǎng)絡(luò)；第二種是網(wǎng)絡(luò)中斷，APP與服務(wù)器的數(shù)據(jù)傳輸。
1.網(wǎng)絡(luò)切換一些需要消耗大量流量的APP，用戶一般只會(huì)在WiFi的網(wǎng)絡(luò)狀態(tài)下運(yùn)行（土豪用戶除外），像視頻APP，音樂APP，還有現(xiàn)在很火的直播APP。
當(dāng)網(wǎng)絡(luò)狀態(tài)從WiFi切換到3G/4G時(shí)，為了防止用戶消耗流量，APP會(huì)采取一定的設(shè)計(jì)形式來告訴用戶，網(wǎng)絡(luò)狀態(tài)切換了，請小心。
QQ音樂&蝦米音樂
QQ音樂、蝦米音樂，不僅提示了用戶的網(wǎng)絡(luò)狀態(tài)切換了，還告訴了用戶這種情況下該怎么辦，是繼續(xù)用流量播放還是訂購免流量包。
告訴用戶發(fā)生了什么，遇到了什么問題，也給用戶提供解決問題的辦法和入口，這才是好的設(shè)計(jì)。
2.網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷網(wǎng)絡(luò)中斷或信號(hào)不好，APP無法與服務(wù)器交換數(shù)據(jù)，這時(shí)要分兩種情況考慮：無緩存數(shù)據(jù)時(shí)和有緩存數(shù)據(jù)。
（1）無緩存數(shù)據(jù)時(shí)A.整頁提示：
當(dāng)整個(gè)頁面內(nèi)容都因?yàn)榫W(wǎng)絡(luò)異常導(dǎo)致未加載成功，采用整頁提示的方式。
閃電購&貓眼
整頁異常的設(shè)計(jì)樣式包括三部分：icon或者插畫形式；網(wǎng)絡(luò)異常文案；重試或者前往WiFi設(shè)置的button（或者沒有button，直接點(diǎn)擊頁面空白區(qū)域）。
上面兩圖分別是閃電購和貓眼的整頁異常設(shè)計(jì)，都采用了品牌形象的插畫形式，不僅增添了趣味性還起到了強(qiáng)調(diào)品牌的作用，可謂一舉兩得。閃電購在button下還增加了一個(gè)入口：搞不定網(wǎng)絡(luò)，看看小貼士。因?yàn)橛胁糠钟脩艨赡懿⒉磺宄?dāng)前的網(wǎng)絡(luò)中斷是由于什么引起的，尤其對于小白用戶來說，添加一個(gè)下貼士的入口，幫助用戶解決問題。所以從用戶體驗(yàn)的角度來看，閃電狗比貓眼做的更用心。
B.占位符提示：
此種情況多出現(xiàn)于采用native技術(shù)架構(gòu)的頁面，頁面框架是直接呈現(xiàn)的，不需要聯(lián)網(wǎng)，APP只需要聯(lián)網(wǎng)獲取框架內(nèi)的數(shù)據(jù)即可。所以頁面呈現(xiàn)出了框架，但是沒有內(nèi)容的情況，這個(gè)時(shí)候會(huì)使用占位符替代未加載出來的圖片，用灰色塊替代未加載出來的文字。（可以參考上篇文章《特殊情況下的APP設(shè)計(jì)③：如何處理加載頁面？》）
keep&一個(gè)
這種設(shè)計(jì)形式有一個(gè)的好處就是當(dāng)網(wǎng)絡(luò)中斷時(shí)間很短時(shí)，用戶幾乎察覺不到網(wǎng)絡(luò)中斷，APP就已經(jīng)恢復(fù)正常了。這就是利用設(shè)計(jì)技巧，不給用戶帶來額外操作成本和認(rèn)知負(fù)擔(dān)。
此外，占位符的方式也可以作為loading的解決方案。
（2）有緩存數(shù)據(jù)時(shí)A.列表提示：
當(dāng)頁面有緩存數(shù)據(jù)時(shí)，可以用list的設(shè)計(jì)形式，來提示用戶，網(wǎng)絡(luò)異常，請前去檢查網(wǎng)絡(luò)設(shè)置。
微信&京東
B.dialog提示：
除了上述list的提示形式，還有的APP采用了dialog的形式來提示用戶。
喜馬拉雅&path
上面兩個(gè)頁面都使用了dialog來提示用戶網(wǎng)絡(luò)異常，采用dialog不僅僅可以提示用戶網(wǎng)絡(luò)異常，還能給出“設(shè)置”的入口，讓用戶直接前往WiFi界面設(shè)置網(wǎng)絡(luò)。如果僅僅是提示用戶網(wǎng)絡(luò)異常，直接用toast的會(huì)更好，因?yàn)閠oast不會(huì)獲得用戶焦點(diǎn)，并且不會(huì)中斷用戶的操作。
C.toast提示：
當(dāng)網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷時(shí)，用戶還在繼續(xù)操作APP，為了提示用戶，會(huì)在用戶每次觸發(fā)操作時(shí)利用toast提示用戶網(wǎng)絡(luò)異常。讓用戶的行為即使在網(wǎng)絡(luò)異常時(shí)也能得到反饋。
閃電購&微博
上圖的閃電購和微博都采用了toast的形式提示用戶網(wǎng)絡(luò)異常。
總結(jié)一下，本文說的關(guān)于網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計(jì)形式并不是孤立的，也不是只能單獨(dú)使用，是可以配合使用的。喜馬拉雅的首頁即采用了list方式提示用戶，同時(shí)采用了dialog的形式。記住：設(shè)計(jì)形式是可以千變?nèi)f化，但總歸是為了服務(wù)功能，而功能又立足于用戶和產(chǎn)品需求。
相關(guān)閱讀特殊情況下的APP設(shè)計(jì)（1）：注冊登錄頁設(shè)計(jì)
特殊情況下的APP設(shè)計(jì)（2）：啟動(dòng)頁的設(shè)計(jì)
特殊情況下的APP設(shè)計(jì)（3）：如何處理加載頁面
#關(guān)于作者#鄒志楠，微信公眾號(hào)：鄒志楠，人人都是產(chǎn)品經(jīng)理關(guān)于作者。用戶體驗(yàn)設(shè)計(jì)師，專注于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)。
本文未經(jīng)許可，禁止轉(zhuǎn)載。
新聞標(biāo)題：特殊情況下的APP設(shè)計(jì)（4）：網(wǎng)絡(luò)異常時(shí)該如何設(shè)計(jì)？
當(dāng)前地址：http://www.ef60e0e.cn/article/cgedio.html
