網(wǎng)絡(luò)相關(guān)設(shè)計是什么？如何設(shè)計？本文作者將從自身角度一一為你解答，enjoy~

老規(guī)矩，先上圖：

一. 網(wǎng)絡(luò)相關(guān)設(shè)計簡介

很多文章和視頻里都說我們需要針對網(wǎng)絡(luò)異常情況做一個設(shè)計。沒錯，可是網(wǎng)絡(luò)異常設(shè)計包含哪些內(nèi)容呢？文章中會說有：

1. 4G下執(zhí)行看視頻，下載等
2. WiFi下看視頻突然切換到4G
3. 斷網(wǎng)
4. 弱網(wǎng)

看到這里是不是覺得哪里不對勁呢，如果說3和4屬于網(wǎng)絡(luò)異常情況，可是1和2屬于用戶的正常操作啊，將其歸結(jié)為網(wǎng)絡(luò)異常的話似乎有些不合理，所以我更傾向于將這些所謂的網(wǎng)絡(luò)異常設(shè)計統(tǒng)一稱呼為網(wǎng)絡(luò)相關(guān)設(shè)計。

二. 如何設(shè)計

1. 確定需要設(shè)計的與網(wǎng)絡(luò)有關(guān)的場景與提示時機

（1）兩個場景

• 應(yīng)用內(nèi)是否有非常消耗流量的場景，比如下載、在線看電影、看直播、看視頻、聽歌等；
• 斷網(wǎng)場景。

一共有兩個場景需要我們?nèi)ヌ崾居脩簦谝粋€場景屬于有些應(yīng)用中有有些應(yīng)用中沒有，而第二個場景是所有應(yīng)用中都需要考慮到的，另外在文章一開始提到了弱網(wǎng)場景，有些文章中提到需要設(shè)計弱網(wǎng)場景，但是至少我看到過的所有應(yīng)用中都沒有專門針對弱網(wǎng)做設(shè)計，有些人認(rèn)為應(yīng)用中提示“您的網(wǎng)絡(luò)狀況差”就是針對弱網(wǎng)做的設(shè)計，但是實際上當(dāng)你的應(yīng)用斷網(wǎng)了，應(yīng)用也是這么提示的。

（2）提示時機

在第一個場景下，我們需要在兩個時間點去提示用戶：

①用戶在4G網(wǎng)絡(luò)下觸發(fā)了需要消耗大流量操作的時候

②用戶正在WiFi狀態(tài)下使用消耗大流量的功能并需要切換回4G網(wǎng)絡(luò)時

在第二個場景下，我們也有兩個時間點去提示：

①用戶進入新頁面時

②用戶在頁面內(nèi)發(fā)送各種請求到服務(wù)器時

2、提示用戶

（1）常見的提示方式

①Toast

Toast提示就是界面中彈出一個文字提示短語，過一會自動消失，用戶無法點擊，在頁面中有數(shù)據(jù)的情況下，很多應(yīng)用都使用這種提示方式。

②頁面提示

頁面提示就是這種整個頁面都用來提示用戶的方式，可以放一些圖片在頁面上分散用戶的注意力，使用頁面提示的方式，我們一定要記得給出用戶如何排查網(wǎng)絡(luò)故障的方案，而不是像上圖中的一樣只是提示用戶。

③Snackbar

Snackbar也是這樣的一個文字提示短語，Snackbar和Toast的區(qū)別在于Snackbar不光能提示用戶，用戶還可以通過點擊Snackbar來進行網(wǎng)絡(luò)設(shè)置，所以Snackbar的體驗比起Toast來說會更好，所以在相同的情況下，最好使用Snackbar來代替Toast。

④Tips/List

一些產(chǎn)品經(jīng)理喜歡將這種條狀的，列表樣式的提示方式稱呼為Tips或List，有的List是可以點擊的，基本和Snackbar一樣，有的List不能點擊和Toast有點像，一般適用于這種列表式的頁面，能很好的和背景融為一體。如果要使用List的話，記得要做成可以點擊的，給用戶提供解決方案。

⑤Dialog

Dialog就是我們平時說的彈窗，雖然不同的應(yīng)用內(nèi)彈窗長的不一樣，但是作用都是一樣的。Dialog的特點是可以為用戶提供操作選項，并且最重要的是會打斷用戶正在執(zhí)行的動作，用戶只有通過點擊才能取消Dialog，用戶不會錯過提示消息。

