**：微信***「王m爭」，程式設計驛站已獲授權，如需**請聯絡原作者。
當你正在用微信跟朋友胡侃，在b站看紀錄片，逛虎撲懟skr。這時網路突然斷掉，我們應該給使用者什麼樣的提示呢？最近因為自己也在梳理類似的場景，所以這篇文章就來跟大家分享交流一下在網路故障場景下如何給予使用者合適的提示。
所有的報錯提示/反饋都可以拆解為兩個部分：報錯現象和解決方案。因此網路發生故障時我們首先應該告訴使用者您當前的網路狀態異常，讓使用者感知到這個事實，然後再提供解決方案。
目前來說，常見的報錯樣式有toast、snackbar、對話方塊、通告欄、介面內嵌與空頁面。最近看了一下自己之前的文章，發現都是基於元件來闡述適用場景。這種解構方式有個問題，那就是現實情況中，產品或者互動設計師都是基於場景去確定合適的元件。因此為了更方便大家理解，這裡我不具體介紹每個元件的用法，而是以場景來定義來元件。
不提示首先我們需要明確乙個事實：不是每一種網路故障都需要提示使用者。這裡的「不提示」其實程式設計客棧是乙個相對的說法，並不是真的不給使用者提示，而是只有使用者執行了請求資料的操作才告知使用者網路發生故障。支付寶就是乙個典型的例子，即使斷網了，使用者基本也感知不到。只有使用者請求了新資料，才會以toast通知使用者網路異常。
支付寶這種高冷也是有底氣的，因為其多數頁面都有快取機制，使用者不用每次進入這個頁面都要去服務端請求一遍資料。類似的還有qq**、咕咚，對於這些產品來說斷網並不會帶來災難性的影響。因為斷網不影響我去聽快取或**好的歌曲，也不會影響記錄運動資料。所以對於此類應用來說，當網路報錯的時候，只要使用者沒有觸發請求資料的操作，沒有必要提示使用者。
當然我們需要給快取資料設定乙個有效期，如果過了那個有效期，網路還是沒有恢復正常，應該及時提示使用者網路故障。
無快取當然並不是每乙個頁nxnvuohf面都有快取，對於沒有快取資料的頁面，我們有兩種方案。一種是展示空頁面，另一種是展示骨架屏（skeleton screen）。
骨架屏顧名思www.cppcns.com義就是展示頁面的框架，當資料請求完成時再渲染頁面。這種先佔好位置再程式設計客棧載入資料的模式也被稱之為佔位符，都是乙個意思。
最後再說空頁面，其實空頁面的展示方案也可以分為兩種：
1 提供「重新整理頁面」按鈕；
2 提供「解決方案」按鈕；
兩種方案都有自己的道理，我個人更傾向於把兩種方案進行融合。展示「重新整理頁面」的按鈕，如果使用者點選了還是沒有辦法請求到資料，這時以snackbar的形式提供解決方案。其實解決方案都是引導使用者去系統設定裡檢查/開通網路許可權。
持續性提示
有快取資料的頁面，支付寶可以不提示使用者，但是對於qq和微信這類即時通訊類的應用來說，給予使用者網路故障的反饋是非常有必要的。因為如果不給提示，我不知道對方突然不回我資訊是我惹對方生氣了還是我網路故障收不到。qq和微信這裡統一採用的是通告欄，使用者點選之後進入乙個展示網路故障解決方案的頁面。這裡可能會有人問，為什麼不使用對話方塊，對話方塊也可以完成跳轉動作啊。
我嘗試著來分析一下，如果使用對話方塊，那麼對話方塊的觸發機制有兩種：
1 只要檢測出網路不通暢，立即彈出對話方塊通知使用者；
2 檢測出網路不通暢，立即彈出對話方塊通知使用者，不做二次提示；
第一種觸發機制明顯不合理，因為使用者使用微信並不一定非要網路通暢，有的使用者就是想翻看一下聊天記錄。你這邊只要檢測出網路故障就會彈出乙個對話方塊，會對使用者造成很大的干擾。
第二種也不合理，如果使用者所處的網路環境不穩定，時斷時續，那麼一旦你第一次點選關閉了彈出框，使用者就無法感知到後續網路的異常。
所以微信使用者對於網路故障提示的要求是在給予使用者持續性的提示前提下，還不能干擾使用者正常操作。好了好了，這個問題我知道了，但是我不需要立即去處理。
可以滿足上面這個條件的控制項有兩個：snackba程式設計客棧r和通告欄，微信用的是通告欄，京東用的是snackbar。以京東為例，使用者在使用京東過程中如果網路突然發生故障，那麼會從介面頂部彈出乙個snackbar來通知使用者，使用者點選之後會進入乙個頁面，展示一些解決方案。其實在上面我也提到過，所謂的解決方案就是讓使用者去系統設定頁檢查/開通網路許可權，我們可以像網易雲**一樣直接提供乙個跳轉鏈結，節省使用者操作步驟。
snackbar和通告欄的區別在於snackbar的位置是固定的，只要你的網路不暢通，那麼它一直會出現在介面頂部。這是因為京東對於網路的訴求比微信要更強，沒有網路微信使用者還可以翻看聊天記錄，京東使用者沒有網路還能幹什麼？沒有辦法瀏覽商品，更不用說剁手了，京東比微信更需要使用者去解決網路故障的問題。
網路切換
除了斷網與弱網情況，另乙個需要考慮的問題是網路切換。當網路從4g切換至wifi,我們用toast來提示使用者沒有任何問題，甚至不提示也沒事，不會對使用者產生太大的影響。但是反過來說，wifi突然斷掉，切換至4g網路，我們還能如此淡定嗎？
當我用wifi****，突然wifi斷掉，會自動切換至4g網路。為了避免讓使用者在不知情的情況下耗費大量的流量，我們應該給使用者乙個網路變更的提示，使用者確認之後才可以繼續**。提示的方式目前來說主要介面內嵌和對話方塊，嗶哩嗶哩和網易雲**這裡用的都是介面內嵌。
有意思的是在網易雲**中，如果你聽歌過程中wifi突然斷掉，那麼4g網路會繼續快取歌曲，而qq**是不會繼續快取的。僅從這點上來說，我個人覺得騰訊做的更貼心。
最後插一句：網路狀態由wifi切換至4g絕對不可以使用toast！因為安卓的某些機型中，使用者在系統設定中關閉推送會把toast也給禁用掉。對於這些使用者來說，他們是收不到提示的，很容易造成流量的損失。所以優先順序高的反饋我們都只考慮使用對話方塊，因為對話方塊所承載的資訊使用者100%會看到。
總結以上就是我對網路故障場景下的設計總結，如果你有不同的看法或者意見，歡迎留言或者**討論。
本文標題: 網路故障設計總結
本文位址:
網路故障總匯
1 在同一裝置中網路能到達本地閘道器，卻不能訪問另外其它埠的網路。原因 網路 裝置禁止了ip資料報的 解決方案 在linux系統下，利用 ping 命令測試兩網路是否可通訊，當 ping 失敗時，使用 traceroute 命令檢查網路的故障點位於哪個位置，如果顯示能到達本地閘道器，卻不能到達對端的...
網路故障排查
wireshark抓包工具是一款開源的網路協議分析軟體。工能非常強大，對tcp udp進行抓包分析，是最適合的。如何確診是ip衝突 換乙個ip試試，換了ip之後，再ping原來的那個ip，如果有應答，就能確診是ip衝突。換了ip後，ping原來那個ip無應答，並不能確認不是ip衝突 因為arp表可能...
網路故障排障簡單總結
從網路故障本身來說，經常會遇到的故障有哪些？答案 物理層故障 資料鏈路層故障 網路層故障 以太網路故障 廣域網路故障 tcp ip故障 伺服器故障 其他業務故障等。簡述網路發生故障的具體分布。網路發生故障的具體分布為 應用層佔3 表示層佔7 會話層佔8 傳輸層佔10 網路層佔12 資料鏈路層佔25 ...