在產(chǎn)品設(shè)計(jì)中，有些設(shè)計(jì)是必須要遇到的，比如APP的升級(jí)更新，程序異常，網(wǎng)絡(luò)異常，登陸注冊(cè)等。這些問(wèn)題是逃不了的，那么針對(duì)網(wǎng)絡(luò)異常應(yīng)該怎么設(shè)計(jì)呢？
網(wǎng)絡(luò)異常包含哪些方面的？一是網(wǎng)絡(luò)切換；二是網(wǎng)絡(luò)斷開。
關(guān)于網(wǎng)絡(luò)切換，一般的處理都是從wifi切換到運(yùn)營(yíng)商網(wǎng)絡(luò)的時(shí)候，給用戶一個(gè)提醒，常用的方式就是一個(gè)彈出框，然后在彈框中說(shuō)明需要切換到運(yùn)營(yíng)商網(wǎng)絡(luò)，讓用戶去選擇是否切換，如果是土豪，毫不猶豫的選擇繼續(xù)，不然就乖乖的暫停啦。當(dāng)然什么樣的app需要給用戶提示呢？當(dāng)然消耗流量大的肯定是需要給用戶這個(gè)提示，是的，你答對(duì)了，但是如果僅僅是想到這個(gè)地方的話，那是遠(yuǎn)遠(yuǎn)不夠的。
我們想一個(gè)問(wèn)題，是否是一旦wifi切換到運(yùn)營(yíng)商網(wǎng)絡(luò)就提示呢？其實(shí)不是的，因?yàn)槲覀冊(cè)诳匆曨l或者聽音樂(lè)的時(shí)候，是有個(gè)預(yù)加載機(jī)制的，他可以緩存一些數(shù)據(jù)，如果還在播放緩存中的數(shù)據(jù)，那么它就不會(huì)提醒，只有你需要加載新的數(shù)據(jù)的時(shí)候，它才會(huì)提醒。那么為什么不能立刻提醒呢？一是因?yàn)槟氵€沒(méi)有用到運(yùn)營(yíng)商的流量，還沒(méi)有必要去提示；另外是因?yàn)樗锌赡軙?huì)還沒(méi)有用到運(yùn)營(yíng)商流量之前又切回到了wifi，這樣就避免了對(duì)用戶的打擾。同時(shí)如果切換了運(yùn)營(yíng)商網(wǎng)絡(luò)的話，則需要自動(dòng)切換音質(zhì)或者分辨率，為用戶節(jié)省流浪。常用的提示方式：
QQ音樂(lè)的提示：
其實(shí)到這里還沒(méi)有結(jié)束，因?yàn)樯鲜龅奶崾竞痛胧┮话惆l(fā)生在2G或者3G的情況下，隨著流量越來(lái)越多，4G的情況下一般就不做提示，或者僅僅就彈出一個(gè)toast而已。
那么針對(duì)這一點(diǎn)，有一個(gè)更聰明的做法，就是推廣流量包，不僅僅給用了一個(gè)提示，還給用戶提出一個(gè)解決的方案：
網(wǎng)易云音樂(lè)是怎么做的呢
所以如果從用戶交互友好性來(lái)說(shuō)，除了能即使給出提示，還要想是用彈框提示好，還是用toast提示，提示之后，要不要給用戶一個(gè)解決方案，通盤考慮之后在做決定。
除了網(wǎng)絡(luò)切換，網(wǎng)絡(luò)斷開的異常會(huì)遇到的更多，是所有的app需要考慮的問(wèn)題，那么網(wǎng)絡(luò)斷開的提示有幾種呢？
第一個(gè)就是toast，直接彈出提示，3s隨后就消失；彈出toast后不同的app做法不同，這個(gè)取決于APP的做法：
如果你是H5網(wǎng)頁(yè)的做法，那么彈出toast后，整個(gè)頁(yè)面就是空白的，是沒(méi)辦法進(jìn)行操作的，如下圖所示：
楚楚街怎么處理呢？
美的商城的做法：
它們都是H5頁(yè)面完成的，所以沒(méi)辦法進(jìn)行數(shù)據(jù)展示，第一張比較好的是如果網(wǎng)絡(luò)設(shè)置OK，用戶可以很明確的點(diǎn)擊重新加載刷新；而第二個(gè)就會(huì)讓用戶有一些迷茫，即使用戶下拉可以重新進(jìn)行刷新，但是這個(gè)行為是用戶的無(wú)意為之，在這之前，用戶不知道應(yīng)該怎么做，所以，第一種方式比較好。除了第一種方式還有一個(gè)更好的方式，就是給用戶提供設(shè)置網(wǎng)絡(luò)的入口，不需要用戶再退出應(yīng)用，找到設(shè)置，再去查看網(wǎng)絡(luò)情況，如下：
小米商城的處理方式：
這個(gè)時(shí)候點(diǎn)擊查看網(wǎng)絡(luò)設(shè)置，那么就可以直接去到網(wǎng)絡(luò)設(shè)置，簡(jiǎn)單方便。
如果是本地端來(lái)實(shí)現(xiàn)的，那么因?yàn)橛芯彺?，所以一般都?huì)進(jìn)行緩存的顯示，而不是一篇空白，從視覺(jué)上來(lái)看會(huì)更友好一些，如下：
今日頭條的提示：
不過(guò)它僅僅是給個(gè)提示，其實(shí)還是沒(méi)有給出用戶接下來(lái)應(yīng)該怎么辦的指導(dǎo)，那么下面就給出了更友好的設(shè)計(jì)：
京東的做法：
給出的處理方式：
它不僅給用了提示，還給出怎么辦，所以從產(chǎn)品體驗(yàn)角度，它更友好。
第二種直接給出網(wǎng)絡(luò)異常的彈出框，這個(gè)是除了toast的另外一種方式，它后面也會(huì)跟著兩種情況，H5網(wǎng)頁(yè)和native本地兩種實(shí)現(xiàn)方式。與上一個(gè)toast不同的區(qū)別就是他會(huì)阻止你的下一步操作，必須做出選擇才能往下走，所以在整個(gè)的感覺(jué)中，網(wǎng)絡(luò)異常的處理是最高優(yōu)先級(jí)的，那么兩種網(wǎng)絡(luò)異常設(shè)計(jì)的表現(xiàn)形式如下：
洋碼頭很是厲害，狂彈提示不讓進(jìn)：
樂(lè)視商城的彈出框：
第一張圖片是彈框方式，但是它是把用戶完全阻隔在外面的，根本進(jìn)不去，點(diǎn)擊確定之后，只要是網(wǎng)絡(luò)斷掉還是一直彈出這個(gè)框，用戶想去了解里面根本不可能，同時(shí)也沒(méi)有給出處理方式。第二個(gè)比第一個(gè)更近了一步，可以讓用戶去設(shè)置網(wǎng)絡(luò)，給出下一步的動(dòng)作；如果不做處理的話，還是能夠進(jìn)入app里面的，即使沒(méi)有網(wǎng)絡(luò)也可以對(duì)這個(gè)APP有個(gè)大致的了解，所以第二種會(huì)更好些。
但是本地端的實(shí)現(xiàn)遇到網(wǎng)絡(luò)異常，是彈框好還是在上面給出一個(gè)提示好呢，這也是京東和樂(lè)視商城采取的不同的方式。個(gè)人認(rèn)為看你的目的和計(jì)劃怎么去引導(dǎo)用戶。如果是進(jìn)入后有內(nèi)容可以呈現(xiàn)，也想讓用戶進(jìn)來(lái)看，只不過(guò)網(wǎng)絡(luò)導(dǎo)致了影響觀看，那么就采取京東的方式；但是像樂(lè)視商城，進(jìn)入之后第一頁(yè)面根本沒(méi)有可以給用戶看的，那么就彈出框比較合適，優(yōu)先讓用戶把網(wǎng)絡(luò)設(shè)置好。另外也根據(jù)交互的難易度來(lái)考慮，比如如果是在智能電視上面，那么即使是本地端實(shí)現(xiàn)的，也不能采取京東的方式，因?yàn)殡娨曅枰b控器一步一步操作，移到網(wǎng)絡(luò)設(shè)置的地方很復(fù)雜，所以建議采取彈框的方式更合適。
關(guān)于網(wǎng)絡(luò)異常處理也是需要好好思考的事情，不同的情況下采取的方式不同。它需要從自己的目的，用戶體驗(yàn)，實(shí)現(xiàn)方式等多種維度去考慮。個(gè)人見解肯定不完全對(duì)，只是作為個(gè)人的一個(gè)思考。
