當你(nǐ)正在用微信跟朋友(yǒu)胡侃，在b站(zhàn)看紀錄片，逛虎撲怼skr。這時(shí)網絡突然斷掉，我們應該給用戶什麽樣的提示呢？最近因為(wèi)自己也在梳理(lǐ)類似的場(chǎng)景，所以這篇文章就來(lái)跟大(dà)家(jiā)分享交流一下在網絡故障場(chǎng)景下如何給予用戶合适的提示。

所有(yǒu)的報錯提示/反饋都可(kě)以拆解為(wèi)兩個(gè)部分：報錯現象和(hé)解決方案。因此網絡發生(shēng)故障時(shí)我們首先應該告訴用戶您當前的網絡狀态異常，讓用戶感知到這個(gè)事實，然後再提供解決方案。

目前來(lái)說，常見的報錯樣式有(yǒu)toast、snackbar、對話(huà)框、通(tōng)告欄、界面內(nèi)嵌與空(kōng)頁面。最近看了一下自己之前的文章，發現都是基于組件來(lái)闡述适用場(chǎng)景。這種解構方式有(yǒu)個(gè)問題，那(nà)就是現實情況中，産品或者交互設計(jì)師(shī)都是基于場(chǎng)景去确定合适的組件。

因此為(wèi)了更方便大(dà)家(jiā)理(lǐ)解，這裏我不具體(tǐ)介紹每個(gè)組件的用法，而是以場(chǎng)景來(lái)定義來(lái)組件。

不提示

首先我們需要明(míng)确一個(gè)事實：不是每一種網絡故障都需要提示用戶。這裏的“不提示”其實是一個(gè)相對的說法，并不是真的不給用戶提示，而是隻有(yǒu)用戶執行(xíng)了請(qǐng)求數(shù)據的操作(zuò)才告知用戶網絡發生(shēng)故障。支付寶就是一個(gè)典型的例子，即使斷網了，用戶基本也感知不到。隻有(yǒu)用戶請(qǐng)求了新數(shù)據，才會(huì)以toast通(tōng)知用戶網絡異常。

支付寶這種高(gāo)冷也是有(yǒu)底氣的，因為(wèi)其多(duō)數(shù)頁面都有(yǒu)緩存機制(zhì)，用戶不用每次進入這個(gè)頁面都要去服務端請(qǐng)求一遍數(shù)據。類似的還(hái)有(yǒu)QQ音(yīn)樂、咕咚，對于這些(xiē)産品來(lái)說斷網并不會(huì)帶來(lái)災難性的影(yǐng)響。因為(wèi)斷網不影(yǐng)響我去聽(tīng)緩存或下載好的歌(gē)曲，也不會(huì)影(yǐng)響記錄運動數(shù)據。所以對于此類應用來(lái)說，當網絡報錯的時(shí)候，隻要用戶沒有(yǒu)觸發請(qǐng)求數(shù)據的操作(zuò)，沒有(yǒu)必要提示用戶。

當然我們需要給緩存數(shù)據設置一個(gè)有(yǒu)效期，如果過了那(nà)個(gè)有(yǒu)效期，網絡還(hái)是沒有(yǒu)恢複正常，應該及時(shí)提示用戶網絡故障。

無緩存

當然并不是每一個(gè)頁面都有(yǒu)緩存，對于沒有(yǒu)緩存數(shù)據的頁面，我們有(yǒu)兩種方案。一種是展示空(kōng)頁面，另一種是展示骨架屏（Skeleton Screen）。

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

最後再說空(kōng)頁面，其實空(kōng)頁面的展示方案也可(kě)以分為(wèi)兩種：

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

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

兩種方案都有(yǒu)自己的道(dào)理(lǐ)，我個(gè)人(rén)更傾向于把兩種方案進行(xíng)融合。展示“刷新頁面”的按鈕，如果用戶點擊了還(hái)是沒有(yǒu)辦法請(qǐng)求到數(shù)據，這時(shí)以snackbar的形式提供解決方案。其實解決方案都是引導用戶去系統設置裏檢查/開(kāi)通(tōng)網絡權限。 

持續性提示

有(yǒu)緩存數(shù)據的頁面，支付寶可(kě)以不提示用戶，但(dàn)是對于QQ和(hé)微信這類即時(shí)通(tōng)訊類的應用來(lái)說，給予用戶網絡故障的反饋是非常有(yǒu)必要的。因為(wèi)如果不給提示，我不知道(dào)對方突然不回我信息是我惹對方生(shēng)氣了還(hái)是我網絡故障收不到。QQ和(hé)微信這裏統一采用的是通(tōng)告欄，用戶點擊之後進入一個(gè)展示網絡故障解決方案的頁面。這裏可(kě)能會(huì)有(yǒu)人(rén)問，為(wèi)什麽不使用對話(huà)框，對話(huà)框也可(kě)以完成跳(tiào)轉動作(zuò)啊。

