作者注：當你正在用微信跟朋友胡侃，在 b站看紀錄片，逛虎撲懟 skr。這時網(wǎng)絡突然斷掉，我們應該給用戶什么樣的提示呢?最近因為自己也在梳理類似的場景，所以這篇文章就來跟大家分享交流一下在網(wǎng)絡故障場景下如何給予用戶合適的提示。

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

[[238857]]

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

1. 不提示

首先我們需要明確一個事實：不是每一種網(wǎng)絡故障都需要提示用戶。這里的「不提示」其實是一個相對的說法，并不是真的不給用戶提示，而是只有用戶執(zhí)行了請求數(shù)據(jù)的操作才告知用戶網(wǎng)絡發(fā)生故障。支付寶就是一個典型的例子，即使斷網(wǎng)了，用戶基本也感知不到。只有用戶請求了新數(shù)據(jù)，才會以 toast 通知用戶網(wǎng)絡異常。 

支付寶這種高冷也是有底氣的，因為其多數(shù)頁面都有緩存機制，用戶不用每次進入這個頁面都要去服務端請求一遍數(shù)據(jù)。類似的還有 QQ音樂、咕咚，對于這些產(chǎn)品來說斷網(wǎng)并不會帶來災難性的影響。因為斷網(wǎng)不影響我去聽緩存或下載好的歌曲，也不會影響記錄運動數(shù)據(jù)。所以對于此類應用來說，當網(wǎng)絡報錯的時候，只要用戶沒有觸發(fā)請求數(shù)據(jù)的操作，沒有必要提示用戶。 

當然我們需要給緩存數(shù)據(jù)設置一個有效期，如果過了那個有效期，網(wǎng)絡還是沒有恢復正常，應該及時提示用戶網(wǎng)絡故障。

2. 無緩存

當然并不是每一個頁面都有緩存，對于沒有緩存數(shù)據(jù)的頁面，我們有兩種方案。一種是展示空頁面，另一種是展示骨架屏(Skeleton Screen)。 

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

***再說空頁面，其實空頁面的展示方案也可以分為兩種：

• 提供「刷新頁面」按鈕
• 提供「解決方案」按鈕 

兩種方案都有自己的道理，我個人更傾向于把兩種方案進行融合。展示「刷新頁面」的按鈕，如果用戶點擊了還是沒有辦法請求到數(shù)據(jù)，這時以 snackbar 的形式提供解決方案。其實解決方案都是引導用戶去系統(tǒng)設置里檢查/開通網(wǎng)絡權限。

3. 持續(xù)性提示

有緩存數(shù)據(jù)的頁面，支付寶可以不提示用戶，但是對于 QQ 和微信這類即時通訊類的應用來說，給予用戶網(wǎng)絡故障的反饋是非常有必要的。因為如果不給提示，我不知道對方突然不回我信息是我惹對方生氣了還是我網(wǎng)絡故障收不到。QQ 和微信這里統(tǒng)一采用的是通告欄，用戶點擊之后進入一個展示網(wǎng)絡故障解決方案的頁面。這里可能會有人問，為什么不使用對話框，對話框也可以完成跳轉(zhuǎn)動作啊。 

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

只要檢測出網(wǎng)絡不通暢，立即彈出對話框通知用戶

檢測出網(wǎng)絡不通暢，立即彈出對話框通知用戶，不做二次提示

• ***種觸發(fā)機制明顯不合理，因為用戶使用微信并不一定非要網(wǎng)絡通暢，有的用戶就是想翻看一下聊天記錄。你這邊只要檢測出網(wǎng)絡故障就會彈出一個對話框，會對用戶造成很大的干擾。
• 第二種也不合理，如果用戶所處的網(wǎng)絡環(huán)境不穩(wěn)定，時斷時續(xù)，那么一旦你***次點擊關閉了彈出框，用戶就無法感知到后續(xù)網(wǎng)絡的異常。

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

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

snackbar 和通告欄的區(qū)別在于 snackbar 的位置是固定的，只要你的網(wǎng)絡不暢通，那么它一直會出現(xiàn)在界面頂部。這是因為京東對于網(wǎng)絡的訴求比微信要更強，沒有網(wǎng)絡微信用戶還可以翻看聊天記錄，京東用戶沒有網(wǎng)絡還能干什么?沒有辦法瀏覽商品，更不用說剁手了，京東比微信更需要用戶去解決網(wǎng)絡故障的問題。

4. 網(wǎng)絡切換

除了斷網(wǎng)與弱網(wǎng)情況，另一個需要考慮的問題是網(wǎng)絡切換。當網(wǎng)絡從 4g 切換至 wifi，我們用 toast 來提示用戶沒有任何問題，甚至不提示也沒事，不會對用戶產(chǎn)生太大的影響。但是反過來說，wifi 突然斷掉，切換至 4g 網(wǎng)絡，我們還能如此淡定嗎?

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

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

***插一句：網(wǎng)絡狀態(tài)由 wifi 切換至 4G 絕對不可以使用 toast!因為安卓的某些機型中，用戶在系統(tǒng)設置中關閉推送會把 toast 也給禁用掉。對于這些用戶來說，他們是收不到提示的，很容易造成流量的損失。所以優(yōu)先級高的反饋我們都只考慮使用對話框，因為對話框所承載的信息用戶100%會看到。

總結(jié)

以上就是我對網(wǎng)絡故障場景下的設計總結(jié)，如果你有不同的看法或者意見，歡迎留言或者加群討論。