當你正(zheng)在(zai)(zai)用(yong)微信(xin)跟朋(peng)友(you)胡侃，在(zai)(zai)b站看紀錄片，逛虎撲懟skr。這時網絡突然斷掉(diao)，我們應該給(gei)用(yong)戶(hu)什么樣(yang)的提示呢？最近因為自己也在(zai)(zai)梳(shu)理類似(si)的場景，所以(yi)這篇文(wen)章就(jiu)來跟大家分(fen)享交流一下在(zai)(zai)網絡故障場景下如何(he)給(gei)予用(yong)戶(hu)合適的提示。

所有的(de)報(bao)錯提(ti)示/反饋都(dou)可以拆(chai)解為(wei)兩個部(bu)分：報(bao)錯現象(xiang)和解決方案(an)。因此網絡發生(sheng)故障時我(wo)們首先(xian)應(ying)該告訴(su)用(yong)戶(hu)您(nin)當(dang)前的(de)網絡狀(zhuang)態(tai)異(yi)常，讓用(yong)戶(hu)感知到這(zhe)個事實，然(ran)后(hou)再提(ti)供解決方案(an)。

目前(qian)來說，常見(jian)的(de)報錯樣式有(you)toast、snackbar、對話框、通(tong)告欄、界面內嵌與空頁面。最(zui)近看了(le)一下自(zi)己之前(qian)的(de)文(wen)章(zhang)，發(fa)現都是(shi)基(ji)于組(zu)(zu)件來闡述適用(yong)場景(jing)。這種解構方式有(you)個問(wen)題，那(nei)就(jiu)是(shi)現實(shi)情況中，產品或者(zhe)交互設計師都是(shi)基(ji)于場景(jing)去(qu)確定(ding)合適的(de)組(zu)(zu)件。因此為了(le)更方便大家理(li)解，這里(li)我不(bu)具體介紹每個組(zu)(zu)件的(de)用(yong)法，而是(shi)以場景(jing)來定(ding)義來組(zu)(zu)件。

不提示

首先(xian)我們需要明確一(yi)個(ge)事實(shi)：不(bu)(bu)是(shi)每一(yi)種網(wang)絡(luo)故(gu)障都需要提(ti)示(shi)用(yong)(yong)戶(hu)。這里的“不(bu)(bu)提(ti)示(shi)”其實(shi)是(shi)一(yi)個(ge)相對的說法(fa)，并不(bu)(bu)是(shi)真的不(bu)(bu)給用(yong)(yong)戶(hu)提(ti)示(shi)，而是(shi)只有(you)用(yong)(yong)戶(hu)執行了請求(qiu)數據的操作才告(gao)知用(yong)(yong)戶(hu)網(wang)絡(luo)發生故(gu)障。支付寶(bao)就是(shi)一(yi)個(ge)典(dian)型的例子，即使斷網(wang)了，用(yong)(yong)戶(hu)基本也感知不(bu)(bu)到。只有(you)用(yong)(yong)戶(hu)請求(qiu)了新數據，才會以toast通知用(yong)(yong)戶(hu)網(wang)絡(luo)異常。

支付寶這種高冷也是有(you)底氣的(de)，因為其多數(shu)頁(ye)面都(dou)有(you)緩存(cun)機制(zhi)，用戶不(bu)用每次進入這個頁(ye)面都(dou)要去(qu)服(fu)務端請求(qiu)一遍數(shu)據。類似的(de)還有(you)QQ音樂(le)、咕咚，對于這些產(chan)品來說斷網(wang)并不(bu)會(hui)帶(dai)來災難性的(de)影響。因為斷網(wang)不(bu)影響我去(qu)聽緩存(cun)或下載(zai)好的(de)歌曲，也不(bu)會(hui)影響記錄運動(dong)數(shu)據。所(suo)以對于此類應用來說，當網(wang)絡報錯的(de)時候，只要用戶沒有(you)觸發請求(qiu)數(shu)據的(de)操作，沒有(you)必要提示(shi)用戶。

當(dang)然我們需(xu)要給緩存數據設置一個有效期(qi)，如果(guo)過了那個有效期(qi)，網絡還(huan)是(shi)沒有恢復正(zheng)常(chang)，應(ying)該及時提(ti)示用戶網絡故障。

無緩存

當然并(bing)不是(shi)每一(yi)(yi)個(ge)頁(ye)面都有(you)緩存，對于(yu)沒有(you)緩存數據(ju)的頁(ye)面，我們有(you)兩種(zhong)方案。一(yi)(yi)種(zhong)是(shi)展(zhan)示(shi)空頁(ye)面，另一(yi)(yi)種(zhong)是(shi)展(zhan)示(shi)骨架屏（Skeleton Screen）。

