Google Play：網(wǎng)絡(luò)斷斷續(xù)續(xù)，開(kāi)發(fā)者能為用戶(hù)做什么？

我和Material Design團(tuán)隊(duì)的內(nèi)容策略師Susanna Zaraysky共同撰寫(xiě)了此文。

隨著居家辦公在世界各地逐漸常態(tài)化，網(wǎng)絡(luò)帶寬的使用量也越來(lái)越大，包括流媒體視頻、電話(huà)會(huì)議和收發(fā)文件。越來(lái)越多的人接入網(wǎng)絡(luò)，再加上技術(shù)基礎(chǔ)設(shè)施問(wèn)題和極端天氣事件，不可避免地會(huì)導(dǎo)致時(shí)斷時(shí)續(xù)的網(wǎng)絡(luò)連接。過(guò)去常見(jiàn)于農(nóng)村地區(qū)和新興市場(chǎng)的網(wǎng)絡(luò)連接問(wèn)題，如今在全球范圍內(nèi)都屢見(jiàn)不鮮。網(wǎng)絡(luò)過(guò)載會(huì)導(dǎo)致連接中斷，時(shí)間從幾秒到幾小時(shí)不等，在此期間用戶(hù)無(wú)法訪(fǎng)問(wèn)網(wǎng)絡(luò)內(nèi)容。許多用戶(hù)因此選擇放棄，或者試圖在網(wǎng)絡(luò)不那么慢的時(shí)候(如晚上)完成任務(wù)。還有些用戶(hù)則可能因?yàn)榫W(wǎng)絡(luò)覆蓋范圍有限，或是為了節(jié)省數(shù)據(jù)流量或電量而處于離線(xiàn)狀態(tài)。

Wi-Fi的使用情況則更加多樣，有些人很少或從未訪(fǎng)問(wèn)過(guò)功能正常的Wi-Fi網(wǎng)絡(luò)，有些人會(huì)在連接到Wi-Fi時(shí)下載盡可能多的文件以供離線(xiàn)使用。另外，即便有時(shí)候Wi-Fi信號(hào)看起來(lái)滿(mǎn)格，而實(shí)際上只是個(gè)"Lie-fi":緩慢或斷續(xù)連接，甚至干脆沒(méi)有連接互聯(lián)網(wǎng)。

Lie-fi

https://developers.google.cn/web/fundamentals/performance/poor-connectivity/#lie-fi

這些情況都會(huì)造成失落和困惑。

基于以下策略，我們通過(guò)示例分享說(shuō)明如何設(shè)計(jì)應(yīng)用才能減少糟糕的連接給用戶(hù)造成的挫敗感:

無(wú)論網(wǎng)絡(luò)連接情況如何，都要提供愉悅的體驗(yàn)讓用戶(hù)參與其中。

出現(xiàn)網(wǎng)絡(luò)連接問(wèn)題時(shí)，不要出現(xiàn)界面停滯或顯示空白屏幕，而是要告訴用戶(hù)發(fā)生了什么，以減少用戶(hù)的困惑和失落。

插圖:Next Billion Users視覺(jué)設(shè)計(jì)師Taylor Herr

逐步加載內(nèi)容并提高保真度

加載圖像的方式會(huì)影響感知延遲(用戶(hù)感覺(jué)需要等待的時(shí)間)和實(shí)際延遲(加載圖像所需的實(shí)際時(shí)間)。

在加載全分辨率圖像之前加載模糊圖像或骨架內(nèi)容，可以在不增加實(shí)際延遲的情況下減少感知延遲。這種方法比顯示部分加載的圖像更好，因?yàn)橥暾麍D像即便只是部分加載也可能需要額外的時(shí)間。

用灰色"骨架"等內(nèi)容進(jìn)行占位，讓用戶(hù)感知到即將顯示的內(nèi)容。

Google Lens使用灰色"骨架"呈現(xiàn)正在加載的內(nèi)容

Google Lens

https://play.google.com/store/apps/details?id=com.google.ar.lens

按優(yōu)先級(jí)順序逐步加載內(nèi)容

