斷網(wǎng)是一種影響用戶使用的不良狀態(tài)，Harris Interactive為Tealeaf做的一份調(diào)查顯示，23%的用戶承認(rèn)咒罵過自己的手機(jī)，11%沖自己手機(jī)大喊過，而且4%的用戶在網(wǎng)絡(luò)出問題時(shí)扔過手機(jī)。斷網(wǎng)就屬于這類問題之一。
? ? ?斷網(wǎng)的情況下，我們應(yīng)該盡量采用合理的提醒方式，降低用戶焦慮。
? ? ?舉一個(gè)反面例子：
斷網(wǎng)后下拉刷新，清空了緩存內(nèi)容
測試時(shí)用的iOS系統(tǒng)，版本為1.5.6。我是先打開了app，瀏覽了一會(huì)首頁然后開啟飛行模式，下拉刷新，結(jié)果連本來加載好的信息都沒有了，而且沒有明確告訴用戶該怎么刷新。最怪異的是，我以為斷網(wǎng)后也是下拉刷新，結(jié)果這一頁居然是點(diǎn)擊刷新。。。一個(gè)頁面居然在不同情況下用了兩種刷新方式。
ps:這里無意黑，pmcaff的核心業(yè)務(wù)不在app，并且網(wǎng)絡(luò)超時(shí)設(shè)計(jì)屬于優(yōu)先級(jí)比較低的需求。
正面例子很多，可以參考上千萬用戶量的app?？蓡栴}在于斷網(wǎng)的提醒樣式有很多種，適用于不同的場景。經(jīng)驗(yàn)豐富的用戶體驗(yàn)產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師，了解各種各樣的提示樣式，可以憑借自己的經(jīng)驗(yàn)選擇最適合的提示樣式。但如果經(jīng)驗(yàn)不夠豐富，可能會(huì)費(fèi)時(shí)費(fèi)力。所以，本篇的目的是幫助產(chǎn)品新人用最短的時(shí)間完成斷網(wǎng)設(shè)計(jì)。附上本文思維導(dǎo)圖：
斷網(wǎng)提醒設(shè)計(jì)
第一步：明確前提
前提是做網(wǎng)絡(luò)超時(shí)設(shè)計(jì)之前，要明確下面這兩個(gè)問題。
1.用戶需不需要查看緩存內(nèi)容？緩存內(nèi)容還可以降低用戶的斷網(wǎng)時(shí)焦慮，有些內(nèi)容對(duì)用戶有價(jià)值的，比如微信聊天記錄。
2.什么時(shí)候檢查網(wǎng)絡(luò)狀態(tài)？有的時(shí)候需要實(shí)時(shí)檢查網(wǎng)絡(luò)狀態(tài)，比如微信的消息列表、還有一些手游等等，大多數(shù)APP其實(shí)不需要實(shí)時(shí)檢查。斷網(wǎng)設(shè)計(jì)更多是在優(yōu)化現(xiàn)有產(chǎn)品的用戶體驗(yàn)，這時(shí)需要和技術(shù)多溝通，搞清楚你的產(chǎn)品在什么時(shí)候檢查網(wǎng)絡(luò)狀態(tài)。
第二步：根據(jù)場景選擇樣式
斷網(wǎng)的提醒樣式有很多種，適用于不同的場景。這里我把場景分為了四大類，可以先選擇對(duì)應(yīng)的一類場景，再選擇該場景下常見的提醒樣式。
1.有必要立即并打斷用戶提醒
這一類場景頁面（區(qū)域）功能全部無法使用，且沒有本地緩存可查看時(shí)。不聯(lián)網(wǎng)啥也不能用啥也看不了，要把用戶的關(guān)注焦點(diǎn)在網(wǎng)絡(luò)問題上，所以采用整頁提示或內(nèi)容區(qū)按鈕，明確告訴用戶現(xiàn)在的網(wǎng)絡(luò)狀況，讓用戶獲得掌控感，引導(dǎo)用戶解決網(wǎng)絡(luò)問題，幫助用戶恢復(fù)到網(wǎng)絡(luò)正常狀態(tài)。最好說明下一步用戶該做什么，而不是冷冰冰的只告知用戶“加載失敗”。除此以上兩種，彈窗也可以打斷用戶操作，以提醒用戶。
總結(jié)：這類場景下，可用的提醒樣式有整頁提示、內(nèi)容區(qū)按鈕、彈窗。
2.有必要提醒，但不要打斷用戶
這一類場景頁面部分本地功能可用，或有本地緩存可查看。這時(shí)候app又不是不能用了，所以不應(yīng)該打斷用戶思緒，要輕提醒，達(dá)到讓用戶“了解、知道”的目的即可。常見的提醒樣式有以下幾種。
Notice bar：見微信消息列表截圖，較常見，持續(xù)性的提醒，一般出現(xiàn)在標(biāo)題欄下方或列表頂端，點(diǎn)擊可以獲取解決網(wǎng)絡(luò)問題的幫助；
toast：見支付寶截圖、一般顯示少量文字，幾秒內(nèi)消失，容易被忽略，提醒但不打斷的；
頁面內(nèi)提示：見墨跡天氣，不打斷用戶，起到了讓用戶知道的目的。
總結(jié)：這類場景下，常見的提示樣式有Notice bar、toast、頁面內(nèi)提示。
3.需要提醒用戶，但不是立即
這一類場景，我把它總結(jié)為用戶會(huì)持續(xù)操作的場景，可能不太貼切，舉例子說明吧。比如新浪發(fā)送微博，假設(shè)用戶在編輯內(nèi)容時(shí)，字還沒打完呢，就提示用戶網(wǎng)絡(luò)超時(shí)，這是想不想讓用戶打字了？這時(shí)常見的提醒樣式有以下幾種。
重試按鈕：見微信聊天，發(fā)送失敗會(huì)提醒用戶，點(diǎn)擊即可重新發(fā)送。
彈窗：見淘寶截圖，在用戶操作時(shí)不打斷，完成后會(huì)彈窗提示失敗，并保存操作，彈窗里的內(nèi)容一般比較重要，有時(shí)內(nèi)容較長也會(huì)用彈窗。
toast：見知乎，斷網(wǎng)時(shí)打開首頁，已經(jīng)有緩存好的內(nèi)容（沒有緩存內(nèi)容時(shí)需立即提醒），沒有立即提醒，隨便點(diǎn)擊一篇內(nèi)容時(shí)會(huì)提醒。
多種提示樣式一起用
結(jié)合使用也很常見：如微博，用了重試按鈕，方便恢復(fù)網(wǎng)絡(luò)時(shí)重新發(fā)送、Notice bar點(diǎn)擊可進(jìn)入草稿箱、同時(shí)還用了toast提醒。
總結(jié)：這類場景下，常見的提示樣式有重試按鈕、彈窗、toast。
4.不需要提醒
這一類場景，斷網(wǎng)了也沒什么影響。比如微信閱讀，讀一本本地書籍，內(nèi)容都緩存好了，不需要提醒用戶。
總結(jié)
一般的app會(huì)根據(jù)需求和場景使用多種斷網(wǎng)提示方式，而不是單純的一種。比如微信，斷網(wǎng)下消息列表用Notice bar、設(shè)置頁面用彈窗、聊天框用重試按鈕、朋友圈斷網(wǎng)時(shí)不提醒。
現(xiàn)在試著用這樣的方法來優(yōu)化pmcaff的斷網(wǎng)提醒。
第一步，用戶需不需要看緩存內(nèi)容？個(gè)人覺得，截圖的那頁的核心就是展示內(nèi)容，所以沒有理由在斷網(wǎng)后清空頁面緩存。什么時(shí)候檢查網(wǎng)絡(luò)狀況？這個(gè)比較明顯，下拉刷新時(shí)檢查網(wǎng)絡(luò)狀態(tài)。那么結(jié)論是，用戶需要看緩存內(nèi)容，下拉刷新時(shí)檢查網(wǎng)絡(luò)狀態(tài)。
第二步，根據(jù)場景選樣式。這一塊需要立即打斷用戶并提示嗎？如果沒有緩存內(nèi)容時(shí)，啥也看不了，需要，用整頁提示。但如果有緩存內(nèi)容時(shí)就不需要了，在點(diǎn)擊開一篇文章時(shí)再提醒就好，可以參考知乎，用toast。
總結(jié)改動(dòng)為：斷網(wǎng)情況下，有緩存內(nèi)容時(shí)下拉刷新不清空緩存內(nèi)容，用toast提示。（PS：pmcaff整頁提示的文案也可以改一下，改為“加載失敗 ?請(qǐng)點(diǎn)擊重試”）
最后感謝看到這里的朋友，之前自己在梳理自己產(chǎn)品的斷網(wǎng)規(guī)則，想看看網(wǎng)上相關(guān)的文章，但是沒有找到。所以把自己的思路整理了一下發(fā)出來，不一定靠譜。希望可以拋磚引玉，歡迎批評(píng)，歡迎交流。
