中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

從用戶使用情況來(lái)說(shuō)，在用戶在使用APP過(guò)程中，任何操作都可能出現(xiàn)網(wǎng)絡(luò)異常的情況。那么，針對(duì)網(wǎng)絡(luò)異常情況一共有哪幾種設(shè)計(jì)呢？哪些情況使用全局組件，哪些情況使用局部組件呢？本文作者就按照三種網(wǎng)絡(luò)情況，總結(jié)了對(duì)應(yīng)設(shè)計(jì)形式。

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

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

1. 網(wǎng)絡(luò)切換：警示框、界面內(nèi)嵌
2. 斷網(wǎng)情況：整頁(yè)提示、占位符、toast提示、警示框提示、界面內(nèi)嵌、tips提示
3. 弱網(wǎng)情況：整頁(yè)提示、占位符、界面內(nèi)嵌、tips提示

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

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

定義

一些需要消耗大量流量的APP的操作，例如開(kāi)啟視頻、直播、音樂(lè)等，為保證l同時(shí)節(jié)省用戶流量會(huì)給予用戶友好的提示

使用場(chǎng)景

當(dāng)網(wǎng)絡(luò)狀態(tài)從WIFI切換到3G/4G時(shí)，為了防止用戶操作大量流量，APP會(huì)采用一定的設(shè)計(jì)形式來(lái)告訴用戶，網(wǎng)絡(luò)狀態(tài)切換了，請(qǐng)小心，防止用戶浪費(fèi)流量（土豪除外）。當(dāng)然從非WIFI狀態(tài)下開(kāi)啟消耗大量流量操作時(shí)，也會(huì)使用警示框、界面內(nèi)嵌設(shè)計(jì)形式，但這不在今天討論網(wǎng)絡(luò)切換范圍之內(nèi)。

常用的設(shè)計(jì)形式

1. 警示框

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

（1）定義

警告框傳達(dá)應(yīng)用或設(shè)備某種狀態(tài)的重要信息，并且常常需要用戶來(lái)進(jìn)行操作。

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

（2）建議

1. 必須包含標(biāo)題，有時(shí)候會(huì)包含正文文本
2. 包含一個(gè)或多個(gè)按鈕

2. 界面內(nèi)嵌

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

（1）定義

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

（2）建議

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

斷網(wǎng)情況

定義

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

使用場(chǎng)景

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

常用的設(shè)計(jì)形式

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

1. Tips提示

（1）定義

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

（2）形式

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

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

2. 警示框

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

（1）定義

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

（2）建議

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

3. 界面內(nèi)嵌

當(dāng)整個(gè)頁(yè)面內(nèi)容都因?yàn)榫W(wǎng)絡(luò)異常導(dǎo)致未加載成功，采用界面內(nèi)嵌的提示的方式。

相對(duì)于整頁(yè)提示的優(yōu)點(diǎn)在于保留了界面的大致結(jié)構(gòu)。

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

4. 占位符

（1）定義

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

（2）用途

1. 告知用戶此處有內(nèi)容，只是還沒(méi)有加載出來(lái)
2. 占位符可以從樣式上看出界面布局大概是那些內(nèi)容

5. Toast提示

（1）使用場(chǎng)景

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

6. 整頁(yè)提示

（1）定義

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

（2）用途

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

（3）建議

• 當(dāng)前場(chǎng)景相關(guān)的插畫(huà)/圖片
• 當(dāng)前場(chǎng)景解說(shuō)文案
• 當(dāng)前場(chǎng)景的操作引導(dǎo)

弱網(wǎng)情況

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

相關(guān)閱讀

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：導(dǎo)航類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：引導(dǎo)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：加載類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：空數(shù)據(jù)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：提示類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：操作類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：?jiǎn)卧丶?/a>