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