離線設計: 讓您的應用真正做到隨時可用

10-16

全球有近 16 億人生活在移動互聯網網路之外。在出行時，還有數百萬人的網路信號時斷時續。Wi-Fi 連接可能覆蓋不足，移動數據的成本也可能過高。例如，在烏干達，互聯網接入可能會佔據每月開銷的近 11%。生活在高價網路區域的人們經常關閉移動數據以便節省開支。我們經過研究發現，世界各地的人們，無論是在拉各斯還是洛杉磯，都會有意或無意地經常下線。離線狀態是當今數字體驗的重要組成部分。

離線設計屬於全新的設計領域，這賦予了設計師很大的創新空間和創造力，為受眾提供最適合其需求的通知和選項。我們的設計師 Rachel IIan Simpson 和 Pendar Yousefi 制定了這些 Material Design 指南，幫助您在全球化的產品中構建出更好的離線功能。

>> Material Design: 離線狀態

https://material.io/design/communication/offline-states.html#offline-functionality

清楚地顯示離線功能

△ 在應用或設備離線後，相應地顯示離線圖標

離線設計在移動產品中尚未實現標準化，但您可以使用一些規律來幫助人們了解產品的離線功能。例如，設計人員應通過顯示與「離線」一詞配對的離線圖標來指示何時可以離線使用應用或網站。具體而言，當用戶下載內容以供離線使用但仍然在線時，產品應顯示「離線可用」圖標。當手機本身離線時，產品還應顯示離線圖標。因此，無論用戶連接到互聯網與否，離線圖標依然是提示系統中的重要部分。

確保離線信息傳達準確

△ 如果無法取得網路連接，請顯示「無法連接至網路/雲端」圖標

將文本與視覺效果配對 —— 尤其需要考慮按鈕和其他可用功能，有助於提高整體可用性。例如，當失去在線功能時，將「無雲端連接」圖標與「無法連接至互聯網」等明文文案配對，以便讓用戶了解圖標的含義。圖標這樣的非文本信息還可以幫助文化程度不足人群和其他母語的使用者理解 UI。

允許下載內容以備將來離線使用

△ 在提供文件離線功能時，最佳做法是在下載按鈕旁邊註明文件大小

某些國家或地區的數據流量費用可能會超過普通用戶月收入的 10%，因此顯示文件大小可以幫助用戶確定他們是否希望在單次下載上消費這些流量。此外，低成本手機通常只配備了很少的存儲空間，您可以通過圖標與文案的組合、「下載」按鈕和文件大小提示的組合等，指示可供用戶將來離線使用的內容有多大。設計師還應該允許用戶輕鬆刪除離線的文件，因為用戶可能會想要節省手機上的存儲空間。正如上文中 Material Design 離線狀態設計指南所示，您需要顯示刪除操作按鈕，其中包含已下載文件的刪除圖標，並顯示通過刪除文件將會節約出多少空間。

從正在下載狀態到離線就緒狀態的過渡

△ 下載離線內容時，使用動畫幫助用戶確立期望下載時間

用戶可能會放棄那些需要很長時間才能載入的文件，因此您最好為下載活動設置預期時間。使用動畫顯示文件正在被下載，以及何時可以離線使用。在下載文件時，請顯示下載所需的秒數，讓用戶可以取消或暫停下載。當然，不要忘記在下載完成的時候告知用戶。

讓離線文件易於被用戶發現

△ 在主屏幕上提供菜單入口，幫助用戶找到他們的離線文件

如果離線是您應用的主要功能，請考慮在主屏幕上製作標籤或按鈕，以幫助用戶輕鬆找到所有離線文件。應用通常會在不同位置列出離線功能 (例如「更多」、「設置」或「選項」)。無論您決定把它們放在哪裡，都要注意讓離線文件處於可以被用戶發現的狀態。

在連接恢復時通知用戶

△ 當應用或內容再次上線時提醒用戶

人們經常將手機切換到飛行模式或關閉蜂窩數據，以節省流量、費用和電量。您在設計時應該考慮這些使用場景。您可以在應用或內容重新上線並能夠完成請求時通知用戶。例如，視頻、搜索查詢或消息可以排隊，這樣在恢復網路連接時，用戶就可以接到通知，了解到讓他們等待的內容或者功能又可以使用了。這種方法可以讓系統在用戶離線時為其提供內容，並且保留用戶的信任度和活躍度。

請務必在 UI 中傳達這些操作和狀態更新。使用快捷提示 —— 如上圖中屏幕底部的簡單色塊與單行文案的組合，顯示應用正在等待網路連接以便下載。例如，顯示「您的搜索結果已準備就緒」文本的快捷提示會通知用戶，他們的查詢已經有了結果。

離線狀態依然能給用戶帶來愉悅體驗

離線設計可以通過提升用戶滿意度並改善連接受限用戶的可訪問性，將已經廣受歡迎的應用提升到新的高度。請鼓勵您的團隊，讓大家將離線狀態視為創新的機遇，而不是障礙。考慮一些常見的用例，讓用戶在可能會失去互聯網連接時，仍然可以充分利用您的產品。例如，您的應用可以幫助忙碌的父母在前往市場的途中搜索食譜。或者通過允許查看朋友和家人的照片來幫助離家的遊子找到一點家的感覺 —— 即使沒有穩定的互聯網連接。離線設計是理解和響應用戶需求的重要部分，在為全球受眾進行產品構建時尤其如此。

您的應用是否在離線時也能為用戶提供有用的信息，並能在恢復網路連接後再次讓用戶回到互動流程中來呢？請在下面分享您的經驗或者疑惑，我們希望大家的應用能一直「活躍」，不論是在線或者離線的時候。

點擊屏末

閱

讀

原

文

了解 Material Design 中關於離線狀態設計的更多細節