的網(wǎng)絡(luò)異常類從用戶的使用情況來看，在使用App的過程中，任何操作都可能出現(xiàn)網(wǎng)絡(luò)異常。那么，網(wǎng)絡(luò)異常有哪些設(shè)計？哪些條件使用全局組件并使用本地組件？作者根據(jù)三種網(wǎng)絡(luò)條件總結(jié)了相應(yīng)的設(shè)計形式。

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

在本文中，根據(jù)三個網(wǎng)絡(luò)條件總結(jié)了相應(yīng)的設(shè)計形式。

網(wǎng)絡(luò)切換：警告框，界面嵌入。

網(wǎng)絡(luò)狀況不佳：整頁提示，占位符，Toast提示，警告框提示，界面嵌入，提示提示。

網(wǎng)絡(luò)條件較弱：整頁提示，占位符，界面嵌入，提示提示。

還附上了腦圖，組件控件分類（如果你只是通過組件控件，很難滿足功能劃分的需要，所以我會擴(kuò)展這個范圍，分類不僅包含組件和控件，所以請不要關(guān)心細(xì)節(jié)。）

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

定義：

某些需要大量流量的操作（例如啟用視頻，直播，音樂等）會為用戶提供友好提醒，以確保用戶流量也得到保存。

使用場景：

當(dāng)網(wǎng)絡(luò)狀態(tài)從Wifi切換到3G/4G時，為了防止用戶操作大量流量，應(yīng)用程序?qū)⑹褂媚撤N設(shè)計形式告訴用戶網(wǎng)絡(luò)狀態(tài)已被切換。請小心防止用戶浪費流量。當(dāng)然，當(dāng)從非Wifi狀態(tài)開始大量業(yè)務(wù)操作時，也使用警告幀和內(nèi)聯(lián)設(shè)計形式，但這不在當(dāng)今網(wǎng)絡(luò)切換的范圍內(nèi)。

常用的設(shè)計形式：

1.警告框

阻止操作，告訴用戶當(dāng)前的網(wǎng)絡(luò)狀況，并繼續(xù)使用將浪費大量的流量。用戶單擊警報框上的操作以繼續(xù)使用它。

（1）定義

警告框傳達(dá)有關(guān)應(yīng)用程序或設(shè)備狀態(tài)的重要信息，并且通常需要用戶進(jìn)行操作。

在規(guī)范中，警告框中包含的元素指定如下：標(biāo)題（必填），描述信息（可選），輸入框（可選），按鈕（必填）。同時，警示框的樣式是圓形白色框架，具有遮罩效果，無法更改。

（2）建議

必須包含標(biāo)題，有時還包含正文。

包含一個或多個按鈕。

2.內(nèi)聯(lián)接口

需要消費的移動數(shù)據(jù)提示嵌入在視頻和實時界面中，并提示用戶。這樣做的好處是它不會被強(qiáng)烈阻止，并且還會通知用戶所消耗的流量數(shù)據(jù)。

（1）定義

介紹副本嵌入在界面中以實現(xiàn)通知用戶的目的。接口嵌入的好處是減少接口級干擾，并允許用戶獲得更集中的信息。

（2）建議

副本簡單易懂。

嵌入式副本應(yīng)放在接口用戶關(guān)注的布局界面中。

2.網(wǎng)絡(luò)斷開

定義：

移動設(shè)備沒有網(wǎng)絡(luò)數(shù)據(jù)，這使得無法上傳和下載數(shù)據(jù)，因此產(chǎn)品無法正常使用。

使用場景：

當(dāng)用戶使用App時，產(chǎn)品無法正常使用。

常用的設(shè)計形式：

提示提示

警報框提示

界面內(nèi)聯(lián)

占位符

吐司提示

整頁提示

1.提示提示

（1）定義

通常出現(xiàn)在主頁導(dǎo)航欄或搜索欄中。通過提示提示告訴用戶網(wǎng)絡(luò)異常。

（2）表格

一些提示總是存在;

一些提示在1-2秒后消失，并在用戶操作后再次出現(xiàn);

一些提示點擊將跳轉(zhuǎn)到系統(tǒng)網(wǎng)絡(luò)設(shè)置界面。

例如，微信提示始終存在，點擊跳轉(zhuǎn)到提示的新界面。 Inststam在1-2s后消失。

2.警告框

阻止操作，告訴用戶如何獲得正常使用的提示。

（1）定義

在規(guī)范中，警告框中包含的元素指定如下：標(biāo)題（必填），描述信息（可選），輸入框（可選），按鈕（必填）。同時，警示框的樣式是圓形白色框架，具有遮罩效果，無法更改。

（2）建議

捕捉按鈕提供設(shè)置的跳轉(zhuǎn)按鈕。

該副本可以提供清晰簡潔的解決方案。

3.內(nèi)聯(lián)接口

當(dāng)由于網(wǎng)絡(luò)異常而未成功加載整個頁面內(nèi)容時，將使用嵌入在界面中的提示。

整頁提示的優(yōu)點是保留了接口的一般結(jié)構(gòu)。

界面中嵌入的設(shè)計風(fēng)格包括：網(wǎng)絡(luò)異常提示復(fù)制，以及重新連接網(wǎng)絡(luò)的按鈕（不是必需的）。

4.占位符

（1）定義

當(dāng)由于網(wǎng)絡(luò)信號不良或網(wǎng)絡(luò)中斷而無法檢索到頁面數(shù)據(jù)時，我們可以在應(yīng)用程序中預(yù)設(shè)圖標(biāo)或占位符，以替換加載的文本，數(shù)字，圖片和其他數(shù)據(jù)。

（2）使用

通知用戶此處有內(nèi)容，但尚未加載。

占位符可用于查看界面布局。

5.吐司小貼士

（1）使用場景

當(dāng)網(wǎng)絡(luò)中斷時，當(dāng)用戶點擊界面執(zhí)行操作時，會出現(xiàn)Toast響應(yīng)，提示用戶網(wǎng)絡(luò)異常。即使網(wǎng)絡(luò)異常，也要讓用戶的行為得到反饋。

6.整頁提示

（1）定義

整個頁面的設(shè)計異常包括三個部分：圖標(biāo)或插圖形式;網(wǎng)絡(luò)異常復(fù)制;重新連接按鈕以刷新網(wǎng)絡(luò)。

（2）使用

網(wǎng)絡(luò)突然中斷時給出的提示，在使用過程中無法正常靜態(tài)加載。

（3）建議

與當(dāng)前場景相關(guān)的插畫/圖片。

當(dāng)前場景說明了副本。

當(dāng)前場景的操作指南。

3.網(wǎng)絡(luò)狀況不佳

弱網(wǎng)絡(luò)的場景和網(wǎng)絡(luò)斷開的情況基本相同。常見的有：整頁提示，占位符，界面嵌入，提示提示，所以不討論。

« 雙十一手買和買？揭開天貓，京東和蘇寧的經(jīng)營慣例 | 關(guān)曉彤最喜歡的時尚單品，6GB + 128GB大容量華為nova3i待售，更有趣玩 »