網(wǎng)絡(luò)故障場(chǎng)景如何提醒用戶？來(lái)看這篇超細(xì)致的總結(jié)！

王M爭(zhēng)：當(dāng)你正在用微信跟同伙胡侃，在 b站看紀(jì)錄片，逛虎撲懟 skr。這時(shí)網(wǎng)絡(luò)忽然斷掉，我們應(yīng)該給用戶什么樣的提醒呢？最近由于本身也在梳理類似的場(chǎng)景，所以這篇文章就來(lái)跟大家分享交流一下在網(wǎng)絡(luò)故障場(chǎng)景下如何給予用戶合適的提醒。

所有的報(bào)錯(cuò)提醒/反饋都可以拆解為兩個(gè)部分：報(bào)錯(cuò)征象息爭(zhēng)決方案。因此網(wǎng)絡(luò)發(fā)生故障時(shí)我們首先應(yīng)該告訴用戶您當(dāng)前的網(wǎng)絡(luò)狀況非常，讓用戶感知到這個(gè)事實(shí)，然后再提供解決方案。

目前來(lái)說(shuō)，常見(jiàn)的報(bào)錯(cuò)樣式有 toast、snackbar、對(duì)話框、告示欄、界面內(nèi)嵌與空網(wǎng)頁(yè)。最近看了一下本身之前的文章，發(fā)現(xiàn)都是基于組件來(lái)闡述適用場(chǎng)景。這種解構(gòu)體例有個(gè)題目，那就是實(shí)際情況中，產(chǎn)品或者交互設(shè)計(jì)師都是基于場(chǎng)景去確定合適的組件。因此為了更方便大家理解，這里我不詳細(xì)介紹每個(gè)組件的用法，而是以場(chǎng)景來(lái)定義來(lái)組件。

1. 不提醒

首先我們必要明確一個(gè)事實(shí)：不是每一種網(wǎng)絡(luò)故障都必要提醒用戶。這里的「不提醒」其實(shí)是一個(gè)相對(duì)的說(shuō)法，并不是真的不給用戶提醒，而是只有效戶實(shí)行了請(qǐng)求數(shù)據(jù)的操作才告知用戶網(wǎng)絡(luò)發(fā)生故障。付出寶就是一個(gè)典型的例子，即使斷網(wǎng)了，用戶基本也感知不到。只有效戶請(qǐng)求了新數(shù)據(jù)，才會(huì)以 toast 關(guān)照用戶網(wǎng)絡(luò)非常。

付出寶這種高冷也是有底氣的，由于其多數(shù)網(wǎng)頁(yè)都有緩存機(jī)制，用戶不用每次進(jìn)入這個(gè)網(wǎng)頁(yè)都要去服務(wù)端請(qǐng)求一遍數(shù)據(jù)。類似的還有 QQ音樂(lè)、咕咚，對(duì)于這些產(chǎn)品來(lái)說(shuō)斷網(wǎng)并不會(huì)帶來(lái)災(zāi)禍性的影響。由于斷網(wǎng)不影響我去聽(tīng)緩存或下載好的歌曲，也不會(huì)影響記錄運(yùn)動(dòng)數(shù)據(jù)。所以對(duì)于此類應(yīng)用來(lái)說(shuō)，當(dāng)網(wǎng)絡(luò)報(bào)錯(cuò)的時(shí)候，只要用戶沒(méi)有觸發(fā)請(qǐng)求數(shù)據(jù)的操作，沒(méi)有需要提醒用戶。

當(dāng)然我們必要給緩存數(shù)據(jù)設(shè)置一個(gè)有用期，假如過(guò)了那個(gè)有用期，網(wǎng)絡(luò)照舊沒(méi)有恢復(fù)正常，應(yīng)該及時(shí)提醒用戶網(wǎng)絡(luò)故障。

2. 無(wú)緩存

當(dāng)然并不是每一個(gè)網(wǎng)頁(yè)都有緩存，對(duì)于沒(méi)有緩存數(shù)據(jù)的網(wǎng)頁(yè)，我們有兩種方案。一種是展示空網(wǎng)頁(yè)，另一種是展示骨架屏（Skeleton Screen）。

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

最后再說(shuō)空網(wǎng)頁(yè)，其實(shí)空網(wǎng)頁(yè)的展示方案也可以分為兩種：

• 提供「刷新網(wǎng)頁(yè)」按鈕
• 提供「解決方案」按鈕

兩種方案都有本身的道理，我小我更傾向于把兩種方案進(jìn)行融合。展示「刷新網(wǎng)頁(yè)」的按鈕，假如用戶點(diǎn)擊了照舊沒(méi)有辦法請(qǐng)求到數(shù)據(jù)，這時(shí)以 snackbar 的情勢(shì)提供解決方案。其實(shí)解決方案都是指導(dǎo)用戶去體系設(shè)置里檢查/開(kāi)通網(wǎng)絡(luò)權(quán)限。

3. 持續(xù)性提醒

