App網(wǎng)絡(luò)相關(guān)設(shè)計(jì)總結(jié)
網(wǎng)絡(luò)相關(guān)設(shè)計(jì)是什么?如何設(shè)計(jì)?本文作者將從自身角度一一為你解答,enjoy~
老規(guī)矩,先上圖:
一. 網(wǎng)絡(luò)相關(guān)設(shè)計(jì)簡(jiǎn)介
很多文章和視頻里都說(shuō)我們需要針對(duì)網(wǎng)絡(luò)異常情況做一個(gè)設(shè)計(jì)。沒錯(cuò),可是網(wǎng)絡(luò)異常設(shè)計(jì)包含哪些內(nèi)容呢?文章中會(huì)說(shuō)有:
- 4G下執(zhí)行看視頻,下載等
- WiFi下看視頻突然切換到4G
- 斷網(wǎng)
- 弱網(wǎng)
看到這里是不是覺得哪里不對(duì)勁呢,如果說(shuō)3和4屬于網(wǎng)絡(luò)異常情況,可是1和2屬于用戶的正常操作啊,將其歸結(jié)為網(wǎng)絡(luò)異常的話似乎有些不合理,所以我更傾向于將這些所謂的網(wǎng)絡(luò)異常設(shè)計(jì)統(tǒng)一稱呼為網(wǎng)絡(luò)相關(guān)設(shè)計(jì)。
二. 如何設(shè)計(jì)
1. 確定需要設(shè)計(jì)的與網(wǎng)絡(luò)有關(guān)的場(chǎng)景與提示時(shí)機(jī)
(1)兩個(gè)場(chǎng)景
- 應(yīng)用內(nèi)是否有非常消耗流量的場(chǎng)景,比如下載、在線看電影、看直播、看視頻、聽歌等;
- 斷網(wǎng)場(chǎng)景。
一共有兩個(gè)場(chǎng)景需要我們?nèi)ヌ崾居脩?,第一個(gè)場(chǎng)景屬于有些應(yīng)用中有有些應(yīng)用中沒有,而第二個(gè)場(chǎng)景是所有應(yīng)用中都需要考慮到的,另外在文章一開始提到了弱網(wǎng)場(chǎng)景,有些文章中提到需要設(shè)計(jì)弱網(wǎng)場(chǎng)景,但是至少我看到過(guò)的所有應(yīng)用中都沒有專門針對(duì)弱網(wǎng)做設(shè)計(jì),有些人認(rèn)為應(yīng)用中提示“您的網(wǎng)絡(luò)狀況差”就是針對(duì)弱網(wǎng)做的設(shè)計(jì),但是實(shí)際上當(dāng)你的應(yīng)用斷網(wǎng)了,應(yīng)用也是這么提示的。
(2)提示時(shí)機(jī)
在第一個(gè)場(chǎng)景下,我們需要在兩個(gè)時(shí)間點(diǎn)去提示用戶:
①用戶在4G網(wǎng)絡(luò)下觸發(fā)了需要消耗大流量操作的時(shí)候
②用戶正在WiFi狀態(tài)下使用消耗大流量的功能并需要切換回4G網(wǎng)絡(luò)時(shí)
在第二個(gè)場(chǎng)景下,我們也有兩個(gè)時(shí)間點(diǎn)去提示:
①用戶進(jìn)入新頁(yè)面時(shí)
②用戶在頁(yè)面內(nèi)發(fā)送各種請(qǐng)求到服務(wù)器時(shí)
2、提示用戶
(1)常見的提示方式
①Toast
Toast提示就是界面中彈出一個(gè)文字提示短語(yǔ),過(guò)一會(huì)自動(dòng)消失,用戶無(wú)法點(diǎn)擊,在頁(yè)面中有數(shù)據(jù)的情況下,很多應(yīng)用都使用這種提示方式。
②頁(yè)面提示
頁(yè)面提示就是這種整個(gè)頁(yè)面都用來(lái)提示用戶的方式,可以放一些圖片在頁(yè)面上分散用戶的注意力,使用頁(yè)面提示的方式,我們一定要記得給出用戶如何排查網(wǎng)絡(luò)故障的方案,而不是像上圖中的一樣只是提示用戶。
③Snackbar
Snackbar也是這樣的一個(gè)文字提示短語(yǔ),Snackbar和Toast的區(qū)別在于Snackbar不光能提示用戶,用戶還可以通過(guò)點(diǎn)擊Snackbar來(lái)進(jìn)行網(wǎng)絡(luò)設(shè)置,所以Snackbar的體驗(yàn)比起Toast來(lái)說(shuō)會(huì)更好,所以在相同的情況下,最好使用Snackbar來(lái)代替Toast。
④Tips/List
一些產(chǎn)品經(jīng)理喜歡將這種條狀的,列表樣式的提示方式稱呼為Tips或List,有的List是可以點(diǎn)擊的,基本和Snackbar一樣,有的List不能點(diǎn)擊和Toast有點(diǎn)像,一般適用于這種列表式的頁(yè)面,能很好的和背景融為一體。如果要使用List的話,記得要做成可以點(diǎn)擊的,給用戶提供解決方案。
⑤Dialog
Dialog就是我們平時(shí)說(shuō)的彈窗,雖然不同的應(yīng)用內(nèi)彈窗長(zhǎng)的不一樣,但是作用都是一樣的。Dialog的特點(diǎn)是可以為用戶提供操作選項(xiàng),并且最重要的是會(huì)打斷用戶正在執(zhí)行的動(dòng)作,用戶只有通過(guò)點(diǎn)擊才能取消Dialog,用戶不會(huì)錯(cuò)過(guò)提示消息。
⑥視頻框內(nèi)提示
這種提示方式鑲嵌在視頻框內(nèi),顯得非常的協(xié)調(diào),但是應(yīng)用場(chǎng)景也是比較局限,一般出現(xiàn)在這種有視頻框的情況下
(2)不同的場(chǎng)景下應(yīng)該用什么提示方法
我們已經(jīng)知道了有哪些需要設(shè)計(jì)的網(wǎng)絡(luò)場(chǎng)景了,我們還知道有哪些常見的提示方式,接下來(lái)就是最重要的一步了,我們需要將場(chǎng)景與相應(yīng)的提示方式結(jié)合起來(lái),給出一個(gè)最佳的設(shè)計(jì)方案。
首先是第一個(gè)場(chǎng)景,我們需要在兩個(gè)時(shí)間點(diǎn)去提示用戶,這兩個(gè)時(shí)間點(diǎn)的提示方式是一樣的,使用Dialog是最適合的,提示內(nèi)容也完全一樣,也就是說(shuō)彈窗是完全一樣的,確保用戶知道目前自己手機(jī)的網(wǎng)絡(luò)環(huán)境是什么,避免用戶的流量遭到損失。
除了用Dialog提示用戶,我們能做的事情還有在設(shè)置里增加一個(gè)開關(guān),允許應(yīng)用在沒有WiFi的時(shí)候也可以執(zhí)行比較消耗流量的操作而不用每次都提示用戶,這樣的設(shè)置對(duì)于我這種每天流量都用不完的用戶來(lái)說(shuō),體驗(yàn)會(huì)更好,我就是喜歡用流量聽,每次對(duì)我提示是一種對(duì)我的騷擾。
在第一個(gè)場(chǎng)景中,這種消耗流量的操作都可以用Dialog來(lái)提示用戶。但是,如果是看視頻這種操作的話,使用視頻框內(nèi)提示用戶的方式可能會(huì)更好,完美的與背景融為了一體,大家可以再看下之前給出的圖片。
然后是第二個(gè)場(chǎng)景,第二個(gè)場(chǎng)景的設(shè)計(jì)才是重頭戲,斷網(wǎng)場(chǎng)景下我們也要在兩個(gè)時(shí)間點(diǎn)去提示用戶,先說(shuō)進(jìn)入新頁(yè)面的時(shí)候,在進(jìn)入新頁(yè)面的時(shí)候如何提示用戶是個(gè)比較復(fù)雜的設(shè)計(jì),面對(duì)的情況不同,我們采取的提示策略也不同,大家看下我梳理的示意圖:
我來(lái)給大家解釋一下圖中的幾個(gè)詞語(yǔ):
(1)緩存
緩存就是將服務(wù)器的數(shù)據(jù),存到手機(jī)本地,我們的應(yīng)用中所有的頁(yè)面都會(huì)分為需要緩存數(shù)據(jù)的頁(yè)面和不需要緩存數(shù)據(jù)的頁(yè)面,至于哪些頁(yè)面需要緩存,以及怎么緩存,這些所有緩存相關(guān)的事情其實(shí)都是架構(gòu)師來(lái)設(shè)計(jì)的,我在這里只能簡(jiǎn)單的給大家介紹一下,很多時(shí)候用戶向服務(wù)器請(qǐng)求的資源都是相同的。
比如說(shuō)你登錄了知乎,直接到了知乎首頁(yè),應(yīng)用第一次向服務(wù)器請(qǐng)求數(shù)據(jù),你等待了一會(huì),頁(yè)面加載好了,這時(shí)你突然看到有消息提示,于是轉(zhuǎn)入了消息頁(yè),當(dāng)你很快把消息看完后,你又回到首頁(yè)去看內(nèi)容,這是第二次進(jìn)入首頁(yè)了,這次就不用再請(qǐng)求數(shù)據(jù)了,頁(yè)面加載的非??欤銢]有感覺到任何加載的痕跡,這就是因?yàn)槭醉?yè)使用了緩存,頁(yè)面加了緩存有哪些好處呢?我們把這些用戶經(jīng)常請(qǐng)求的資源緩存下來(lái)可以減輕服務(wù)器的壓力,同時(shí)也可以加快用戶訪問(wèn)相同資源的速度,緩存在本地后,用戶再次請(qǐng)求,速度將會(huì)非???,一般來(lái)說(shuō)應(yīng)用中的幾個(gè)主要的tab頁(yè)都是需要緩存的,如果不緩存數(shù)據(jù)的話,大家想想看,每次你在幾個(gè)tab頁(yè)中切換的時(shí)候都要去服務(wù)器請(qǐng)求資源,都要等,是不是很讓人崩潰呢?
(2)緩存過(guò)期
剛才我們說(shuō)了,當(dāng)你很快地看完消息回到首頁(yè)時(shí),首頁(yè)的內(nèi)容使用的是緩存的數(shù)據(jù);但是,如果你一個(gè)消息看了2個(gè)小時(shí),再回到首頁(yè),首頁(yè)要不要重新向服務(wù)器獲取數(shù)據(jù)呢?或者說(shuō),你在首頁(yè)和消息頁(yè)之間頻繁切換,到你第多少次進(jìn)入首頁(yè)時(shí),首頁(yè)需要再次向服務(wù)器請(qǐng)求數(shù)據(jù)。短時(shí)間內(nèi)首頁(yè)和服務(wù)器的數(shù)據(jù)肯定是同步的,但是時(shí)間長(zhǎng)了首頁(yè)和服務(wù)器的數(shù)據(jù)就不一致了。所以,我們肯定需要再次向服務(wù)器請(qǐng)求數(shù)據(jù),而不能一直使用緩存。這個(gè)時(shí)候我們就需要給我們的內(nèi)容設(shè)定一個(gè)緩存過(guò)期時(shí)間,這個(gè)時(shí)間隨著你的應(yīng)用的內(nèi)容不同而不同(當(dāng)然了,這個(gè)不用你操心,你只需要知道什么是緩存過(guò)期時(shí)間即可。)這樣當(dāng)我們?cè)俅芜M(jìn)入首頁(yè)時(shí)就檢查一下緩存過(guò)期時(shí)間,如果緩存沒過(guò)期我們就用原來(lái)的數(shù)據(jù),如果緩存過(guò)期了,我們就再次向服務(wù)器發(fā)送請(qǐng)求。
(3)頁(yè)面框架是什么
很多文章中將這種頁(yè)面框架也作為一種提示方式來(lái)介紹,實(shí)際上之所以你能看到這種頁(yè)面框架,是跟程序員用哪種方式來(lái)開發(fā)頁(yè)面有關(guān)的,這不是你能設(shè)計(jì)的。有些應(yīng)用中的部分頁(yè)面會(huì)使用這種方式來(lái)構(gòu)建頁(yè)面,比如京東和淘寶,在沒有任何數(shù)據(jù)的情況下進(jìn)入首頁(yè),就會(huì)看到這種頁(yè)面框架,但不是應(yīng)用中每一個(gè)頁(yè)面都有框架的,具體使用哪種方式來(lái)構(gòu)建頁(yè)面,要結(jié)合頁(yè)面呈現(xiàn)的內(nèi)容來(lái)設(shè)計(jì),所以頁(yè)面框架不能算作是一種提示方式,但是,我們?cè)跀嗑W(wǎng)時(shí)提示用戶的時(shí)候要考慮到帶有頁(yè)面框架的這種頁(yè)面應(yīng)該如何去設(shè)計(jì)。
幾個(gè)關(guān)鍵詞跟大家解釋完了,接下來(lái)帶著大家過(guò)一下這個(gè)圖:
①首先,我們說(shuō)了應(yīng)用中的頁(yè)面分為需要帶緩存的和不需要帶緩存的。需要帶緩存的頁(yè)面在應(yīng)用剛打開第一次進(jìn)入的時(shí)候還沒有緩存到數(shù)據(jù),此時(shí)斷網(wǎng)了,如果頁(yè)面本身的構(gòu)建方式是頁(yè)面框架這種,那么我們就在頁(yè)面上顯示頁(yè)面框架;又因?yàn)轫?yè)面中有內(nèi)容顯示(頁(yè)面框架),所以我們就用Snackbar提示用戶。如果頁(yè)面沒有頁(yè)面框架,此時(shí)頁(yè)面是空的,我們就直接用頁(yè)面提示的方式。
②當(dāng)我們?cè)俅芜M(jìn)入一個(gè)需要緩存的頁(yè)面,此時(shí)斷網(wǎng)了,頁(yè)面中有了緩存好的數(shù)據(jù),但是要判斷緩存的數(shù)據(jù)是否過(guò)期,這時(shí)不管過(guò)期不過(guò)期,頁(yè)面中都會(huì)顯示之前緩存好的數(shù)據(jù);區(qū)別在于如果數(shù)據(jù)沒過(guò)期,這時(shí)即使斷網(wǎng)了,我們也不用提示用戶;如果數(shù)據(jù)過(guò)期了,我們需要再次向服務(wù)器請(qǐng)求數(shù)據(jù),但是又沒網(wǎng),所以我們只能用Snackbar的方式提示用戶。
③如果我們進(jìn)入的頁(yè)面是不需要緩存的頁(yè)面,那么不管何時(shí)進(jìn)入,只要是沒有網(wǎng)絡(luò)一律用頁(yè)面提示的方式去提示用戶。
第二個(gè)場(chǎng)景的第一種情況進(jìn)入頁(yè)面時(shí)提示用戶講完了。
接下來(lái)看第二種情況,用戶在斷網(wǎng)時(shí)執(zhí)行頁(yè)面內(nèi)向服務(wù)器請(qǐng)求數(shù)據(jù)的操作,比如下拉刷新,上拉加載,修改資料,登陸注冊(cè)等等,這些頁(yè)面內(nèi)的操作在斷網(wǎng)時(shí)的提示方式都是一樣的。因?yàn)榇藭r(shí)頁(yè)面內(nèi)有數(shù)據(jù),所以我們只能用Snackbar的方式,或者你也可以用能點(diǎn)擊的List,和Snackbar的區(qū)別不大。
上面圖片中的這些應(yīng)用在這種情況下全部使用了Toast提示,按照我的意思就是都需要改進(jìn),改成Snackbar的方式。
小結(jié):
我們需要注意的是這兩種場(chǎng)景是會(huì)重疊的,比如說(shuō)我要在線看電影,當(dāng)我點(diǎn)擊播放鍵,如果是斷網(wǎng)就要按照斷網(wǎng)的方式Snackbar來(lái)提示用戶,如果沒斷網(wǎng),就要使用Dialog來(lái)提示用戶避免消耗流量,我們只有將這些場(chǎng)景分清楚,才能做出好的設(shè)計(jì)
總結(jié)
本文一共將網(wǎng)絡(luò)相關(guān)設(shè)計(jì)分為了兩個(gè)場(chǎng)景,每個(gè)場(chǎng)景需要在兩個(gè)時(shí)間點(diǎn)去提示用戶,在不同的時(shí)間點(diǎn)提示用戶時(shí),本文給出了推薦的設(shè)計(jì)方案
本文由 @一點(diǎn)優(yōu)秀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
太細(xì)節(jié)了,大佬!??!怎么還不更新
你是我最喜歡的作者,目前沒有之一!
樓主寫的文章,一般都是先大綱后細(xì)述,這種表達(dá)個(gè)人感受很贊,不經(jīng)學(xué)習(xí)了文章內(nèi)容還掌握后續(xù)寫文章方法 ??
snackbar是谷歌設(shè)計(jì)規(guī)范里的,那IOS呢
ios里面沒有固定組件,但是可以讓開發(fā)做
沒有看到關(guān)于弱網(wǎng)的總結(jié)呢???
這才是干貨!NB的產(chǎn)品大神!
總結(jié)的非常好,學(xué)習(xí)了
北京的朋友們有沒有內(nèi)推的機(jī)會(huì)啊 ??
你是在找工作嗎?來(lái)我們公司試試吧
你好加下我的qq聊一下可以嗎,1024701524
在線等,急 ?
兩年后我終于看到了你的回復(fù)
這是一條有故事的評(píng)論^^
?
總結(jié)的很全面,尤其是對(duì)于提高C類產(chǎn)品的體驗(yàn)度和設(shè)計(jì)完整度有很大的幫助……
沙發(fā)給你~
那我當(dāng)仁不讓了…… ??