网络异常一般存在以下情况

• 网络未开启
• 网络中断（断网、调成飞行模式）
  网络未开启、中断一般采用网络异常（即网络不能用）的处理情况。
• 网络切换（流量 与 WiFi切换）
  1. 对于需使用大流量的APP，WiFi向流量切换时，则需弹框提醒用户，使用的流量改变了，使用户知悉此事，确定设置。
  2. 对于无需顾忌流量的APP，则直接过渡切换即可。
• 网速较慢
  网速较慢证明还有网，只是还未加载出来，所以是以加载中的处理方式。（另篇）

交互场景及处理方式

方式：

• toast
• dialog
• 头部提示框
• 整页异常界面
• 无数据的页面空白框架

场景：

• 有数据缓存时
  初始进入页面，有数据缓存可以展示缓存的数据列表信息。

（1）可以在头部展示网络连接中断/未开启。比如购物/新闻网站，微信列表等

（2）可以toast展示网络异常，提示用户知道网络异常即可，无需二次确认。

image.png

（3）以dialog形式展现，可以根据“设置”网络的入口，调整网络。此类型适合需要耗费大流量类的APP，比如音乐、视频类的。其他类型的APP，以目前手机的设计，很多通过上滑或下滑的方式可以调出工具栏，直接调整网络，所以不建议以此种方式提示用户二次操作。

image.png

（4）直接展示缓存的页面，例如淘宝，让用户感知不到网络出问题了，只有去加载一个新的页面后才会发现网络出现了问题。

• 无数据缓存时

（1）无数据化缓存，可以以图像占位符/预设图的形式展示整页或局部的框架，联网只获取到了框架。这种设计形式有一个最大的好处就是当网络中断时间很短时，用户几乎察觉不到网络中断，APP就已经恢复正常了。

image.png

（2）当整个页面内容都因为网络异常导致未加载成功，采用整页提示的方式。
可以用一个异常页面展示网络异常的情况，此时已经拿到某一个要请求接口的数据，比如URL、后台需要的相关字段，因此页面中可以设计点击屏幕/按钮来进行页面刷新，进行接口重调。

image.png

产品设计中，主要结合产品的需求及用户体验，来选择合适的方式。

本文参考借鉴参考 http://www.woshipm.com/pd/710387.html