有緩存數(shù)據(jù)的網(wǎng)頁(yè)，付出寶可以不提醒用戶，但是對(duì)于 QQ 和微信這類即時(shí)通信類的應(yīng)用來(lái)說(shuō)，給予用戶網(wǎng)絡(luò)故障的反饋是特別很是有需要的。由于假如不給提醒，我不知道對(duì)方忽然不回我信息是我惹對(duì)方氣憤了照舊我網(wǎng)絡(luò)故障收不到。QQ 和微信這里同一采用的是告示欄，用戶點(diǎn)擊之后進(jìn)入一個(gè)展示網(wǎng)絡(luò)故障解決方案的網(wǎng)頁(yè)。這里可能會(huì)有人問(wèn)，為什么不使用對(duì)話框，對(duì)話框也可以完成跳轉(zhuǎn)動(dòng)作啊。

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

• 只要檢測(cè)出網(wǎng)絡(luò)不通行，立即彈出對(duì)話框關(guān)照用戶
•  檢測(cè)出網(wǎng)絡(luò)不通行，立即彈出對(duì)話框關(guān)照用戶，不做二次提醒

第一種觸發(fā)機(jī)制顯明不合理，由于用戶使用微信并不肯定非要網(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)閉了彈出框，用戶就無(wú)法感知到后續(xù)網(wǎng)絡(luò)的非常。

所以微名譽(yù)戶對(duì)于網(wǎng)絡(luò)故障提醒的要求是在給予用戶持續(xù)性的提醒前提下，還不能干擾用戶正常操作。好了好了，這個(gè)題目我知道了，但是我不必要立即行止理。

可以知足上面這個(gè)條件的控件有兩個(gè)：snackbar 和告示欄，微名譽(yù)的是告示欄，京東用的是 snackbar。以京東為例，用戶在使用京東過(guò)程中假如網(wǎng)絡(luò)忽然發(fā)生故障，那么會(huì)從界面頂部彈出一個(gè) snackbar 來(lái)關(guān)照用戶，用戶點(diǎn)擊之后會(huì)進(jìn)入一個(gè)網(wǎng)頁(yè)，展示一些解決方案。其實(shí)在上面我也提到過(guò)，所謂的解決方案就是讓用戶去體系設(shè)置頁(yè)檢查/開(kāi)通網(wǎng)絡(luò)權(quán)限，我們可以像網(wǎng)易云音樂(lè)一樣直接提供一個(gè)跳轉(zhuǎn)鏈接，節(jié)省用戶操作步驟。

snackbar 和告示欄的區(qū)別在于 snackbar 的位置是固定的，只要你的網(wǎng)絡(luò)不通順，那么它一向會(huì)出如今界面頂部。這是由于京東對(duì)于網(wǎng)絡(luò)的訴求比微信要更強(qiáng)，沒(méi)有網(wǎng)絡(luò)微名譽(yù)戶還可以翻看聊天記錄，京東用戶沒(méi)有網(wǎng)絡(luò)還能干什么？沒(méi)有辦法欣賞商品，更不用說(shuō)剁手了，京東比微信更必要用戶去解決網(wǎng)絡(luò)故障的題目。

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

除了斷網(wǎng)與弱網(wǎng)情況，另一個(gè)必要考慮的題目是網(wǎng)絡(luò)切換。當(dāng)網(wǎng)絡(luò)從 4g 切換至 wifi，我們用 toast 來(lái)提醒用戶沒(méi)有任何題目，甚至不提醒也沒(méi)事，不會(huì)對(duì)用戶產(chǎn)生太大的影響。但是反過(guò)來(lái)說(shuō)，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)之后才可以繼承觀看。提醒的體例目前來(lái)說(shuō)重要界面內(nèi)嵌和對(duì)話框，嗶哩嗶哩和網(wǎng)易云音樂(lè)這里用的都是界面內(nèi)嵌。

故意思的是在網(wǎng)易云音樂(lè)中，假如你聽(tīng)歌過(guò)程中 wifi 忽然斷掉，那么 4G 網(wǎng)絡(luò)會(huì)繼承緩存歌曲，而 QQ音樂(lè)是不會(huì)繼承緩存的。僅從這點(diǎn)上來(lái)說(shuō)，我小我覺(jué)得騰訊做的更知心。

最后插一句：網(wǎng)絡(luò)狀況由 wifi 切換至 4G 絕對(duì)不可以使用 toast！由于安卓的某些機(jī)型中，用戶在體系設(shè)置中關(guān)閉推送會(huì)把 toast 也給禁用掉。對(duì)于這些用戶來(lái)說(shuō)，他們是收不到提醒的，很容易造成流量的損失。所以優(yōu)先級(jí)高的反饋我們都只考慮使用對(duì)話框，由于對(duì)話框所承載的信息用戶100%會(huì)看到。

總結(jié)

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

迎接關(guān)注作者的微信公眾號(hào)：「王M爭(zhēng)」

圖片素材作者：Tayyab Ali