網(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ō)有：

1. 4G下執(zhí)行看視頻，下載等
2. WiFi下看視頻突然切換到4G
3. 斷網(wǎng)
4. 弱網(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é)議