用戶在使用App時(shí)，除了正常的使用場(chǎng)景浙垫，還會(huì)碰到許多特殊場(chǎng)景：頁(yè)面內(nèi)容為空（缺省頁(yè)面）刨仑；網(wǎng)絡(luò)異常；信息輸入錯(cuò)誤绞呈；
App升級(jí)等贸人。如何友好的設(shè)計(jì)特殊場(chǎng)景下的App頁(yè)面，對(duì)于用戶體驗(yàn)至關(guān)重要佃声。這也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員的基本功艺智。
這些特殊情況下的APP設(shè)計(jì)我會(huì)陸續(xù)寫文章介紹，今天先講講“網(wǎng)絡(luò)異常時(shí)圾亏，APP該如何設(shè)計(jì)十拣？”
網(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缰趋，用戶一般只會(huì)在WiFi的網(wǎng)絡(luò)狀態(tài)下運(yùn)行（土豪用戶除外），像視頻APP陕见，音樂(lè)APP秘血，還有現(xiàn)在很火的直播APP。
當(dāng)網(wǎng)絡(luò)狀態(tài)從WiFi切換到3G/4G時(shí)评甜，為了防止用戶消耗流量灰粮，APP會(huì)采取一定的設(shè)計(jì)形式來(lái)告訴用戶，網(wǎng)絡(luò)狀態(tài)切換了忍坷，請(qǐng)小心粘舟。
QQ音樂(lè)熔脂、蝦米音樂(lè)，不僅提示了用戶的網(wǎng)絡(luò)狀態(tài)切換了柑肴，還告訴了用戶這種情況下該怎么辦，是繼續(xù)用流量播放還是訂購(gòu)免流量包晰骑。
告訴用戶發(fā)生了什么零聚，遇到了什么問(wèn)題，也給用戶提供解決問(wèn)題的辦法和入口些侍，這才是好的設(shè)計(jì)隶症。
網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷
網(wǎng)絡(luò)中斷，APP無(wú)法與服務(wù)器交換數(shù)據(jù)岗宣。一般有三種設(shè)計(jì)形式處理網(wǎng)絡(luò)中斷問(wèn)題蚂会。
①整頁(yè)提示
當(dāng)由于網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷等原因引起頁(yè)面數(shù)據(jù)無(wú)法調(diào)取狀態(tài)時(shí)，頁(yè)面做此處理耗式。
整頁(yè)異常的設(shè)計(jì)樣式包括三部分：icon或者插畫形式胁住；網(wǎng)絡(luò)異常文案；重新連接網(wǎng)絡(luò)的button刊咳。
上面兩圖分別是閃電購(gòu)和貓眼的整頁(yè)異常設(shè)計(jì)彪见，都采用了品牌形象的插畫形式，不僅增添了趣味性還起到了宣傳品牌形象的作品娱挨，可謂一舉兩得余指。閃電購(gòu)在button下還增加了一個(gè)入口：搞不定網(wǎng)絡(luò)，看看小貼士跷坝。因?yàn)橛胁糠钟脩艨赡懿⒉磺宄?dāng)前的網(wǎng)絡(luò)中斷是由于什么引起的酵镜，尤其對(duì)于小白用戶來(lái)說(shuō)，添加一個(gè)下貼士的入口柴钻，幫助用戶解決問(wèn)題淮韭。所以從用戶體驗(yàn)的角度來(lái)看，閃電狗比貓眼做的更用心贴届。
②預(yù)設(shè)圖和占位符提示
當(dāng)由于網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷等原因引起頁(yè)面數(shù)據(jù)無(wú)法調(diào)取狀態(tài)時(shí)靠粪，我們可以事先在APP中預(yù)設(shè)好圖標(biāo)和占位符來(lái)替代加載的數(shù)字、圖片毫蚓、文字等數(shù)據(jù)占键。也就是預(yù)處理過(guò)程。
這種設(shè)計(jì)形式有一個(gè)最大的好處就是當(dāng)網(wǎng)絡(luò)中斷時(shí)間很短時(shí)绍些，用戶幾乎察覺(jué)不到網(wǎng)絡(luò)中斷捞慌，APP就已經(jīng)恢復(fù)正常了耀鸦。這就是利用設(shè)計(jì)技巧柬批，不給用戶帶來(lái)額外操作成本和認(rèn)知負(fù)擔(dān)啸澡。
③toast和dialog提示
網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷時(shí)，用戶還在繼續(xù)操作APP氮帐，為了提示用戶嗅虏，會(huì)采用toast或dialog的形式來(lái)提示用戶網(wǎng)絡(luò)異常。
上面兩個(gè)頁(yè)面都使用了dialog來(lái)提示用戶網(wǎng)絡(luò)異常上沐，但是又有所區(qū)別皮服。因?yàn)樽筮叺膒ath直接給出“設(shè)置”入口，讓用戶直接前往設(shè)置界面開啟網(wǎng)絡(luò)参咙，而右邊招行的dialog就遜色一點(diǎn)龄广，僅僅是提示了用戶網(wǎng)絡(luò)異常，如果僅僅是提示用戶網(wǎng)絡(luò)異常蕴侧，直接用toast的會(huì)更好择同，因?yàn)閠oast不會(huì)獲得用戶焦點(diǎn)，并且不會(huì)中斷用戶的操作净宵。
摩拜單車和網(wǎng)易考拉采用了toast的形式提示用戶網(wǎng)絡(luò)異常敲才。
上述說(shuō)的三種設(shè)計(jì)形式并不是孤立的，是可以配合使用的择葡。上圖的網(wǎng)易考拉APP就使用了整頁(yè)提示和toast提示紧武。形式可以千變?nèi)f化，但總歸是為了服務(wù)功能敏储，而功能又立足于用戶需求阻星。深刻理解用戶需求才是靈活運(yùn)用設(shè)計(jì)形式的根本。
