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