起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品異常場景設計——5招搞定弱網和離線場景的產品設計
編輯導語：不穩定的移動網絡，是非常影響用戶體驗的。當用戶處于弱網環境下，或者突然沒有網絡連接時，應該怎么設計才能讓用戶體驗不被影響呢？本文作者給出了五個關于弱網和離線場景設計的建議，感興趣的小伙伴們一起來看一下吧。
產品設計時，產品經理往往很少考慮當在弱網環境下（網絡連接慢時）或突然網絡沒有連接時（如進入電梯、地下室或開車進入隧道）與用戶怎么交互。
網絡問題常常被認為是暫時的問題，只需要給用戶一個錯誤提示。然而，網絡連接會直接影響用戶體驗，對移動應用更是如此，因為移動網絡常常不穩定。
我會討論關于弱網和離線場景設計的5個建議。
01 關鍵內容，提前緩存
理想情況下，移動應用應該在用戶離線和在線時同樣工作。如果你的應用不需要大量的數據，那么你應該默認緩存所有的數據。有些需要實時更新數據（如社交應用，地圖，音樂等等）的產品除外。
針對這種情況，建議有網絡時加載可用內容，并提供讓用緩存的功能，如離線地圖，下載歌曲等，這將讓用戶在離線時也可正常使用。
提示：了解你的用戶如何使用你的應用。這樣可以知道哪些內容和功能需要提供用戶下載，并進行離線使用。比如地圖和音樂應用，用戶應該能下載歌曲、地圖，這樣他們就可以在沒有網絡的情況下使用，盡量使“保存為離線”在界面中容易被找到。
如果你設計的產品有時間敏感信息，如股票交易或貨幣兌換的應用，你需要顯示應用程序的最后更新時間。這將防止用戶做出錯誤的決定。
02 離線狀態，動態告知
如果你的應用有一些只有在線時才能使用的功能，應該提示用戶當前狀態是否為離線狀態，通常用toast提示 “你已離線”。
建議：要讓用戶知道他們在離線模式下可以做什么。
03 用戶操作，進度保存
在弱網或沒有網絡環境下，用戶已輸入的內容沒有保存，是會讓用戶抓狂的。對于像填寫表格這樣的操作，應該緩存用戶的進度，并可以讓用戶從停止的地方繼續開始。
建議：向用戶保證，他們的進度將被保存，他們輸入的數據不會被刪除。例如，無網情況下，當用戶輸入完，點擊 “發送”時，應該有一條令人放心的信息：“當連接恢復時，信息將被發送”。
另外，一些涉及用戶隱私的信息可以不必緩存，如姓名、身份證、銀行卡號等，以免用戶誤解你在儲存他們的隱私另作他用。
04 頁面加載，框架優先
如果加載內容需要較長的時間，你可以先展示一個頁面框架，而不是顯示一個帶有無限加載旋鈕的空白屏幕。
頁面框架是你頁面的一個線框版本，在內容等待加載時顯示。它在中間狀態下發揮作用，給系統幾秒鐘的時間，以便能加載內容。讓用戶不會誤認為出了問題。
建議：嘗試在弱網環境使用你的產品。例如，Facebook舉辦了2G星期二，他們的移動開發團隊使用2G網絡來了解他們產品的體驗問題。
05 無網提示，刷新重試
為必須有網絡時的應用提供無網說明頁面。當用戶在離線時，沒有功能可用時，建議用一個簡短無網描述外加一個 “刷新”按鈕，以便用戶在恢復連接后可以點擊。
由于應用程序可以自動檢查連接，從功能的角度來看，這個按鈕并沒有提供多少價值。然而，它給用戶一種對系統的控制感，這種 “假按鈕”的方法類似于人行道上的 “過街”按鈕。
06 總結
移動產品設計中，弱網和離線環境是產品經理不得不考慮的一個場景。
通過離線緩存、動態提示、保存進度、頁面懶加載及刷新重試增加產品體驗設計。
本文由 @殷元星? 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
作者想的很棒，文章寫的也很棒，挺有用的，收藏
移動產品設計中，弱網和離線環境是產品經理不得不考慮的一個場景。
要是什么時候可以出現玩小游戲了，估計會更有意思一點。
很有意思的想法，就像谷歌斷網的時候404界面有一個小恐龍游戲，能提升產品趣味性，哈哈
很棒！把一個用戶的槽點變成Aha moment了！
離線是一個經常會出現的情況，這部分的設計也要到位，不然會讓用戶煩上加煩
哇，作者考慮的問題非常仔細，雖然弱網環境很少有，但是還是有必要在設計中考慮到。