我嘗試着來(lái)分析一下，如果使用對話(huà)框，那(nà)麽對話(huà)框的觸發機制(zhì)有(yǒu)兩種：

1 隻要檢測出網絡不通(tōng)暢，立即彈出對話(huà)框通(tōng)知用戶；

2 檢測出網絡不通(tōng)暢，立即彈出對話(huà)框通(tōng)知用戶，不做(zuò)二次提示；

第一種觸發機制(zhì)明(míng)顯不合理(lǐ)，因為(wèi)用戶使用微信并不一定非要網絡通(tōng)暢，有(yǒu)的用戶就是想翻看一下聊天記錄。你(nǐ)這邊隻要檢測出網絡故障就會(huì)彈出一個(gè)對話(huà)框，會(huì)對用戶造成很(hěn)大(dà)的幹擾。

第二種也不合理(lǐ)，如果用戶所處的網絡環境不穩定，時(shí)斷時(shí)續，那(nà)麽一旦你(nǐ)第一次點擊關閉了彈出框，用戶就無法感知到後續網絡的異常。

所以微信用戶對于網絡故障提示的要求是在給予用戶持續性的提示前提下，還(hái)不能幹擾用戶正常操作(zuò)。好了好了，這個(gè)問題我知道(dào)了，但(dàn)是我不需要立即去處理(lǐ)。

可(kě)以滿足上(shàng)面這個(gè)條件的控件有(yǒu)兩個(gè)：snackbar和(hé)通(tōng)告欄，微信用的是通(tōng)告欄，京東用的是snackbar。以京東為(wèi)例，用戶在使用京東過程中如果網絡突然發生(shēng)故障，那(nà)麽會(huì)從界面頂部彈出一個(gè)snackbar來(lái)通(tōng)知用戶，用戶點擊之後會(huì)進入一個(gè)頁面，展示一些(xiē)解決方案。其實在上(shàng)面我也提到過，所謂的解決方案就是讓用戶去系統設置頁檢查/開(kāi)通(tōng)網絡權限，我們可(kě)以像網易雲音(yīn)樂一樣直接提供一個(gè)跳(tiào)轉鏈接，節省用戶操作(zuò)步驟。

snackbar和(hé)通(tōng)告欄的區(qū)别在于snackbar的位置是固定的，隻要你(nǐ)的網絡不暢通(tōng)，那(nà)麽它一直會(huì)出現在界面頂部。這是因為(wèi)京東對于網絡的訴求比微信要更強，沒有(yǒu)網絡微信用戶還(hái)可(kě)以翻看聊天記錄，京東用戶沒有(yǒu)網絡還(hái)能幹什麽？沒有(yǒu)辦法浏覽商品，更不用說剁手了，京東比微信更需要用戶去解決網絡故障的問題。

網絡切換

除了斷網與弱網情況，另一個(gè)需要考慮的問題是網絡切換。當網絡從4g切換至wifi,我們用toast來(lái)提示用戶沒有(yǒu)任何問題，甚至不提示也沒事，不會(huì)對用戶産生(shēng)太大(dà)的影(yǐng)響。但(dàn)是反過來(lái)說，wifi突然斷掉，切換至4g網絡，我們還(hái)能如此淡定嗎？

當我用wifi觀看視(shì)頻，突然wifi斷掉，會(huì)自動切換至4G網絡。為(wèi)了避免讓用戶在不知情的情況下耗費大(dà)量的流量，我們應該給用戶一個(gè)網絡變更的提示，用戶确認之後才可(kě)以繼續觀看。提示的方式目前來(lái)說主要界面內(nèi)嵌和(hé)對話(huà)框，哔哩哔哩和(hé)網易雲音(yīn)樂這裏用的都是界面內(nèi)嵌。

有(yǒu)意思的是在網易雲音(yīn)樂中，如果你(nǐ)聽(tīng)歌(gē)過程中wifi突然斷掉，那(nà)麽4G網絡會(huì)繼續緩存歌(gē)曲，而QQ音(yīn)樂是不會(huì)繼續緩存的。僅從這點上(shàng)來(lái)說，我個(gè)人(rén)覺得(de)騰訊做(zuò)的更貼心。

最後插一句：網絡狀态由wifi切換至4G絕對不可(kě)以使用toast！因為(wèi)安卓的某些(xiē)機型中，用戶在系統設置中關閉推送會(huì)把toast也給禁用掉。對于這些(xiē)用戶來(lái)說，他們是收不到提示的，很(hěn)容易造成流量的損失。所以優先級高(gāo)的反饋我們都隻考慮使用對話(huà)框，因為(wèi)對話(huà)框所承載的信息用戶100%會(huì)看到。