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

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

一. 網(wǎng)絡相關設計簡介

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

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

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

二. 如何設計

1. 確定需要設計的與網(wǎng)絡有關的場景與提示時機

（1）兩個場景

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

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

（2）提示時機

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

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

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

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

①用戶進入新頁面時

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

2、提示用戶

（1）常見的提示方式

①Toast

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

②頁面提示

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

③Snackbar

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

④Tips/List

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

⑤Dialog

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

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

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

（2）不同的場景下應該用什么提示方法

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

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

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

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

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

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

（1）緩存

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

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

（2）緩存過期

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

（3）頁面框架是什么

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

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

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

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

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

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

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

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

小結：

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

總結

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

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

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