⑥視頻框內(nèi)提示

這種提示方式鑲嵌在視頻框內(nèi)，顯得非常的協(xié)調(diào)，但是應(yīng)用場景也是比較局限，一般出現(xiàn)在這種有視頻框的情況下

（2）不同的場景下應(yīng)該用什么提示方法

我們已經(jīng)知道了有哪些需要設(shè)計的網(wǎng)絡(luò)場景了，我們還知道有哪些常見的提示方式，接下來就是最重要的一步了，我們需要將場景與相應(yīng)的提示方式結(jié)合起來，給出一個最佳的設(shè)計方案。

首先是第一個場景，我們需要在兩個時間點去提示用戶，這兩個時間點的提示方式是一樣的，使用Dialog是最適合的，提示內(nèi)容也完全一樣，也就是說彈窗是完全一樣的，確保用戶知道目前自己手機的網(wǎng)絡(luò)環(huán)境是什么，避免用戶的流量遭到損失。

除了用Dialog提示用戶，我們能做的事情還有在設(shè)置里增加一個開關(guān)，允許應(yīng)用在沒有WiFi的時候也可以執(zhí)行比較消耗流量的操作而不用每次都提示用戶，這樣的設(shè)置對于我這種每天流量都用不完的用戶來說，體驗會更好，我就是喜歡用流量聽，每次對我提示是一種對我的騷擾。

在第一個場景中，這種消耗流量的操作都可以用Dialog來提示用戶。但是，如果是看視頻這種操作的話，使用視頻框內(nèi)提示用戶的方式可能會更好，完美的與背景融為了一體，大家可以再看下之前給出的圖片。

然后是第二個場景，第二個場景的設(shè)計才是重頭戲，斷網(wǎng)場景下我們也要在兩個時間點去提示用戶，先說進入新頁面的時候，在進入新頁面的時候如何提示用戶是個比較復(fù)雜的設(shè)計，面對的情況不同，我們采取的提示策略也不同，大家看下我梳理的示意圖：

我來給大家解釋一下圖中的幾個詞語：

（1）緩存

緩存就是將服務(wù)器的數(shù)據(jù)，存到手機本地，我們的應(yīng)用中所有的頁面都會分為需要緩存數(shù)據(jù)的頁面和不需要緩存數(shù)據(jù)的頁面，至于哪些頁面需要緩存，以及怎么緩存，這些所有緩存相關(guān)的事情其實都是架構(gòu)師來設(shè)計的，我在這里只能簡單的給大家介紹一下，很多時候用戶向服務(wù)器請求的資源都是相同的。

比如說你登錄了知乎，直接到了知乎首頁，應(yīng)用第一次向服務(wù)器請求數(shù)據(jù)，你等待了一會，頁面加載好了，這時你突然看到有消息提示，于是轉(zhuǎn)入了消息頁，當(dāng)你很快把消息看完后，你又回到首頁去看內(nèi)容，這是第二次進入首頁了，這次就不用再請求數(shù)據(jù)了，頁面加載的非?？欤銢]有感覺到任何加載的痕跡，這就是因為首頁使用了緩存，頁面加了緩存有哪些好處呢？我們把這些用戶經(jīng)常請求的資源緩存下來可以減輕服務(wù)器的壓力，同時也可以加快用戶訪問相同資源的速度，緩存在本地后，用戶再次請求，速度將會非?？?，一般來說應(yīng)用中的幾個主要的tab頁都是需要緩存的，如果不緩存數(shù)據(jù)的話，大家想想看，每次你在幾個tab頁中切換的時候都要去服務(wù)器請求資源，都要等，是不是很讓人崩潰呢？

（2）緩存過期

剛才我們說了，當(dāng)你很快地看完消息回到首頁時，首頁的內(nèi)容使用的是緩存的數(shù)據(jù)；但是，如果你一個消息看了2個小時，再回到首頁，首頁要不要重新向服務(wù)器獲取數(shù)據(jù)呢？或者說，你在首頁和消息頁之間頻繁切換，到你第多少次進入首頁時，首頁需要再次向服務(wù)器請求數(shù)據(jù)。短時間內(nèi)首頁和服務(wù)器的數(shù)據(jù)肯定是同步的，但是時間長了首頁和服務(wù)器的數(shù)據(jù)就不一致了。所以，我們肯定需要再次向服務(wù)器請求數(shù)據(jù)，而不能一直使用緩存。這個時候我們就需要給我們的內(nèi)容設(shè)定一個緩存過期時間，這個時間隨著你的應(yīng)用的內(nèi)容不同而不同（當(dāng)然了，這個不用你操心，你只需要知道什么是緩存過期時間即可。）這樣當(dāng)我們再次進入首頁時就檢查一下緩存過期時間，如果緩存沒過期我們就用原來的數(shù)據(jù)，如果緩存過期了，我們就再次向服務(wù)器發(fā)送請求。

