編輯導(dǎo)讀：在使用產(chǎn)品的過程中，用戶有時(shí)會遇到無網(wǎng)絡(luò)的狀態(tài)。一般無網(wǎng)絡(luò)場景多且復(fù)雜，會引導(dǎo)用戶跳轉(zhuǎn)至外部場景，因此很多人會忽略無網(wǎng)絡(luò)狀態(tài)的交互體驗(yàn)。但是，根據(jù)不同的無網(wǎng)絡(luò)場景，向用戶提供反饋是非常重要的。本文將對此進(jìn)行分析，希望對你有幫助。

我們在設(shè)計(jì) App 的過程中，經(jīng)常會遇到異常場景，如無網(wǎng)絡(luò)狀態(tài)相關(guān)的情況，對許多設(shè)計(jì)師來說，這些場景往往都是“黑盒”，也很少會去注意甚至忽視這些場景。

在寫交互文檔時(shí)，可能一筆帶過，比如：“無網(wǎng)絡(luò)連接”、“網(wǎng)絡(luò)出問題了”。

線上對這種場景做簡單處理的 App 很多，可能考慮到多種原因，比如無網(wǎng)絡(luò)場景比較極端，用戶不常遇到且大部分知道如何處理、無網(wǎng)絡(luò)場景較多且較復(fù)雜、會引導(dǎo)用戶跳轉(zhuǎn)至外部場景等。但我們經(jīng)常忽視的這些異常場景，往往可能是用戶在體驗(yàn)產(chǎn)品中，感到“挫敗感”比較強(qiáng)的場景。

我們可以從 3 個方面分析無網(wǎng)絡(luò)：

1. 底層邏輯：無網(wǎng)絡(luò)會有多少種狀態(tài)，我們能否根據(jù)不同狀態(tài)給予用戶不同的幫助。
2. 框架層面：根據(jù)數(shù)據(jù)加載的情況，可以分為空頁面，緩存頁面，其中緩存頁面的更需要結(jié)合產(chǎn)品屬性采用合適的提示方式。
3. UI 層面：是否可以結(jié)合品牌特性進(jìn)行情感化的設(shè)計(jì)，緩解用戶焦慮感。

首先，無網(wǎng)絡(luò)的底層邏輯可以分為 3 個維度：無網(wǎng)絡(luò)有哪些場景、如何反饋、如何引導(dǎo)操作。

常見的無網(wǎng)絡(luò)場景一般如下面幾種情況：

1. 未連接移動網(wǎng)絡(luò)或 WLAN —— 未連接網(wǎng)絡(luò)導(dǎo)致的無網(wǎng)絡(luò)場景，較為常見。
2. 移動網(wǎng)絡(luò)或 WLAN 網(wǎng)絡(luò)信號差 —— 經(jīng)常出現(xiàn)在路上、地鐵等場景，導(dǎo)致弱網(wǎng)情況。
3. 開啟飛行模式 —— 打開飛行模式同時(shí)關(guān)了 WLAN，導(dǎo)致無網(wǎng)絡(luò)。
4. 網(wǎng)絡(luò)未認(rèn)證 —— 場景出現(xiàn)在外面連錯專用網(wǎng)絡(luò)，沒有認(rèn)證，導(dǎo)致無網(wǎng)絡(luò)。
5. 未開啟移動數(shù)據(jù)權(quán)限 —— 常見于 iOS，未連接 WLAN，且用戶自己禁止使用移動數(shù)據(jù)。

無網(wǎng)絡(luò)的情況這么多，我們是否有必要區(qū)分呢？可以想想，假如只做簡單提示，大部分用戶看到的提示可能是“網(wǎng)絡(luò)斷開了”，而實(shí)際上用戶可能只是開啟了飛行模式，產(chǎn)品在信息準(zhǔn)確性方面?zhèn)鬟_(dá)本身就不到位，并且也無法提供合適的反饋及幫助，無法快速幫助用戶解決當(dāng)前面臨的實(shí)際問題，所以有必要幫助用戶區(qū)分當(dāng)前問題。

我們該如何根據(jù)不同無網(wǎng)絡(luò)場景向用戶提供反饋呢？盡管無網(wǎng)絡(luò)有多種細(xì)分情況，但是作為設(shè)計(jì)師，我們也需要考慮到普通用戶是否能像我們一樣區(qū)分不同的場景。普通用戶只需要能夠區(qū)分當(dāng)前什么問題及怎么解決即可，向用戶傳達(dá)問題時(shí)，無需細(xì)致地讓用戶知道遇到的技術(shù)場景。

