當(dang)你(ni)正在(zai)用微(wei)信跟(gen)朋友胡侃，在(zai)b站看紀錄片，逛虎撲懟skr。這時網絡突然斷掉，我們應(ying)該(gai)給用戶什么樣(yang)的提(ti)示(shi)呢？最(zui)近(jin)因為自己也在(zai)梳理(li)類似(si)的場景(jing)，所以(yi)這篇文章(zhang)就來跟(gen)大(da)家分享(xiang)交流(liu)一(yi)下在(zai)網絡故(gu)障場景(jing)下如何給予用戶合適的提(ti)示(shi)。

所有的(de)報錯(cuo)提示/反饋(kui)都可以拆解為兩(liang)個(ge)部分(fen)：報錯(cuo)現象(xiang)和解決方案。因此網(wang)絡(luo)發生故障時我們首先應該告訴用戶您當前的(de)網(wang)絡(luo)狀態異常，讓(rang)用戶感知到(dao)這個(ge)事實，然后再提供解決方案。

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

不提示

首先我們需(xu)要明確(que)一(yi)個事(shi)實(shi)：不(bu)(bu)是(shi)每一(yi)種網絡故障(zhang)都需(xu)要提(ti)(ti)示用戶。這里的“不(bu)(bu)提(ti)(ti)示”其實(shi)是(shi)一(yi)個相對的說法，并不(bu)(bu)是(shi)真的不(bu)(bu)給用戶提(ti)(ti)示，而是(shi)只有(you)用戶執行了請求數(shu)據的操(cao)作才(cai)告知用戶網絡發生故障(zhang)。支付寶就(jiu)是(shi)一(yi)個典型(xing)的例子(zi)，即使斷網了，用戶基本也感知不(bu)(bu)到。只有(you)用戶請求了新數(shu)據，才(cai)會(hui)以toast通(tong)知用戶網絡異常。

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

當然我們需要給緩存(cun)數據設(she)置一個(ge)有效期，如(ru)果過(guo)了那個(ge)有效期，網(wang)絡(luo)還是沒有恢復(fu)正常，應該及(ji)時提示用戶網(wang)絡(luo)故障(zhang)。

無緩存

當然并不(bu)是(shi)每一(yi)(yi)個頁(ye)面(mian)都有緩存，對于(yu)沒(mei)有緩存數(shu)據的頁(ye)面(mian)，我們有兩(liang)種方案。一(yi)(yi)種是(shi)展示空頁(ye)面(mian)，另(ling)一(yi)(yi)種是(shi)展示骨架(jia)屏（Skeleton Screen）。

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

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

1 提(ti)供(gong)“刷(shua)新頁(ye)面”按(an)鈕；

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

兩(liang)種方(fang)案(an)都(dou)(dou)有自己的(de)道理，我個人更傾向于把(ba)兩(liang)種方(fang)案(an)進行融合(he)。展示“刷新頁面”的(de)按鈕，如果用戶點擊了還是沒有辦(ban)法請求(qiu)到數據，這(zhe)時以snackbar的(de)形式提供解(jie)決方(fang)案(an)。其實(shi)解(jie)決方(fang)案(an)都(dou)(dou)是引導用戶去系統設置(zhi)里檢查/開通網絡(luo)權限(xian)。

持續性提示

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

我(wo)嘗試著來分析一下，如果(guo)使用對(dui)話框，那(nei)么對(dui)話框的觸(chu)發(fa)機制有兩種：1 只要檢測(ce)出網(wang)絡不通(tong)暢(chang)，立即彈出對(dui)話框通(tong)知用戶；

2 檢測出(chu)(chu)網(wang)(wang)絡不(bu)(bu)通暢(chang)，立(li)即彈(dan)出(chu)(chu)對(dui)話框通知用(yong)戶(hu)(hu)，不(bu)(bu)做二次提示；第一種觸發(fa)機制明顯不(bu)(bu)合理，因為用(yong)戶(hu)(hu)使用(yong)微(wei)信并不(bu)(bu)一定(ding)非(fei)要網(wang)(wang)絡通暢(chang)，有的(de)用(yong)戶(hu)(hu)就是想(xiang)翻看(kan)一下聊天記錄。你這(zhe)邊只要檢測出(chu)(chu)網(wang)(wang)絡故障就會彈(dan)出(chu)(chu)一個對(dui)話框，會對(dui)用(yong)戶(hu)(hu)造成很大的(de)干擾。

第二種也不合理(li)，如果(guo)用戶所處的網(wang)(wang)絡環境不穩定，時斷時續，那(nei)么(me)一(yi)旦你(ni)第一(yi)次點(dian)擊關閉了彈出框(kuang)，用戶就無法感(gan)知到后續網(wang)(wang)絡的異常。

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

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

snackbar和通告欄(lan)的(de)(de)區別(bie)在于snackbar的(de)(de)位置是(shi)固定的(de)(de)，只要(yao)你的(de)(de)網絡不暢通，那(nei)么它一直(zhi)會(hui)出現(xian)在界面(mian)頂部。這是(shi)因為京(jing)(jing)東對(dui)于網絡的(de)(de)訴求比微(wei)信(xin)要(yao)更(geng)(geng)強，沒有(you)網絡微(wei)信(xin)用(yong)(yong)戶(hu)(hu)還可以翻看聊天記(ji)錄，京(jing)(jing)東用(yong)(yong)戶(hu)(hu)沒有(you)網絡還能干什么？沒有(you)辦法(fa)瀏覽商品，更(geng)(geng)不用(yong)(yong)說剁手了(le)，京(jing)(jing)東比微(wei)信(xin)更(geng)(geng)需要(yao)用(yong)(yong)戶(hu)(hu)去解決網絡故障(zhang)的(de)(de)問題。

網絡切換

除了斷(duan)網與(yu)弱網情況，另(ling)一個需要考慮的(de)問(wen)題(ti)是網絡切換(huan)。當網絡從4g切換(huan)至(zhi)(zhi)wifi,我們用(yong)toast來(lai)提(ti)示用(yong)戶沒(mei)有任(ren)何(he)問(wen)題(ti)，甚至(zhi)(zhi)不提(ti)示也沒(mei)事，不會對(dui)用(yong)戶產生太大的(de)影(ying)響(xiang)。但是反過(guo)來(lai)說，wifi突然(ran)斷(duan)掉，切換(huan)至(zhi)(zhi)4g網絡，我們還能如(ru)此(ci)淡定嗎？

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

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

最后插一句：網絡狀(zhuang)態由wifi切換(huan)至4G絕對(dui)不可以使用(yong)(yong)(yong)toast！因為安卓(zhuo)的某些機型中，用(yong)(yong)(yong)戶在系統設置中關閉推送會把toast也給禁(jin)用(yong)(yong)(yong)掉。對(dui)于這些用(yong)(yong)(yong)戶來(lai)說，他們是收不到提示的，很容易造成流(liu)量的損(sun)失。所(suo)以優先(xian)級(ji)高(gao)的反饋我們都只考慮使用(yong)(yong)(yong)對(dui)話框，因為對(dui)話框所(suo)承載的信息(xi)用(yong)(yong)(yong)戶100%會看到。