2017年第26篇文章。

用戶在使用App時信夫，除了正常的使用場景窃蹋，還會碰到許多特殊場景：頁面內(nèi)容為空（缺省頁面）；網(wǎng)絡(luò)異常静稻；信息輸入錯誤警没；App升級等。如何友好的設(shè)計特殊場景下的App頁面振湾，對于用戶體驗至關(guān)重要杀迹。這也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計人員的基本功。

前面幾篇文章介紹了注冊登錄頁押搪、啟動頁树酪、加載頁的設(shè)計，今天來講講“網(wǎng)絡(luò)異常時大州，APP該如何設(shè)計续语？”

網(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力试，用戶一般只會在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è)計付翁。

2.網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷

網(wǎng)絡(luò)中斷或信號不好简肴，APP無法與服務(wù)器交換數(shù)據(jù)，這時要分兩種情況考慮：無緩存數(shù)據(jù)時和有緩存數(shù)據(jù)百侧。

①無緩存數(shù)據(jù)時

A.整頁提示：

當整個頁面內(nèi)容都因為網(wǎng)絡(luò)異常導(dǎo)致未加載成功砰识，采用整頁提示的方式。

閃電購&貓眼

整頁異常的設(shè)計樣式包括三部分：icon或者插畫形式佣渴；網(wǎng)絡(luò)異常文案辫狼；重試或者前往WiFi設(shè)置的button（或者沒有button，直接點擊頁面空白區(qū)域）辛润。

上面兩圖分別是閃電購和貓眼的整頁異常設(shè)計膨处，都采用了品牌形象的插畫形式，不僅增添了趣味性還起到了強調(diào)品牌的作用砂竖，可謂一舉兩得真椿。閃電購在button下還增加了一個入口：搞不定網(wǎng)絡(luò)，看看小貼士晦溪。因為有部分用戶可能并不清楚當前的網(wǎng)絡(luò)中斷是由于什么引起的瀑粥，尤其對于小白用戶來說挣跋，添加一個下貼士的入口三圆，幫助用戶解決問題。所以從用戶體驗的角度來看避咆，閃電狗比貓眼做的更用心舟肉。

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)容的情況剂府，這個時候會使用占位符替代未加載出來的圖片，用灰色塊替代未加載出來的文字淤袜。（可以參考上篇文章《特殊情況下的APP設(shè)計③：如何處理加載頁面铡羡？》）

keep&一個

這種設(shè)計形式有一個最大的好處就是當網(wǎng)絡(luò)中斷時間很短時烦周，用戶幾乎察覺不到網(wǎng)絡(luò)中斷论矾，APP就已經(jīng)恢復(fù)正常了。這就是利用設(shè)計技巧饱亿，不給用戶帶來額外操作成本和認知負擔闰靴。

此外蚂且，占位符的方式也可以作為loading的解決方案。

②.有緩存數(shù)據(jù)時

A.列表提示：

當頁面有緩存數(shù)據(jù)時泵肄，可以用list的設(shè)計形式腐巢，來提示用戶冯丙，網(wǎng)絡(luò)異常遭京，請前去檢查網(wǎng)絡(luò)設(shè)置哪雕。

微信&京東

B.dialog提示：

除了上述list的提示形式热监，還有的APP采用了dialog的形式來提示用戶。

喜馬拉雅&path

上面兩個頁面都使用了dialog來提示用戶網(wǎng)絡(luò)異常，采用dialog不僅僅可以提示用戶網(wǎng)絡(luò)異常慌申，還能給出“設(shè)置”的入口理郑，讓用戶直接前往WiFi界面設(shè)置網(wǎng)絡(luò)您炉。如果僅僅是提示用戶網(wǎng)絡(luò)異常赚爵，直接用toast的會更好，因為toast不會獲得用戶焦點唁奢，并且不會中斷用戶的操作麻掸。

C.toast提示：

當網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷時赐纱，用戶還在繼續(xù)操作APP千所，為了提示用戶，會在用戶每次觸發(fā)操作時利用toast提示用戶網(wǎng)絡(luò)異常整份。讓用戶的行為即使在網(wǎng)絡(luò)異常時也能得到反饋。

美團外賣&微博

上圖的美團外賣和微博都采用了toast的形式提示用戶網(wǎng)絡(luò)異常。

總結(jié)一下讲冠，本文說的關(guān)于網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計形式并不是孤立的，也不是只能單獨使用玻熙，是可以配合使用的嗦随。喜馬拉雅的首頁即采用了list方式提示用戶枚尼，同時采用了dialog的形式砂吞。記昨咧薄：設(shè)計形式是可以千變?nèi)f化袭蝗，但總歸是為了服務(wù)功能，而功能又立足于用戶和產(chǎn)品需求。