當(dāng)你正在用微信跟朋友胡侃堤瘤，在b站看紀(jì)錄片，逛虎撲懟skr慎王。這時(shí)網(wǎng)絡(luò)突然斷掉蚓土，我們應(yīng)該給用戶什么樣的提示呢？最近因?yàn)樽约阂苍谑崂眍愃频膱?chǎng)景赖淤，所以這篇文章就來跟大家分享交流一下在網(wǎng)絡(luò)故障場(chǎng)景下如何給予用戶合適的提示蜀漆。

所有的報(bào)錯(cuò)提示/反饋都可以拆解為兩個(gè)部分：報(bào)錯(cuò)現(xiàn)象和解決方案。因此網(wǎng)絡(luò)發(fā)生故障時(shí)我們首先應(yīng)該告訴用戶您當(dāng)前的網(wǎng)絡(luò)狀態(tài)異常咱旱，讓用戶感知到這個(gè)事實(shí)确丢，然后再提供解決方案。

目前來說莽龟，常見的報(bào)錯(cuò)樣式有toast蠕嫁、snackbar、對(duì)話框毯盈、通告欄剃毒、界面內(nèi)嵌與空頁面。最近看了一下自己之前的文章搂赋，發(fā)現(xiàn)都是基于組件來闡述適用場(chǎng)景赘阀。這種解構(gòu)方式有個(gè)問題，那就是現(xiàn)實(shí)情況中脑奠，產(chǎn)品或者交互設(shè)計(jì)師都是基于場(chǎng)景去確定合適的組件基公。因此為了更方便大家理解，這里我不具體介紹每個(gè)組件的用法宋欺，而是以場(chǎng)景來定義來組件轰豆。

不提示

首先我們需要明確一個(gè)事實(shí)：不是每一種網(wǎng)絡(luò)故障都需要提示用戶。這里的“不提示”其實(shí)是一個(gè)相對(duì)的說法齿诞，并不是真的不給用戶提示酸休，而是只有用戶執(zhí)行了請(qǐng)求數(shù)據(jù)的操作才告知用戶網(wǎng)絡(luò)發(fā)生故障。支付寶就是一個(gè)典型的例子祷杈，即使斷網(wǎng)了斑司，用戶基本也感知不到。只有用戶請(qǐng)求了新數(shù)據(jù)但汞，才會(huì)以toast通知用戶網(wǎng)絡(luò)異常宿刮。

支付寶這種高冷也是有底氣的，因?yàn)槠涠鄶?shù)頁面都有緩存機(jī)制私蕾，用戶不用每次進(jìn)入這個(gè)頁面都要去服務(wù)端請(qǐng)求一遍數(shù)據(jù)僵缺。類似的還有QQ音樂、咕咚踩叭，對(duì)于這些產(chǎn)品來說斷網(wǎng)并不會(huì)帶來災(zāi)難性的影響谤饭。因?yàn)閿嗑W(wǎng)不影響我去聽緩存或下載好的歌曲，也不會(huì)影響記錄運(yùn)動(dòng)數(shù)據(jù)。所以對(duì)于此類應(yīng)用來說揉抵，當(dāng)網(wǎng)絡(luò)報(bào)錯(cuò)的時(shí)候，只要用戶沒有觸發(fā)請(qǐng)求數(shù)據(jù)的操作嗤疯，沒有必要提示用戶冤今。

當(dāng)然我們需要給緩存數(shù)據(jù)設(shè)置一個(gè)有效期，如果過了那個(gè)有效期茂缚，網(wǎng)絡(luò)還是沒有恢復(fù)正常戏罢，應(yīng)該及時(shí)提示用戶網(wǎng)絡(luò)故障。

無緩存

當(dāng)然并不是每一個(gè)頁面都有緩存脚囊，對(duì)于沒有緩存數(shù)據(jù)的頁面龟糕，我們有兩種方案。一種是展示空頁面悔耘，另一種是展示骨架屏（Skeleton Screen）讲岁。

骨架屏顧名思義就是展示頁面的框架，當(dāng)數(shù)據(jù)請(qǐng)求完成時(shí)再渲染頁面衬以。這種先占好位置再加載數(shù)據(jù)的模式也被稱之為占位符缓艳，都是一個(gè)意思。

最后再說空頁面看峻，其實(shí)空頁面的展示方案也可以分為兩種：

1 提供“刷新頁面”按鈕阶淘；

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

兩種方案都有自己的道理互妓，我個(gè)人更傾向于把兩種方案進(jìn)行融合溪窒。展示“刷新頁面”的按鈕，如果用戶點(diǎn)擊了還是沒有辦法請(qǐng)求到數(shù)據(jù)冯勉，這時(shí)以snackbar的形式提供解決方案澈蚌。其實(shí)解決方案都是引導(dǎo)用戶去系統(tǒng)設(shè)置里檢查/開通網(wǎng)絡(luò)權(quán)限。

持續(xù)性提示

有緩存數(shù)據(jù)的頁面珠闰，支付寶可以不提示用戶惜浅，但是對(duì)于QQ和微信這類即時(shí)通訊類的應(yīng)用來說，給予用戶網(wǎng)絡(luò)故障的反饋是非常有必要的伏嗜。因?yàn)槿绻唤o提示坛悉，我不知道對(duì)方突然不回我信息是我惹對(duì)方生氣了還是我網(wǎng)絡(luò)故障收不到。QQ和微信這里統(tǒng)一采用的是通告欄承绸，用戶點(diǎn)擊之后進(jìn)入一個(gè)展示網(wǎng)絡(luò)故障解決方案的頁面裸影。這里可能會(huì)有人問，為什么不使用對(duì)話框军熏，對(duì)話框也可以完成跳轉(zhuǎn)動(dòng)作啊轩猩。

