網路切換

定義

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

使用場景

當網路狀態從WIFI切換到3G/4G時，為了防止用戶操作大量流量，APP會採用一定的設計形式來告訴用戶，網路狀態切換了，請小心，防止用戶浪費流量（土豪除外）。當然從非WIFI狀態下開啟消耗大量流量操作時，也會使用警示框、界面內嵌設計形式，但這不在今天討論網路切換範圍之內。

常用的設計形式

1. 警示框

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

（1）定義

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

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

（2）建議

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

2. 界面內嵌

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

（1）定義

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

（2）建議

1. 文案簡潔，易懂
2. 內嵌文案應該放在界面用戶關注的布局界面中

斷網情況

定義

移動設備沒有網路數據，導致無法上傳和下載數據，從而無法正常的使用產品。

使用場景

用戶在使用APP的時候，進行操作時，無法正常的使用產品。

常用的設計形式

• Tips提示
• 警示框提示
• 界面內嵌
• 佔位符
• toast提示
• 整頁提示

1. Tips提示

（1）定義

一般出現在首頁導航欄或搜索欄之下。通過tips提示告知用戶網路異常。

（2）形式

• 有的Tips一直存在；
• 有的Tips出現1-2s後消失，用戶操作後再次出現；
• 有的Tips點擊會跳轉到系統網路設置界面

例如，微信的Tips就是一直存在，點擊跳轉到提示的新界面。Instagtam出現1-2s後消失。

2. 警示框

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

（1）定義

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

（2）建議

1. 彈框按鈕提供前往設置的跳轉按鈕
2. 文案可清晰簡潔的提供解決方案

3. 界面內嵌

當整個頁面內容都因為網路異常導致未載入成功，採用界面內嵌的提示的方式。

相對於整頁提示的優點在於保留了界面的大致結構。

界面內嵌的設計樣式包括：網路異常提示文案、重新連接網路的button（非必需）。

4. 佔位符

（1）定義

當由於網路信號不好或網路中斷等原因引起頁面數據無法調取狀態時，我們可以事先在App預設好圖標或者佔位符來代替載入的文字、數字、圖片等數據。

（2）用途

1. 告知用戶此處有內容，只是還沒有載入出來
2. 佔位符可以從樣式上看出界面布局大概是那些內容

5. Toast提示

（1）使用場景

當網路中斷時，用戶點擊界面進行操作時，出現Toast響應。t提示用戶網路異常。讓用戶的行為即使在網路異常時得到反饋。

6. 整頁提示

（1）定義

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

（2）用途

使用過程中網路突然中斷無法正常靜載時給出的提示。

（3）建議

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

弱網情況

弱網情況和斷網情況的場景基本一致，常見的有：整頁提示、佔位符、界面內嵌、tips提示，故不做討論介紹。

推薦閱讀：