（3）頁面框架是什么

很多文章中將這種頁面框架也作為一種提示方式來介紹，實際上之所以你能看到這種頁面框架，是跟程序員用哪種方式來開發(fā)頁面有關(guān)的，這不是你能設(shè)計的。有些應(yīng)用中的部分頁面會使用這種方式來構(gòu)建頁面，比如京東和淘寶，在沒有任何數(shù)據(jù)的情況下進入首頁，就會看到這種頁面框架，但不是應(yīng)用中每一個頁面都有框架的，具體使用哪種方式來構(gòu)建頁面，要結(jié)合頁面呈現(xiàn)的內(nèi)容來設(shè)計，所以頁面框架不能算作是一種提示方式，但是，我們在斷網(wǎng)時提示用戶的時候要考慮到帶有頁面框架的這種頁面應(yīng)該如何去設(shè)計。

幾個關(guān)鍵詞跟大家解釋完了，接下來帶著大家過一下這個圖：

①首先，我們說了應(yīng)用中的頁面分為需要帶緩存的和不需要帶緩存的。需要帶緩存的頁面在應(yīng)用剛打開第一次進入的時候還沒有緩存到數(shù)據(jù)，此時斷網(wǎng)了，如果頁面本身的構(gòu)建方式是頁面框架這種，那么我們就在頁面上顯示頁面框架；又因為頁面中有內(nèi)容顯示（頁面框架），所以我們就用Snackbar提示用戶。如果頁面沒有頁面框架，此時頁面是空的，我們就直接用頁面提示的方式。

②當(dāng)我們再次進入一個需要緩存的頁面，此時斷網(wǎng)了，頁面中有了緩存好的數(shù)據(jù)，但是要判斷緩存的數(shù)據(jù)是否過期，這時不管過期不過期，頁面中都會顯示之前緩存好的數(shù)據(jù)；區(qū)別在于如果數(shù)據(jù)沒過期，這時即使斷網(wǎng)了，我們也不用提示用戶；如果數(shù)據(jù)過期了，我們需要再次向服務(wù)器請求數(shù)據(jù)，但是又沒網(wǎng)，所以我們只能用Snackbar的方式提示用戶。

③如果我們進入的頁面是不需要緩存的頁面，那么不管何時進入，只要是沒有網(wǎng)絡(luò)一律用頁面提示的方式去提示用戶。

第二個場景的第一種情況進入頁面時提示用戶講完了。

接下來看第二種情況，用戶在斷網(wǎng)時執(zhí)行頁面內(nèi)向服務(wù)器請求數(shù)據(jù)的操作，比如下拉刷新，上拉加載，修改資料，登陸注冊等等，這些頁面內(nèi)的操作在斷網(wǎng)時的提示方式都是一樣的。因為此時頁面內(nèi)有數(shù)據(jù)，所以我們只能用Snackbar的方式，或者你也可以用能點擊的List，和Snackbar的區(qū)別不大。

上面圖片中的這些應(yīng)用在這種情況下全部使用了Toast提示，按照我的意思就是都需要改進，改成Snackbar的方式。

小結(jié)：

我們需要注意的是這兩種場景是會重疊的，比如說我要在線看電影，當(dāng)我點擊播放鍵，如果是斷網(wǎng)就要按照斷網(wǎng)的方式Snackbar來提示用戶，如果沒斷網(wǎng)，就要使用Dialog來提示用戶避免消耗流量，我們只有將這些場景分清楚，才能做出好的設(shè)計

總結(jié)

本文一共將網(wǎng)絡(luò)相關(guān)設(shè)計分為了兩個場景，每個場景需要在兩個時間點去提示用戶，在不同的時間點提示用戶時，本文給出了推薦的設(shè)計方案

本文由 @一點優(yōu)秀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議