我嘗試著來分析一下，如果使用對(duì)話框，那么對(duì)話框的觸發(fā)機(jī)制有兩種：

1 只要檢測(cè)出網(wǎng)絡(luò)不通暢均践，立即彈出對(duì)話框通知用戶晤锹；

2 檢測(cè)出網(wǎng)絡(luò)不通暢，立即彈出對(duì)話框通知用戶彤委，不做二次提示鞭铆；

第一種觸發(fā)機(jī)制明顯不合理，因?yàn)橛脩羰褂梦⑿挪⒉灰欢ǚ且W(wǎng)絡(luò)通暢焦影，有的用戶就是想翻看一下聊天記錄车遂。你這邊只要檢測(cè)出網(wǎng)絡(luò)故障就會(huì)彈出一個(gè)對(duì)話框，會(huì)對(duì)用戶造成很大的干擾斯辰。

第二種也不合理舶担，如果用戶所處的網(wǎng)絡(luò)環(huán)境不穩(wěn)定，時(shí)斷時(shí)續(xù)彬呻，那么一旦你第一次點(diǎn)擊關(guān)閉了彈出框衣陶，用戶就無法感知到后續(xù)網(wǎng)絡(luò)的異常。

所以微信用戶對(duì)于網(wǎng)絡(luò)故障提示的要求是在給予用戶持續(xù)性的提示前提下废岂，還不能干擾用戶正常操作祖搓。好了好了，這個(gè)問題我知道了湖苞，但是我不需要立即去處理拯欧。

可以滿足上面這個(gè)條件的控件有兩個(gè)：snackbar和通告欄，微信用的是通告欄财骨，京東用的是snackbar镐作。以京東為例，用戶在使用京東過程中如果網(wǎng)絡(luò)突然發(fā)生故障隆箩，那么會(huì)從界面頂部彈出一個(gè)snackbar來通知用戶该贾，用戶點(diǎn)擊之后會(huì)進(jìn)入一個(gè)頁面，展示一些解決方案捌臊。其實(shí)在上面我也提到過杨蛋，所謂的解決方案就是讓用戶去系統(tǒng)設(shè)置頁檢查/開通網(wǎng)絡(luò)權(quán)限，我們可以像網(wǎng)易云音樂一樣直接提供一個(gè)跳轉(zhuǎn)鏈接理澎，節(jié)省用戶操作步驟逞力。

snackbar和通告欄的區(qū)別在于snackbar的位置是固定的，只要你的網(wǎng)絡(luò)不暢通糠爬，那么它一直會(huì)出現(xiàn)在界面頂部寇荧。這是因?yàn)榫〇|對(duì)于網(wǎng)絡(luò)的訴求比微信要更強(qiáng)，沒有網(wǎng)絡(luò)微信用戶還可以翻看聊天記錄执隧，京東用戶沒有網(wǎng)絡(luò)還能干什么揩抡？沒有辦法瀏覽商品户侥，更不用說剁手了，京東比微信更需要用戶去解決網(wǎng)絡(luò)故障的問題峦嗤。

網(wǎng)絡(luò)切換

除了斷網(wǎng)與弱網(wǎng)情況蕊唐，另一個(gè)需要考慮的問題是網(wǎng)絡(luò)切換。當(dāng)網(wǎng)絡(luò)從4g切換至wifi,我們用toast來提示用戶沒有任何問題烁设，甚至不提示也沒事刃泌，不會(huì)對(duì)用戶產(chǎn)生太大的影響。但是反過來說署尤，wifi突然斷掉，切換至4g網(wǎng)絡(luò)亚侠，我們還能如此淡定嗎曹体？

當(dāng)我用wifi觀看視頻，突然wifi斷掉硝烂，會(huì)自動(dòng)切換至4G網(wǎng)絡(luò)箕别。為了避免讓用戶在不知情的情況下耗費(fèi)大量的流量，我們應(yīng)該給用戶一個(gè)網(wǎng)絡(luò)變更的提示滞谢，用戶確認(rèn)之后才可以繼續(xù)觀看串稀。提示的方式目前來說主要界面內(nèi)嵌和對(duì)話框，嗶哩嗶哩和網(wǎng)易云音樂這里用的都是界面內(nèi)嵌狮杨。

有意思的是在網(wǎng)易云音樂中母截，如果你聽歌過程中wifi突然斷掉，那么4G網(wǎng)絡(luò)會(huì)繼續(xù)緩存歌曲橄教，而QQ音樂是不會(huì)繼續(xù)緩存的清寇。僅從這點(diǎn)上來說，我個(gè)人覺得騰訊做的更貼心护蝶。

最后插一句：網(wǎng)絡(luò)狀態(tài)由wifi切換至4G絕對(duì)不可以使用toast华烟！因?yàn)榘沧康哪承C(jī)型中，用戶在系統(tǒng)設(shè)置中關(guān)閉推送會(huì)把toast也給禁用掉持灰。對(duì)于這些用戶來說盔夜，他們是收不到提示的，很容易造成流量的損失堤魁。所以優(yōu)先級(jí)高的反饋我們都只考慮使用對(duì)話框喂链，因?yàn)閷?duì)話框所承載的信息用戶100%會(huì)看到。

總結(jié)

以上就是我對(duì)網(wǎng)絡(luò)故障場(chǎng)景下的設(shè)計(jì)總結(jié)姨涡，如果你有不同的看法或者意見衩藤，歡迎留言或者加群討論。