骨架(jia)屏顧名思義(yi)就是(shi)展示頁(ye)面(mian)的框架(jia)，當(dang)數據請求(qiu)完(wan)成時(shi)再(zai)渲(xuan)染頁(ye)面(mian)。這種先占好位(wei)置(zhi)再(zai)加(jia)載數據的模式也被稱之為占位(wei)符，都(dou)是(shi)一個意思。

最后再說空頁面，其實空頁面的展(zhan)示方案也(ye)可(ke)以分為兩種(zhong)：

1 提供“刷新頁面”按(an)鈕；

2 提供“解決方案”按(an)鈕；

兩種方(fang)案(an)都(dou)有(you)自己(ji)的道(dao)理，我個人更(geng)傾向于把兩種方(fang)案(an)進行融合。展示“刷新頁(ye)面”的按鈕(niu)，如果(guo)用戶點擊了還是沒(mei)有(you)辦法請求到數據，這時以snackbar的形式提(ti)供解決(jue)(jue)方(fang)案(an)。其實解決(jue)(jue)方(fang)案(an)都(dou)是引導(dao)用戶去系(xi)統(tong)設置里檢查/開通(tong)網絡權限。

持續性提示

有(you)緩存數據的(de)頁面(mian)(mian)，支付寶可(ke)(ke)以不(bu)提示用戶，但是(shi)(shi)對(dui)(dui)(dui)于QQ和微信(xin)這類即時通(tong)訊類的(de)應用來說，給(gei)予用戶網絡(luo)故障的(de)反饋是(shi)(shi)非常有(you)必要(yao)的(de)。因為(wei)(wei)如果不(bu)給(gei)提示，我不(bu)知(zhi)道對(dui)(dui)(dui)方(fang)突然不(bu)回我信(xin)息是(shi)(shi)我惹對(dui)(dui)(dui)方(fang)生氣了(le)還(huan)是(shi)(shi)我網絡(luo)故障收不(bu)到。QQ和微信(xin)這里(li)統一(yi)采(cai)用的(de)是(shi)(shi)通(tong)告欄，用戶點擊之(zhi)后進入一(yi)個展示網絡(luo)故障解決方(fang)案的(de)頁面(mian)(mian)。這里(li)可(ke)(ke)能會有(you)人問，為(wei)(wei)什么(me)不(bu)使(shi)用對(dui)(dui)(dui)話框，對(dui)(dui)(dui)話框也可(ke)(ke)以完成跳轉動作(zuo)啊。

我嘗試著來分析(xi)一下，如果使用(yong)對話(hua)(hua)框(kuang)，那么(me)對話(hua)(hua)框(kuang)的觸發(fa)機制有兩(liang)種：1 只要檢測(ce)出網絡不(bu)通(tong)暢，立即彈(dan)出對話(hua)(hua)框(kuang)通(tong)知用(yong)戶；

2 檢測(ce)出(chu)網(wang)絡(luo)不通(tong)暢(chang)，立(li)即(ji)彈出(chu)對話(hua)框通(tong)知(zhi)用戶，不做(zuo)二次提示；第一種觸(chu)發(fa)機制明顯(xian)不合理，因(yin)為(wei)用戶使(shi)用微信并不一定非要網(wang)絡(luo)通(tong)暢(chang)，有的用戶就(jiu)是(shi)想翻看(kan)一下(xia)聊天記錄(lu)。你這(zhe)邊只要檢測(ce)出(chu)網(wang)絡(luo)故障就(jiu)會(hui)彈出(chu)一個對話(hua)框，會(hui)對用戶造成很大的干擾(rao)。

第二(er)種也不合理(li)，如果用(yong)戶所處的網絡環境不穩定，時斷時續(xu)，那么一(yi)旦你第一(yi)次點擊(ji)關(guan)閉(bi)了彈(dan)出框，用(yong)戶就無法感知到(dao)后續(xu)網絡的異常(chang)。

所以微信用戶(hu)對于網(wang)絡故(gu)障提(ti)示的要(yao)求是在(zai)給(gei)予用戶(hu)持(chi)續性的提(ti)示前(qian)提(ti)下，還(huan)不能干擾用戶(hu)正常操作。好了好了，這個問題我知道了，但是我不需要(yao)立即去處理。

