編輯導讀：在使用產品的過程中，使用者有時會遇到無網路的狀態。一般無網路場景多且複雜，會引導使用者跳轉至外部場景，因此很多人會忽略無網路狀態的互動體驗。但是，根據不同的無網路場景，向用戶提供反饋是非常重要的。本文將對此進行分析，希望對你有幫助。
我們在設計 App 的過程中，經常會遇到異常場景，如無網路狀態相關的情況，對許多設計師來說，這些場景往往都是“黑盒”，也很少會去注意甚至忽視這些場景。
在寫互動文件時，可能一筆帶過，比如：“無網路連線”、“網路出問題了”。
線上對這種場景做簡單處理的 App 很多，可能考慮到多種原因，比如無網路場景比較極端，使用者不常遇到且大部分知道如何處理、無網路場景較多且較複雜、會引導使用者跳轉至外部場景等。但我們經常忽視的這些異常場景，往往可能是使用者在體驗產品中，感到“挫敗感”比較強的場景。
我們可以從 3 個方面分析無網路：
- 底層邏輯：無網路會有多少種狀態，我們能否根據不同狀態給予使用者不同的幫助。
- 框架層面：根據資料載入的情況，可以分為空頁面，快取頁面，其中快取頁面的更需要結合產品屬性採用合適的提示方式。
- UI 層面：是否可以結合品牌特性進行情感化的設計，緩解使用者焦慮感。
首先，無網路的底層邏輯可以分為 3 個維度：無網路有哪些場景、如何反饋、如何引導操作。
常見的無網路場景一般如下面幾種情況：
- 未連線行動網路或 WLAN —— 未連線網路導致的無網路場景，較為常見。
- 行動網路或 WLAN 網路訊號差 —— 經常出現在路上、地鐵等場景，導致弱網情況。
- 開啟飛航模式 —— 開啟飛航模式同時關了 WLAN，導致無網路。
- 網路未認證 —— 場景出現在外面連錯專用網路，沒有認證，導致無網路。
- 未開啟移動資料許可權 —— 常見於 iOS，未連線 WLAN，且使用者自己禁止使用移動資料。
無網路的情況這麼多，我們是否有必要區分呢？可以想想，假如只做簡單提示，大部分使用者看到的提示可能是“網路斷開了”，而實際上使用者可能只是開啟了飛航模式，產品在資訊準確性方面傳達本身就不到位，並且也無法提供合適的反饋及幫助，無法快速幫助使用者解決當前面臨的實際問題，所以有必要幫助使用者區分當前問題。
我們該如何根據不同無網路場景向用戶提供反饋呢？儘管無網路有多種細分情況，但是作為設計師，我們也需要考慮到普通使用者是否能像我們一樣區分不同的場景。普通使用者只需要能夠區分當前什麼問題及怎麼解決即可，向用戶傳達問題時，無需細緻地讓使用者知道遇到的技術場景。
舉個例子：如“未連線行動網路或 WLAN 無網路連線”的場景，可以提示“網路未連線，請設定網路”；“開啟飛航模式” 導致斷網的場景，可以提示“無網路連線，請關閉飛航模式 ”。
僅僅提供反饋資訊，但是沒有根據這些資訊提供對應幫助，從體驗層面，也許做的還不到位，我們是否還能提供互動的引導，如京東的處理方式是提供異常場景說明：
輕芒雜誌的處理方式則更符合我們對引導體驗的要求，透過反饋使用者當前遇到的實際情況，並且提供正確的處理引導方式：
我們也可以提供按鈕引導，比如假如使用者開啟了飛航模式，這時我們只需要引導使用者點選【設定】跳轉設定頁，關閉飛航模式；遇到需要認證網路的情況，可以點選【認證】跳轉網路認證頁。
其實網路實際情況組合比上述列舉的更復雜，但我們彙總了無網路、弱網、飛航模式、認證網路、網路許可權等問題，從大的維度能幫助使用者區分問題即可。
其次，無網路的展示層面，常見的主要是空頁面、快取頁面。其中空頁面由於本身頁面無內容，所以設計方面較為明確，常見的處理方式是引導圖+描述文案+引導按鈕。
而快取頁面，由於產品屬性不一致，展示形式也較為豐富，需根據產品特點選擇適合的形式，常見的有：
長駐提醒：比如微信這種即時通訊類軟體，由於最新訊息在最上方，且使用者在這裡的習慣性操作而並非滑動列表向下瀏覽，所以把提示設計在頁面上方固定，好處是可以讓使用者明確注意到當前網路狀況，並提供對應解決方式。而微博則不同，使用者使用微博最頻繁的操作就是向下瀏覽，所以無網路提示會設計在資訊流下方，與內容區結合，避免類似於 toast 的一次性提醒。
toast 提示：toast 在使用場景上則更加通用，不受限於頁面內容，但是弊端是大部分 toast 往往只提示一次，或者使用者再次拉動重新整理時再次彈出。大部分 toast 未提供互動引導操作，也不利於引導使用者快速發現問題、解決問題。
最後，無網路的 UI 設計層面，我們經常能看到會對這些場景做情感化的插畫設計、文案設計，可以結合產品屬性進行設計，在緩解使用者枯燥及焦慮的同時，也提升產品趣味性及品牌特點。如美團外賣和袋鼠的形象結合、B 站和 2233 孃的形象結合。
總結：使用者實際使用產品的場景，往往都很複雜。作為互動設計師，除了考慮正常的流程之外，更應該多考慮無網路等邊界情況。對於 UI 設計師而言，可以考慮這些異常場景如何透過設計，緩解使用者的焦躁情緒，思考如何能以更巧妙的方式幫助使用者。
本文由 @熱風 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議