按優(yōu)先級(jí)順序加載可以減少慢速或斷續(xù)連接帶來(lái)的感知延遲。一次性加載多個(gè)內(nèi)容單元(文本、視頻和圖像)可能比加載單個(gè)項(xiàng)目要花費(fèi)更多時(shí)間。先加載文本，再加載圖像。按重要性順序加載單個(gè)元素而不是一次性加載所有元素，可以減少用戶(hù)等待加載內(nèi)容的時(shí)間。

按照優(yōu)先級(jí)順序加載內(nèi)容，而不是一次全部加載。

YouTube會(huì)先加載主視頻，然后加載視頻標(biāo)題和描述，最后加載其他相關(guān)視頻的縮略圖和標(biāo)題

加載模擬內(nèi)容

在用戶(hù)等待應(yīng)用加載時(shí)，顯示模擬內(nèi)容將減少感知延遲，并讓用戶(hù)了解應(yīng)用的工作方式。

生成關(guān)于應(yīng)用的模擬內(nèi)容。

左圖:在用戶(hù)開(kāi)始上手使用前，Duo應(yīng)用會(huì)通過(guò)呈現(xiàn)模擬內(nèi)容來(lái)闡述產(chǎn)品優(yōu)勢(shì)，增進(jìn)用戶(hù)對(duì)應(yīng)用的了解；

右圖:在用戶(hù)授予通訊錄權(quán)限后，Duo將逐步改變界面并填充實(shí)際內(nèi)容，用戶(hù)在通訊錄中的好友隨即出現(xiàn)

Duo

https://play.google.com/store/apps/details?id=com.google.android.apps.tachyon

斷續(xù)連接體驗(yàn)

當(dāng)網(wǎng)絡(luò)強(qiáng)度可能在2G到3G到4G速度之間波動(dòng)時(shí)，確保用戶(hù)的體驗(yàn)?zāi)軣o(wú)縫銜接。不要阻止用戶(hù)使用應(yīng)用。通過(guò)將任務(wù)加入隊(duì)列或在網(wǎng)絡(luò)連接可用時(shí)進(jìn)行預(yù)緩存和下載，營(yíng)造應(yīng)用仍在工作的跡象。

加載提示

連接在速度和可靠性上可能會(huì)有所不同。向用戶(hù)顯示其連接狀態(tài)，尤其是在用戶(hù)等待內(nèi)容加載或下載的時(shí)候。

不顯示進(jìn)度的加載提示表明加載過(guò)程，而顯示加載進(jìn)度則能表明內(nèi)容加載了多少。如果可能，兩者都應(yīng)顯示。

使用進(jìn)度條或占位符內(nèi)容向用戶(hù)表明內(nèi)容正在加載。如果可能，同時(shí)提供帶進(jìn)度和不帶進(jìn)度的加載提示。顯示下載所需時(shí)長(zhǎng)可增加透明度。

考慮所有類(lèi)型的連接情況

針對(duì)所有可能的連接情況進(jìn)行設(shè)計(jì):成功、部分加載、無(wú)限期等待和完全失敗。比如下圖中的YouTube示例:

左圖:成功加載(顯示視頻縮略圖)；

中圖:當(dāng)連接中斷或斷續(xù)時(shí)，屏幕中央顯示圓形加載提示；

右圖:加載完全失敗狀態(tài)，提供了重試選項(xiàng)

其他緩慢或斷續(xù)連接選項(xiàng)

并不是所有用戶(hù)都知道查看狀態(tài)欄中的飛行模式、Wi-Fi信號(hào)和移動(dòng)數(shù)據(jù)關(guān)閉圖標(biāo)來(lái)確認(rèn)是否在線(xiàn)。對(duì)于一些用戶(hù)來(lái)說(shuō)，這些圖標(biāo)太小了。要讓用戶(hù)更直接地獲取連接信息，可以考慮在應(yīng)用界面中明確顯示連接狀態(tài)。

連接狀態(tài)消息

如果應(yīng)用功能由于網(wǎng)絡(luò)連接而發(fā)生意外變化，用戶(hù)可能會(huì)感到沮喪或疑惑。對(duì)于依賴(lài)網(wǎng)絡(luò)的應(yīng)用，可以顯示一條信息，告知用戶(hù)當(dāng)前的連接狀態(tài)或連接狀態(tài)的重要變化。

告知用戶(hù)會(huì)影響應(yīng)用功能的重要連接狀態(tài)，如打開(kāi)了飛行模式或移動(dòng)數(shù)據(jù)被關(guān)閉。

