App網路相關設計總結

網路相關設計是什麼？如何設計？本文作者將從自身角度一一為你解答，enjoy~

老規矩，先上圖：

一. 網路相關設計簡介

很多文章和視訊裡都說我們需要針對網路異常情況做一個設計。沒錯，可是網路異常設計包含哪些內容呢？文章中會說有：

1. 4G下執行看視訊，下載等
2. WiFi下看視訊突然切換到4G
3. 斷網
4. 弱網

看到這裡是不是覺得哪裡不對勁呢，如果說3和4屬於網路異常情況，可是1和2屬於使用者的正常操作啊，將其歸結為網路異常的話似乎有些不合理，所以我更傾向於將這些所謂的網路異常設計統一稱呼為網路相關設計。

二. 如何設計

1. 確定需要設計的與網路有關的場景與提示時機

（1）兩個場景

• 應用內是否有非常消耗流量的場景，比如下載、線上看電影、看直播、看視訊、聽歌等；
• 斷網場景。

一共有兩個場景需要我們去提示使用者，第一個場景屬於有些應用中有有些應用中沒有，而第二個場景是所有應用中都需要考慮到的，另外在文章一開始提到了弱網場景，有些文章中提到需要設計弱網場景，但是至少我看到過的所有應用中都沒有專門針對弱網做設計，有些人認為應用中提示“您的網路狀況差”就是針對弱網做的設計，但是實際上當你的應用斷網了，應用也是這麼提示的。

（2）提示時機

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

①使用者在4G網路下觸發了需要消耗大流量操作的時候

②使用者正在WiFi狀態下使用消耗大流量的功能並需要切換回4G網路時

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

①使用者進入新頁面時

②使用者在頁面內傳送各種請求到伺服器時

2、提示使用者

（1）常見的提示方式

①Toast

Toast提示就是介面中彈出一個文字提示短語，過一會自動消失，使用者無法點選，在頁面中有資料的情況下，很多應用都使用這種提示方式。

②頁面提示

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

③Snackbar

Snackbar也是這樣的一個文字提示短語，Snackbar和Toast的區別在於Snackbar不光能提示使用者，使用者還可以通過點選Snackbar來進行網路設定，所以Snackbar的體驗比起Toast來說會更好，所以在相同的情況下，最好使用Snackbar來代替Toast。

④Tips/List

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

⑤Dialog

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

⑥視訊框內提示

這種提示方式鑲嵌在視訊框內，顯得非常的協調，但是應用場景也是比較侷限，一般出現在這種有視訊框的情況下

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

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

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

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

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

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

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

（1）快取

快取就是將伺服器的資料，存到手機本地，我們的應用中所有的頁面都會分為需要快取資料的頁面和不需要快取資料的頁面，至於哪些頁面需要快取，以及怎麼快取，這些所有快取相關的事情其實都是架構師來設計的，我在這裡只能簡單的給大家介紹一下，很多時候使用者向伺服器請求的資源都是相同的。

比如說你登入了知乎，直接到了知乎首頁，應用第一次向伺服器請求資料，你等待了一會，頁面載入好了，這時你突然看到有訊息提示，於是轉入了訊息頁，當你很快把訊息看完後，你又回到首頁去看內容，這是第二次進入首頁了，這次就不用再請求資料了，頁面載入的非常快，你沒有感覺到任何載入的痕跡，這就是因為首頁使用了快取，頁面加了快取有哪些好處呢？我們把這些使用者經常請求的資源快取下來可以減輕伺服器的壓力，同時也可以加快使用者訪問相同資源的速度，快取在本地後，使用者再次請求，速度將會非常快，一般來說應用中的幾個主要的tab頁都是需要快取的，如果不快取資料的話，大家想想看，每次你在幾個tab頁中切換的時候都要去伺服器請求資源，都要等，是不是很讓人崩潰呢？

（2）快取過期

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

（3）頁面框架是什麼

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

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

①首先，我們說了應用中的頁面分為需要帶快取的和不需要帶快取的。需要帶快取的頁面在應用剛開啟第一次進入的時候還沒有快取到資料，此時斷網了，如果頁面本身的構建方式是頁面框架這種，那麼我們就在頁面上顯示頁面框架；又因為頁面中有內容顯示（頁面框架），所以我們就用Snackbar提示使用者。如果頁面沒有頁面框架，此時頁面是空的，我們就直接用頁面提示的方式。

②當我們再次進入一個需要快取的頁面，此時斷網了，頁面中有了快取好的資料，但是要判斷快取的資料是否過期，這時不管過期不過期，頁面中都會顯示之前快取好的資料；區別在於如果資料沒過期，這時即使斷網了，我們也不用提示使用者；如果資料過期了，我們需要再次向伺服器請求資料，但是又沒網，所以我們只能用Snackbar的方式提示使用者。

③如果我們進入的頁面是不需要快取的頁面，那麼不管何時進入，只要是沒有網路一律用頁面提示的方式去提示使用者。

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

接下來看第二種情況，使用者在斷網時執行頁面內向伺服器請求資料的操作，比如下拉重新整理，上拉載入，修改資料，登陸註冊等等，這些頁面內的操作在斷網時的提示方式都是一樣的。因為此時頁面內有資料，所以我們只能用Snackbar的方式，或者你也可以用能點選的List，和Snackbar的區別不大。

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

小結：

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

總結

本文一共將網路相關設計分為了兩個場景，每個場景需要在兩個時間點去提示使用者，在不同的時間點提示使用者時，本文給出了推薦的設計方案