我和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)和想法。