可以滿足(zu)上面這個條件的控件有兩個：snackbar和通(tong)告(gao)(gao)欄，微信用(yong)(yong)的是通(tong)告(gao)(gao)欄，京東(dong)用(yong)(yong)的是snackbar。以京東(dong)為(wei)例，用(yong)(yong)戶(hu)(hu)在使用(yong)(yong)京東(dong)過程中(zhong)如果網絡突然發生故障，那(nei)么會(hui)從(cong)界面頂部彈(dan)出一(yi)(yi)個snackbar來通(tong)知用(yong)(yong)戶(hu)(hu)，用(yong)(yong)戶(hu)(hu)點(dian)擊之后會(hui)進入一(yi)(yi)個頁(ye)面，展示一(yi)(yi)些解決方(fang)案。其實在上面我也提到(dao)過，所謂(wei)的解決方(fang)案就是讓用(yong)(yong)戶(hu)(hu)去系統(tong)設(she)置頁(ye)檢(jian)查/開通(tong)網絡權限，我們可以像網易云音(yin)樂一(yi)(yi)樣(yang)直接提供一(yi)(yi)個跳(tiao)轉(zhuan)鏈(lian)接，節(jie)省(sheng)用(yong)(yong)戶(hu)(hu)操(cao)作步驟。

snackbar和通告欄的區別在于snackbar的位置是固定的，只要(yao)你的網(wang)絡(luo)(luo)不暢通，那么它(ta)一(yi)直會出現在界面(mian)頂部。這是因為京(jing)東對于網(wang)絡(luo)(luo)的訴求比微(wei)信(xin)(xin)要(yao)更強，沒(mei)有(you)網(wang)絡(luo)(luo)微(wei)信(xin)(xin)用(yong)(yong)戶(hu)還可以翻(fan)看(kan)聊天記錄，京(jing)東用(yong)(yong)戶(hu)沒(mei)有(you)網(wang)絡(luo)(luo)還能干什么？沒(mei)有(you)辦(ban)法瀏覽商品，更不用(yong)(yong)說剁手了，京(jing)東比微(wei)信(xin)(xin)更需要(yao)用(yong)(yong)戶(hu)去解決(jue)網(wang)絡(luo)(luo)故(gu)障的問題(ti)。

網絡切換

除(chu)了斷網(wang)(wang)與弱(ruo)網(wang)(wang)情況，另一個需要考慮的問(wen)題是網(wang)(wang)絡切(qie)換。當(dang)網(wang)(wang)絡從(cong)4g切(qie)換至wifi,我們用(yong)toast來提示用(yong)戶(hu)沒(mei)有任何問(wen)題，甚至不提示也沒(mei)事(shi)，不會對用(yong)戶(hu)產生太大的影響。但(dan)是反過來說，wifi突(tu)然斷掉，切(qie)換至4g網(wang)(wang)絡，我們還能如此淡定嗎？

當我用wifi觀看視頻，突然wifi斷掉，會自(zi)動切換(huan)至4G網(wang)絡。為了避免讓(rang)用戶在不知(zhi)情(qing)的(de)情(qing)況下(xia)耗費大(da)量的(de)流量，我們應該給用戶一個網(wang)絡變更的(de)提(ti)示(shi)，用戶確認之后(hou)才可以繼續觀看。提(ti)示(shi)的(de)方式目前來說主要界面(mian)內嵌(qian)和對話框，嗶哩嗶哩和網(wang)易(yi)云音樂這里用的(de)都是界面(mian)內嵌(qian)。

有意思的(de)是(shi)在網(wang)易云音樂中(zhong)，如(ru)果你聽歌過程中(zhong)wifi突然斷掉，那么4G網(wang)絡會繼(ji)續緩存歌曲，而QQ音樂是(shi)不會繼(ji)續緩存的(de)。僅從這點上來說(shuo)，我個人覺(jue)得騰訊做的(de)更(geng)貼心。

最后插一句：網(wang)絡狀態由wifi切換至(zhi)4G絕對(dui)不可(ke)以使用(yong)(yong)toast！因為安卓的(de)某些機型中，用(yong)(yong)戶在系統設置(zhi)中關閉推送會把toast也給禁用(yong)(yong)掉。對(dui)于這(zhe)些用(yong)(yong)戶來說(shuo)，他們是(shi)收不到(dao)提示的(de)，很(hen)容易造成流量(liang)的(de)損失(shi)。所以優(you)先級高的(de)反饋我們都(dou)只(zhi)考慮使用(yong)(yong)對(dui)話框(kuang)，因為對(dui)話框(kuang)所承載(zai)的(de)信息用(yong)(yong)戶100%會看(kan)到(dao)。