輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)系統(tǒng)之網(wǎng)絡(luò)非常類

2017/12/7 9:32:03來源：互聯(lián)網(wǎng)

echo：從用戶使用情況來說，使用App過程中，任何操作都可能出現(xiàn)網(wǎng)絡(luò)非常的情況。那么，針對網(wǎng)絡(luò)非常情況一共有哪幾種設(shè)計呢？哪些情況使用全局組件，哪些情況使用局部組件呢？本文作者就按照三種網(wǎng)絡(luò)情況，總結(jié)了對應(yīng)設(shè)計情勢。

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

本篇文章，按照三種網(wǎng)絡(luò)情況，總結(jié)對應(yīng)設(shè)計情勢。

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

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

一. 網(wǎng)絡(luò)切換

定義：

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

使用場景：

當(dāng)網(wǎng)絡(luò)狀況從Wifi切換到3G/4G時，為了防止用戶操作大量流量，App會采用肯定的設(shè)計情勢來告訴用戶，網(wǎng)絡(luò)狀況切換了，請警惕，防止用戶虛耗流量。當(dāng)然從非Wifi狀況下開啟消費大量流量操作時，也會使用警示框、界面內(nèi)嵌設(shè)計情勢，但這不在今天討論網(wǎng)絡(luò)切換范圍之內(nèi)。

常用的設(shè)計情勢：

1. 警示框

阻斷式操作，告知用戶當(dāng)前網(wǎng)絡(luò)情況，繼承使用的話會虛耗大量流量。用戶點擊警示框上的操作才可以繼承使用。

（1）定義

警告框傳達(dá)應(yīng)用或設(shè)備某種狀況的緊張信息，并且常常必要用戶來進(jìn)行操作。

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

（2）建議

必須包含題目，偶然候會包含正文文本。
包含一個或多個按鈕。

2. 界面內(nèi)嵌

將必要消費的移動數(shù)據(jù)提醒內(nèi)嵌到視頻、直播界面里面，給予用戶提醒。如許的益處是非強(qiáng)阻斷式，在告知用戶的同時還說明消費的流量數(shù)據(jù)。

（1）定義

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

（2）建議

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

二. 斷網(wǎng)情況

定義：

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

使用場景：

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

常用的設(shè)計情勢：

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

1. Tips提醒

（1）定義

一樣平常出如今首頁導(dǎo)航欄或搜索欄之下。通過Tips提醒告知用戶網(wǎng)絡(luò)非常。

（2）情勢

有的Tips一向存在；
有的Tips出現(xiàn)1-2s后消散，用戶操作后再次出現(xiàn)；
有的Tips點擊會跳轉(zhuǎn)到體系網(wǎng)絡(luò)設(shè)置界面。

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

2. 警示框

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

（1）定義

（2）建議

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

3. 界面內(nèi)嵌

當(dāng)整個網(wǎng)頁內(nèi)容都由于網(wǎng)絡(luò)非常導(dǎo)致未加載成功，采用界面內(nèi)嵌的提醒體例。

相對于整頁提醒的好處在于保留了界面的大致結(jié)構(gòu)。

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

4. 占位符

（1）定義

當(dāng)因為網(wǎng)絡(luò)旌旗燈號不好或網(wǎng)絡(luò)停止等緣故原由引起網(wǎng)頁數(shù)據(jù)無法調(diào)取狀況時，我們可以事先在App預(yù)設(shè)好圖標(biāo)或者占位符來代替加載的筆墨、數(shù)字、圖片等數(shù)據(jù)。

（2）用途