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