圖片版權(quán)所屬：站長之家

來源：微信公眾號“王M爭”，站長之家已獲授權(quán)，如需轉(zhuǎn)載請聯(lián)系原作者。

當(dāng)你正在用微信跟朋友胡侃，在b站看紀(jì)錄片，逛虎撲懟skr。這時(shí)網(wǎng)絡(luò)突然斷掉，我們應(yīng)該給用戶什么樣的提示呢？最近因?yàn)樽约阂苍谑崂眍愃频膱鼍�，所以這篇文章就來跟大家分享交流一下在網(wǎng)絡(luò)故障場景下如何給予用戶合適的提示。

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

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

不提示

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

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

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

無緩存

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

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

最后再說空頁面，其實(shí)空頁面的展示方案也可以分為兩種：

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

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

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

標(biāo)簽： 網(wǎng)絡(luò)故障設(shè)計(jì) 故障頁面設(shè)計(jì) 網(wǎng)站優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。