的网络异常类从用户的使用情况来看，在使用App的过程中，任何操作都可能出现网络异常。那么，网络异常有哪些设计？哪些条件使用全局组件并使用本地组件？作者根据三种网络条件总结了相应的设计形式。

网络异常有三种情况：第一种是网络交换，Wifi网络环境切换到移动数据网络环境。第二是网络断线情况，根本没有网络。第三种是弱网络情况，2G/E时无法加载或上传。

在本文中，根据三个网络条件总结了相应的设计形式。

网络切换：警告框，界面嵌入。

网络状况不佳：整页提示，占位符，Toast提示，警告框提示，界面嵌入，提示提示。

网络条件较弱：整页提示，占位符，界面嵌入，提示提示。

还附上了脑图，组件控件分类（如果你只是通过组件控件，很难满足功能划分的需要，所以我会扩展这个范围，分类不仅包含组件和控件，所以请不要关心细节。）

1.网络切换

定义：

某些需要大量流量的操作（例如启用视频，直播，音乐等）会为用户提供友好提醒，以确保用户流量也得到保存。

使用场景：

当网络状态从Wifi切换到3G/4G时，为了防止用户操作大量流量，应用程序将使用某种设计形式告诉用户网络状态已被切换。请小心防止用户浪费流量。当然，当从非Wifi状态开始大量业务操作时，也使用警告帧和内联设计形式，但这不在当今网络切换的范围内。

常用的设计形式：

1.警告框

阻止操作，告诉用户当前的网络状况，并继续使用将浪费大量的流量。用户单击警报框上的操作以继续使用它。

（1）定义

警告框传达有关应用程序或设备状态的重要信息，并且通常需要用户进行操作。

在规范中，警告框中包含的元素指定如下：标题（必填），描述信息（可选），输入框（可选），按钮（必填）。同时，警示框的样式是圆形白色框架，具有遮罩效果，无法更改。

（2）建议

必须包含标题，有时还包含正文。

包含一个或多个按钮。

2.内联接口

需要消费的移动数据提示嵌入在视频和实时界面中，并提示用户。这样做的好处是它不会被强烈阻止，并且还会通知用户所消耗的流量数据。

（1）定义

介绍副本嵌入在界面中以实现通知用户的目的。接口嵌入的好处是减少接口级干扰，并允许用户获得更集中的信息。

（2）建议

副本简单易懂。

嵌入式副本应放在接口用户关注的布局界面中。

2.网络断开

定义：

移动设备没有网络数据，这使得无法上传和下载数据，因此产品无法正常使用。

使用场景：

当用户使用App时，产品无法正常使用。

常用的设计形式：

提示提示

警报框提示

界面内联

占位符

吐司提示

整页提示

1.提示提示

（1）定义

通常出现在主页导航栏或搜索栏中。通过提示提示告诉用户网络异常。

（2）表格

一些提示总是存在;

一些提示在1-2秒后消失，并在用户操作后再次出现;

一些提示点击将跳转到系统网络设置界面。

例如，微信提示始终存在，点击跳转到提示的新界面。 Inststam在1-2s后消失。

2.警告框

阻止操作，告诉用户如何获得正常使用的提示。

（1）定义

在规范中，警告框中包含的元素指定如下：标题（必填），描述信息（可选），输入框（可选），按钮（必填）。同时，警示框的样式是圆形白色框架，具有遮罩效果，无法更改。

（2）建议

捕捉按钮提供设置的跳转按钮。

该副本可以提供清晰简洁的解决方案。

3.内联接口

当由于网络异常而未成功加载整个页面内容时，将使用嵌入在界面中的提示。

整页提示的优点是保留了接口的一般结构。

界面中嵌入的设计风格包括：网络异常提示复制，以及重新连接网络的按钮（不是必需的）。

4.占位符

（1）定义

当由于网络信号不良或网络中断而无法检索到页面数据时，我们可以在应用程序中预设图标或占位符，以替换加载的文本，数字，图片和其他数据。

（2）使用

通知用户此处有内容，但尚未加载。

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

5.吐司小贴士

（1）使用场景

当网络中断时，当用户点击界面执行操作时，会出现Toast响应，提示用户网络异常。即使网络异常，也要让用户的行为得到反馈。

6.整页提示

（1）定义

整个页面的设计异常包括三个部分：图标或插图形式;网络异常复制;重新连接按钮以刷新网络。

（2）使用

网络突然中断时给出的提示，在使用过程中无法正常静态加载。

（3）建议

与当前场景相关的插画/图片。

当前场景说明了副本。

当前场景的操作指南。

3.网络状况不佳

弱网络的场景和网络断开的情况基本相同。常见的有：整页提示，占位符，界面嵌入，提示提示，所以不讨论。

« 双十一手买和买？揭开天猫，京东和苏宁的经营惯例 | 关晓彤最喜欢的时尚单品，6GB + 128GB大容量华为nova3i待售，更有趣玩 »