舉個例子：如“未連接移動網(wǎng)絡(luò)或 WLAN 無網(wǎng)絡(luò)連接”的場景，可以提示“網(wǎng)絡(luò)未連接，請?jiān)O(shè)置網(wǎng)絡(luò)”；“開啟飛行模式” 導(dǎo)致斷網(wǎng)的場景，可以提示“無網(wǎng)絡(luò)連接，請關(guān)閉飛行模式 ”。

僅僅提供反饋信息，但是沒有根據(jù)這些信息提供對應(yīng)幫助，從體驗(yàn)層面，也許做的還不到位，我們是否還能提供交互的引導(dǎo)，如京東的處理方式是提供異常場景說明：

輕芒雜志的處理方式則更符合我們對引導(dǎo)體驗(yàn)的要求，通過反饋用戶當(dāng)前遇到的實(shí)際情況，并且提供正確的處理引導(dǎo)方式：

我們也可以提供按鈕引導(dǎo)，比如假如用戶開啟了飛行模式，這時(shí)我們只需要引導(dǎo)用戶點(diǎn)擊【設(shè)置】跳轉(zhuǎn)設(shè)置頁，關(guān)閉飛行模式；遇到需要認(rèn)證網(wǎng)絡(luò)的情況，可以點(diǎn)擊【認(rèn)證】跳轉(zhuǎn)網(wǎng)絡(luò)認(rèn)證頁。

其實(shí)網(wǎng)絡(luò)實(shí)際情況組合比上述列舉的更復(fù)雜，但我們匯總了無網(wǎng)絡(luò)、弱網(wǎng)、飛行模式、認(rèn)證網(wǎng)絡(luò)、網(wǎng)絡(luò)權(quán)限等問題，從大的維度能幫助用戶區(qū)分問題即可。

其次，無網(wǎng)絡(luò)的展示層面，常見的主要是空頁面、緩存頁面。其中空頁面由于本身頁面無內(nèi)容，所以設(shè)計(jì)方面較為明確，常見的處理方式是引導(dǎo)圖+描述文案+引導(dǎo)按鈕。

而緩存頁面，由于產(chǎn)品屬性不一致，展示形式也較為豐富，需根據(jù)產(chǎn)品特點(diǎn)選擇適合的形式，常見的有：

長駐提醒：比如微信這種即時(shí)通訊類軟件，由于最新消息在最上方，且用戶在這里的習(xí)慣性操作而并非滑動列表向下瀏覽，所以把提示設(shè)計(jì)在頁面上方固定，好處是可以讓用戶明確注意到當(dāng)前網(wǎng)絡(luò)狀況，并提供對應(yīng)解決方式。而微博則不同，用戶使用微博最頻繁的操作就是向下瀏覽，所以無網(wǎng)絡(luò)提示會設(shè)計(jì)在信息流下方，與內(nèi)容區(qū)結(jié)合，避免類似于 toast 的一次性提醒。

toast 提示：toast 在使用場景上則更加通用，不受限于頁面內(nèi)容，但是弊端是大部分 toast 往往只提示一次，或者用戶再次拉動刷新時(shí)再次彈出。大部分 toast 未提供交互引導(dǎo)操作，也不利于引導(dǎo)用戶快速發(fā)現(xiàn)問題、解決問題。

最后，無網(wǎng)絡(luò)的?UI 設(shè)計(jì)層面，我們經(jīng)常能看到會對這些場景做情感化的插畫設(shè)計(jì)、文案設(shè)計(jì)，可以結(jié)合產(chǎn)品屬性進(jìn)行設(shè)計(jì)，在緩解用戶枯燥及焦慮的同時(shí)，也提升產(chǎn)品趣味性及品牌特點(diǎn)。如美團(tuán)外賣和袋鼠的形象結(jié)合、B 站和 2233 娘的形象結(jié)合。

總結(jié)：用戶實(shí)際使用產(chǎn)品的場景，往往都很復(fù)雜。作為交互設(shè)計(jì)師，除了考慮正常的流程之外，更應(yīng)該多考慮無網(wǎng)絡(luò)等邊界情況。對于 UI 設(shè)計(jì)師而言，可以考慮這些異常場景如何通過設(shè)計(jì)，緩解用戶的焦躁情緒，思考如何能以更巧妙的方式幫助用戶。

本文由 @熱風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議