本頁面提供設計指南，說明如何在網路速度緩慢和離線狀態下提供優質的使用者體驗。
網路連線品質可能受到多項因素影響，例如：
- 網路供應商的覆蓋範圍不佳。
- 極端天氣狀況。
- 停電。
- 進入永久的「死角」，例如建築物內的牆壁會阻斷網路連線。
- 進入暫時性的「死角」，例如搭乘火車經過隧道時。
- 時間受限的網路連線，例如機場或飯店的連線。
- 文化習俗規定在特定時間或特定日子，使用者不得或僅能有限使用網路。
開發人員的目標是提供良好的體驗，降低連線變更所造成的影響。
決定在使用者網路連線不佳時，要向他們顯示哪些內容
首先，請思考網路連線成功和失敗的情況。成功連線是指應用程式正常的線上體驗，連線失敗包括應用程式在離線和網路延遲的情況下執行的行為。
如要決定如何處理連線失敗問題，請問自己以下重要使用者體驗問題：
- 您等待多久才能判斷連線是否成功？
- 在判斷成功或失敗的過程中，您可以做些什麼？
- 如果連線失敗，該如何處理？
- 您如何向使用者說明發生的情況？
通知使用者目前狀態和狀態變更
告知使用者應用程式的狀態，以及在網路發生問題時仍可採取的動作。舉例來說，通知可能會顯示以下內容：
你的網路連線似乎不佳。請放心！系統會在網路恢復後傳送訊息。
在網路連線改善或恢復時通知使用者
您如何告知使用者網路連線已改善，取決於應用程式。優先顯示目前資訊的應用程式 (例如天氣或股票市場追蹤器)，應自動更新並盡快通知使用者。
建議您使用 Material Design 訊息方塊元素等視覺提示，讓使用者知道您的網路應用程式已「在背景」更新。這包括偵測服務工作者是否存在，以及其受管理內容是否更新。您可以在此查看此函式運作的程式碼範例。
舉例來說，Chrome 平台狀態會在應用程式更新時向使用者發布通知。
部分應用程式可以一律顯示上次更新的時間。舉例來說，這對於貨幣轉換器應用程式特別實用。
新聞應用程式可以顯示簡單的輕觸更新通知，通知使用者有新內容。自動更新文章會導致使用者無法找到上次停留的位置。
更新 UI，反映目前的內容狀態
每個 UI 元素都有各自的背景資訊和行為，這些資訊和行為會根據是否需要成功連線而變更。舉例來說，電子商務網站可在離線狀態下瀏覽，但在重新建立連線前，會停用價格和「購買」按鈕。
其他形式的內容狀態可能會包含資料。舉例來說，金融應用程式 Robinhood 會使用顏色和圖形，告訴使用者股市交易時間。整個介面會變成白色，然後在市場關閉時變成灰色。當股票價格上漲或下跌時，每個個別股票小工具會依狀態變成綠色或紅色。
向使用者說明離線模型
大多數使用者都習慣隨時連上網路。您需要向使用者說明應用程式在沒有連線時會發生哪些變化。請告訴他們大型資料的儲存位置，並提供設定，讓他們變更預設行為。請同時使用多個 UI 設計元件 (例如資訊性語言、圖示、通知、顏色和圖像) 來傳達這些概念，而不要只依賴單一設計選項 (例如單獨的圖示) 來說明整個故事。
預設提供離線體驗
如果應用程式不需要太多資料，則預設會快取該資料。如果使用者只能在有網路連線的情況下存取資料，可能會越來越不耐煩。
盡可能提供穩定的使用體驗。連線不穩定會讓使用者覺得應用程式不可靠。應用程式若能減少網路故障的影響，就能取悅使用者。
新聞網站可以透過自動下載和自動儲存最新新聞的方式，藉由僅下載文字來儲存資料，讓使用者在沒有連線的情況下閱讀當天的新聞。您可以優先下載使用者最常查看的新聞類別，讓這項行為與使用者行為相符。
在應用程式可供離線使用時通知使用者
網頁應用程式首次載入時，必須向使用者指出是否可離線使用。您可以透過提供簡短操作回饋的小工具，在畫面底部顯示訊息，例如當某個區段已同步或檔案已下載時。
請確認您使用的語言適合目標對象，並在所有適用的情況下使用相同的措辭。非技術性目標對象通常會誤解「離線」一詞，因此請改用目標對象能理解的行動導向用語。
在介面中清楚顯示「儲存離線觀看」
如果應用程式使用大量資料，請確認有切換鈕或固定點，可新增可離線使用的項目。只有在使用者透過設定選單明確要求時，才自動下載檔案。請確認使用者能清楚看到釘選或下載 UI，且不會被其他 UI 元素遮蓋。
例如需要大量檔案的音樂播放器。使用者知道相關的資料費用，但也可能想在離線時使用播放器。使用者必須事先規劃，才能下載音樂供日後使用，因此您可能會在新手上路期間，向使用者說明相關資訊。
說明離線可用的內容
清楚說明提供的選項。您可能需要顯示「離線媒體庫」或內容索引的索引標籤或設定，讓使用者查看裝置上儲存的內容，以及需要儲存的內容。請確保設定簡潔明確，並清楚說明資料的儲存位置和存取權限。
顯示動作的實際費用
許多使用者會將離線功能與「下載」畫上等號。在網路連線經常失敗或無法使用的國家/地區，使用者經常與其他使用者分享內容，或是在網路連線時儲存內容以供離線使用。
使用者有時會因擔心費用而避免下載大型檔案，因此您可能也想顯示相關費用，讓使用者能主動比較特定檔案或工作。舉例來說，上述音樂應用程式可以偵測使用者是否使用數據方案，並顯示檔案大小，讓使用者瞭解檔案的費用。
協助防範遭駭客入侵的體驗
使用者經常在不知情的情況下，就會對體驗進行駭客攻擊。舉例來說，在雲端檔案分享網頁應用程式問世之前，使用者通常會儲存大型檔案並附加至電子郵件，以便在其他裝置上繼續編輯這些檔案。良好的使用者介面會解決使用者想要解決的問題，不會讓使用者陷入遭駭客入侵的體驗。舉例來說，您可以提供跨裝置共用大型檔案的方式，而非讓電子郵件附件更符合使用者需求。
讓體驗可在不同裝置間轉移
針對不穩定的網路建構應用程式時，請在連線品質改善後盡快同步處理，以便轉移體驗。舉例來說，假設旅遊應用程式在預訂過程中斷開網路連線。重新建立連線後，應用程式會與使用者的帳戶同步，讓使用者繼續在電腦裝置上預訂，提供流暢的使用體驗。
向使用者說明資料的狀態。舉例來說，您可以顯示應用程式是否已同步。盡可能提供教育訓練，但請勿傳送過多訊息，以免使用者感到不耐煩。
打造包容設計體驗
設計使用者體驗時，請提供有意義的設計裝置、簡單的語言、標準圖示和有意義的圖像，引導使用者完成動作或任務，同時不妨礙使用者操作。
使用簡單明瞭的語言
良好的使用者體驗不只是設計介面，這包括使用者在應用程式中採取的路徑，以及他們在過程中遇到的所有事物，包括應用程式用來描述該歷程的語言。說明 UI 元件或應用程式狀態時，請避免使用技術術語。「離線」一詞通常無法清楚告知使用者應用程式正在執行的操作。
使用多種設計工具打造無障礙的使用者體驗
使用語言、顏色和視覺元件來顯示狀態或狀態變更。僅使用顏色顯示狀態，使用者可能不易察覺，甚至完全無法使用。此外，由於網頁設計通常會使用灰色來表示已停用的元素，因此如果您使用灰色 UI 來表示應用程式處於離線狀態，可能會讓使用者混淆，不知道離線時應用程式可以執行哪些操作，尤其是如果您只使用顏色來顯示狀態時。
為避免誤解，請透過多種方式向使用者表達應用程式狀態，例如使用顏色、標籤和 UI 元件。
使用可傳達意義的圖示
請務必在圖示旁加上有意義的文字標籤。單獨使用圖示可能會造成混淆，尤其是在網路上，「離線」這個概念相對較新。其他容易造成混淆的圖示包括使用軟碟代表「儲存」(save)，這對從未見過軟碟的較年輕使用者來說可能毫無意義，以及「漢堡」選單圖示。
在推出離線圖示時，請遵循業界標準視覺效果 (如有)，並提供文字標籤和說明。舉例來說，您可以使用下載圖示表示要離線儲存，使用同步圖示表示要執行同步作業。使用圖示表示狀態時，請小心謹慎，因為圖示可能會被誤認為是儲存或下載動作。
如需更多靈感，請參閱 Material Design 圖示集。
使用骨架版面配置和其他意見回饋機制
在應用程式載入內容時，請向使用者顯示載入狀態，以免他們誤以為系統發生問題。其中一種方法是使用骨架版面配置，也就是在載入內容時顯示的應用程式線框版本。您也可以考慮使用預載器 UI，並搭配文字標籤，告訴使用者應用程式正在載入，或是為線框提供輕柔脈動動畫，讓使用者感覺線框正在載入中。這麼做可讓使用者放心，知道系統正在處理，並有助於避免重新提交或不必要的重新整理。
提供意見回饋，顯示動作的狀態。舉例來說，如果使用者在離線狀態下編輯文件，建議您變更意見回饋設計，讓使用者能清楚看出離線與連線狀態的差異，但仍能看到檔案已「儲存」，並會在連上網路時同步處理。這可讓使用者瞭解應用程式運作方式，並讓他們放心，因為系統已儲存他們的工作或操作，讓他們更有信心使用應用程式。
不要封鎖內容
在某些應用程式中，使用者可能會觸發建立新文件等動作。有些應用程式會嘗試連線至伺服器，以便同步處理新文件。為了展示這項功能，這些應用程式會顯示一個會覆蓋整個畫面的干擾性載入模式對話方塊。如果使用者擁有穩定的網路連線，這項做法可能會有效，但如果網路不穩定，使用者就無法逃離這項操作，因此使用者介面會阻止他們執行其他操作。
避免會封鎖內容的網路要求。讓使用者繼續瀏覽應用程式，並排入將在連線改善後執行及同步處理的工作。
為下一個十億人設計
在許多地區，低階裝置很常見，連線不穩定，而且對許多使用者來說，數據非常昂貴。請秉持資訊公開的原則，並謹慎使用資料，以贏得使用者的信任。請思考如何協助連線不佳的使用者，並簡化介面以加快作業速度。請務必先詢問使用者，再下載資料量龐大的內容。
為連線速度緩慢的使用者提供低頻寬選項。在網路連線速度較慢的情況下提供較小的素材資源，或是提供選擇高品質或低品質素材資源的選項。
結論
教育是離線使用者體驗的關鍵，因為使用者不熟悉這項功能。為了協助他們學習，請嘗試與他們熟悉的概念建立關聯，例如說明將檔案下載以供日後使用，就等同於離線資料。
設計不穩定的網路連線時，請記住下列規範：
- 設計網路連線的成功、失敗和不穩定情況。
- 資料可能很昂貴，因此請考量使用者的感受。
- 全球大多數使用者幾乎都使用行動裝置。
- 低階裝置很常見，其儲存空間、記憶體和處理能力有限，螢幕較小，觸控螢幕品質較差。請務必將效能納入設計流程。
- 允許使用者在離線時瀏覽應用程式。
- 通知使用者目前的狀態和狀態變更。
- 如果應用程式不需要太多資料，請嘗試預設提供離線資料。
- 如果應用程式需要大量資料，請向使用者說明如何下載資料以供離線使用。
- 讓體驗可在裝置之間轉移。
- 運用語言、圖示、圖像、字體排版和顏色，向使用者表達想法。
- 提供安撫訊息和意見回饋，協助使用者。