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

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

目前來(lái)說，常見的(de)報錯樣式有toast、snackbar、對(duì)話(huà)框、通(tōng)告欄、界面内嵌與空頁面。最近看了(le)一下(xià)自己之前的(de)文章(zhāng)，發現都是基于組件來(lái)闡述适用(yòng)場(chǎng)景。這(zhè)種解構方式有個(gè)問題，那就是現實情況中，産品或者交互設計師都是基于場(chǎng)景去确定合适的(de)組件。因此爲了(le)更方便大(dà)家理(lǐ)解，這(zhè)裏我不具體介紹每個(gè)組件的(de)用(yòng)法，而是以場(chǎng)景來(lái)定義來(lái)組件。

不提示

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

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

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

無緩存

當然并不是每一個(gè)頁面都有緩存，對(duì)于沒有緩存數據的(de)頁面，我們有兩種方案。一種是展示空頁面，另一種是展示骨架屏（Skeleton Screen）。

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

最後再說空頁面，其實空頁面的(de)展示方案也(yě)可(kě)以分(fēn)爲兩種：

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

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

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

持續性提示

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

我嘗試著(zhe)來(lái)分(fēn)析一下(xià)，如果使用(yòng)對(duì)話(huà)框，那麽對(duì)話(huà)框的(de)觸發機制有兩種：1 隻要檢測出網絡不通(tōng)暢，立即彈出對(duì)話(huà)框通(tōng)知用(yòng)戶；

2 檢測出網絡不通(tōng)暢，立即彈出對(duì)話(huà)框通(tōng)知用(yòng)戶，不做(zuò)二次提示；第一種觸發機制明(míng)顯不合理(lǐ)，因爲用(yòng)戶使用(yòng)微信并不一定非要網絡通(tōng)暢，有的(de)用(yòng)戶就是想翻看一下(xià)聊天記錄。你這(zhè)邊隻要檢測出網絡故障就會彈出一個(gè)對(duì)話(huà)框，會對(duì)用(yòng)戶造成很大(dà)的(de)幹擾。

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

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

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

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

網絡切換

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

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

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

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