左圖:Google Go應(yīng)用在飛行模式下會(huì)顯示用戶(hù)處于離線(xiàn)狀態(tài)，在信息提示控件中同時(shí)顯示飛行模式圖標(biāo)和文字標(biāo)簽；

右圖:Google Go應(yīng)用在應(yīng)用內(nèi)的信息提示控件中顯示移動(dòng)數(shù)據(jù)關(guān)閉的文字標(biāo)簽和蜂窩信號(hào)關(guān)閉圖標(biāo)

Google Go應(yīng)用

https://play.google.com/store/apps/details?id=com.google.android.apps.searchlite&hl=en_US

飛行模式圖標(biāo)

https://material.io/resources/icons/?search=airplane%20&icon=airplanemode_active&style=baseline

蜂窩信號(hào)關(guān)閉圖標(biāo)

https://material.io/resources/icons/?search=data&icon=signal_cellular_off&style=baseline

當(dāng)連接狀態(tài)出現(xiàn)波動(dòng)時(shí)，在界面中顯示最新的狀態(tài)信息。

左圖:當(dāng)Chat應(yīng)用離線(xiàn)時(shí)，頂部進(jìn)度條將顯示狀態(tài)，"發(fā)送"按鈕將被禁用；

右圖:當(dāng)Chat應(yīng)用聯(lián)網(wǎng)后，進(jìn)度條消失，"發(fā)送"按鈕被激活，允許用戶(hù)繼續(xù)發(fā)送消息

Chat應(yīng)用

https://play.google.com/store/apps/details?id=com.google.android.apps.dynamite

如果您的應(yīng)用正在等待連接完成任務(wù)，可以在界面中指明這一狀態(tài)。

文檔上有代表其狀態(tài)的圖標(biāo)。

左圖:顯示等待狀態(tài)；右圖:顯示同步狀態(tài)

延遲操作

在某個(gè)任務(wù)流程中，如果不需要用戶(hù)輸入，可以考慮提供一個(gè)選項(xiàng)，即在重新建立連接時(shí)讓?xiě)?yīng)用在后臺(tái)完成任務(wù)(例如網(wǎng)頁(yè)搜索)，并在任務(wù)完成后通知用戶(hù)。

左圖:當(dāng)用戶(hù)在Google應(yīng)用中進(jìn)行搜索時(shí)，如果沒(méi)有連接到互聯(lián)網(wǎng)，應(yīng)用會(huì)在結(jié)果就緒時(shí)再主動(dòng)通知用戶(hù)；

中圖:在設(shè)備連接到互聯(lián)網(wǎng)后，應(yīng)用就會(huì)自動(dòng)嘗試獲取搜索結(jié)果；

右圖:如果用戶(hù)沒(méi)有打開(kāi)Google應(yīng)用，應(yīng)用會(huì)在搜索結(jié)果就緒時(shí)發(fā)送通知

Google應(yīng)用

https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox

給出選項(xiàng)

為用戶(hù)提供可以在慢速連接環(huán)境下工作的選項(xiàng)。

左圖:YouTube的自適應(yīng)比特率流式傳輸允許視頻分辨率自動(dòng)適應(yīng)網(wǎng)絡(luò)條件；

右圖:這一視頻應(yīng)用示例檢測(cè)到緩慢的網(wǎng)絡(luò)連接，并建議切換到音頻，以便實(shí)現(xiàn)無(wú)中斷的對(duì)話(huà)

連接問(wèn)題在人們開(kāi)始大規(guī)模居家辦公之前就已經(jīng)存在了，并且將繼續(xù)存在。為各種連接場(chǎng)景設(shè)計(jì)替代方案，可以在一定程度上提升用戶(hù)的生活品質(zhì)。

*本文中的屏幕截圖由Duo、Google Lens、GPay India、Google應(yīng)用、Google Go、Google Docs、GSuite Chat和YouTube團(tuán)隊(duì)提供。

您的應(yīng)用有針對(duì)不同的網(wǎng)絡(luò)連接條件進(jìn)行設(shè)計(jì)嗎？歡迎在評(píng)論區(qū)和我們分享您的經(jīng)驗(yàn)和想法。