網(wǎng)絡異常類UI設計超實用的

網(wǎng)絡異常無非就3種情況：第一種是網(wǎng)絡切換，Wifi網(wǎng)絡環(huán)境切換到了移動數(shù)據(jù)網(wǎng)絡環(huán)境。第二種是斷網(wǎng)情況，完全沒有網(wǎng)絡。第三種是弱網(wǎng)情況，2G/E時無法加載或者上傳數(shù)據(jù)。

按照三種網(wǎng)絡情況，總結對應設計形式。

• 網(wǎng)絡切換：警示框、界面內(nèi)嵌。
• 斷網(wǎng)情況：整頁提示、占位符、Toast提示、警示框提示、界面內(nèi)嵌、Tips提示。
• 弱網(wǎng)情況：整頁提示、占位符、界面內(nèi)嵌、Tips提示。

依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細節(jié)。）

一. 網(wǎng)絡切換

定義：

一些需要消耗大量流量的App的操作，例如開啟視頻、直播、音樂等，為保證同時節(jié)省用戶流量會給予用戶友好的提示。

使用場景：

當網(wǎng)絡狀態(tài)從Wifi切換到3G/4G時，為了防止用戶操作大量流量，App會采用一定的設計形式來告訴用戶，網(wǎng)絡狀態(tài)切換了，請小心，防止用戶浪費流量。當然從非Wifi狀態(tài)下開啟消耗大量流量操作時，也會使用警示框、界面內(nèi)嵌設計形式，但這不在今天討論網(wǎng)絡切換范圍之內(nèi)。

常用的設計形式：

1. 警示框

阻斷式操作，告知用戶當前網(wǎng)絡情況，繼續(xù)使用的話會浪費大量流量。用戶點擊警示框上的操作才可以繼續(xù)使用。

（1）定義

警告框傳達應用或設備某種狀態(tài)的重要信息，并且常常需要用戶來進行操作。

規(guī)范中，對警告框包含的元素做出了如下規(guī)定：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。

（2）建議

• 必須包含標題，有時候會包含正文文本。
• 包含一個或多個按鈕。

2. 界面內(nèi)嵌

將需要消耗的移動數(shù)據(jù)提示內(nèi)嵌到視頻、直播界面里面，給予用戶提示。這樣的好處是非強阻斷式，在告知用戶的同時還說明消耗的流量數(shù)據(jù)。

（1）定義

將提示性文案內(nèi)嵌到界面中，以此達到告知用戶的目的。界面內(nèi)嵌的好處是減少界面層級干擾，讓用戶更專注的獲取信息。

（2）建議

• 文案簡潔，易懂。
• 內(nèi)嵌文案應該放在界面用戶關注的布局界面中。

二. 斷網(wǎng)情況

定義：

移動設備沒有網(wǎng)絡數(shù)據(jù)，導致無法上傳和下載數(shù)據(jù)，從而無法正常的使用產(chǎn)品。

使用場景：

用戶在使用App的時候，進行操作時，無法正常的使用產(chǎn)品。

常用的設計形式：

• Tips提示
• 警示框提示
• 界面內(nèi)嵌
• 占位符
• toast提示
• 整頁提示

1. Tips提示

（1）定義

一般出現(xiàn)在首頁導航欄或搜索欄之下。通過Tips提示告知用戶網(wǎng)絡異常。

（2）形式

• 有的Tips一直存在；
• 有的Tips出現(xiàn)1-2s后消失，用戶操作后再次出現(xiàn)；
• 有的Tips點擊會跳轉(zhuǎn)到系統(tǒng)網(wǎng)絡設置界面。

例如，微信的Tips就是一直存在，點擊跳轉(zhuǎn)到提示的新界面。Instagtam出現(xiàn)1-2s后消失。

2. 警示框

阻斷式操作，告知用戶如何通過操作獲得正常使用的提示。

（1）定義

規(guī)范中，對警告框包含的元素做出了如下規(guī)定：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。

（2）建議

• 彈框按鈕提供前往設置的跳轉(zhuǎn)按鈕。
• 文案可清晰簡潔的提供解決方案。

3. 界面內(nèi)嵌

當整個頁面內(nèi)容都因為網(wǎng)絡異常導致未加載成功，采用界面內(nèi)嵌的提示方式。

相對于整頁提示的優(yōu)點在于保留了界面的大致結構。

界面內(nèi)嵌的設計樣式包括：網(wǎng)絡異常提示文案、重新連接網(wǎng)絡的Button（非必需）。

4. 占位符

（1）定義

當由于網(wǎng)絡信號不好或網(wǎng)絡中斷等原因引起頁面數(shù)據(jù)無法調(diào)取狀態(tài)時，我們可以事先在App預設好圖標或者占位符來代替加載的文字、數(shù)字、圖片等數(shù)據(jù)。

（2）用途

• 告知用戶此處有內(nèi)容，只是還沒有加載出來。
• 占位符可以從樣式上看出界面布局大概是哪些內(nèi)容。

5. Toast提示

（1）使用場景

當網(wǎng)絡中斷時，用戶點擊界面進行操作時，出現(xiàn)Toast響應，提示用戶網(wǎng)絡異常。讓用戶的行為即使在網(wǎng)絡異常時得到反饋。

6. 整頁提示

（1）定義

整頁異常的設計樣式包括三部分：icon或者插畫形式；網(wǎng)絡異常文案；重新連接刷新網(wǎng)絡的button。

（2）用途

使用過程中網(wǎng)絡突然中斷無法正常靜載時給出的提示。

（3）建議

• 當前場景相關的插畫/圖片。
• 當前場景解說文案。
• 當前場景的操作引導。

三. 弱網(wǎng)情況

弱網(wǎng)情況和斷網(wǎng)情況的場景基本一致，常見的有：整頁提示、占位符、界面內(nèi)嵌、Tips提示，故不做討論介紹。