【设计精选】网络异常时，APP该如何设计？

用户在使用App时，除了正常的使用场景，还会碰到许多特殊场景：页面内容为空（缺省页面）；网络异常；信息输入错误；App升级等。如何友好的设计特殊场景下的App页面，对于用户体验至关重要。这也是互联网产品设计人员的基本功。

这些特殊情况下的APP设计我会陆续写文章介绍，今天先讲讲“网络异常时，APP该如何设计？”

网络异常有两种情况，一种是网络切换，即从WiFi状态切换到3G/4G网络；第二种是网络中断，APP与服务器的数据传输。

网络切换

一些需要消耗大量流量的APP，用户一般只会在WiFi的网络状态下运行（土豪用户除外），像视频APP，音乐APP，还有现在很火的直播APP。

当网络状态从WiFi切换到3G/4G时，为了防止用户消耗流量，APP会采取一定的设计形式来告诉用户，网络状态切换了，请小心。

QQ音乐&虾米音乐

QQ音乐、虾米音乐，不仅提示了用户的网络状态切换了，还告诉了用户这种情况下该怎么办，是继续用流量播放还是订购免流量包。

告诉用户发生了什么，遇到了什么问题，也给用户提供解决问题的办法和入口，这才是好的设计。

网络信号不好或网络中断

网络中断，APP无法与服务器交换数据。一般有三种设计形式处理网络中断问题。

>>>①整页提示

当由于网络信号不好或网络中断等原因引起页面数据无法调取状态时，页面做此处理。

闪电购&猫眼

整页异常的设计样式包括三部分：icon或者插画形式；网络异常文案；重新连接网络的button。

上面两图分别是闪电购和猫眼的整页异常设计，都采用了品牌形象的插画形式，不仅增添了趣味性还起到了宣传品牌形象的作品，可谓一举两得。闪电购在button下还增加了一个入口：搞不定网络，看看小贴士。因为有部分用户可能并不清楚当前的网络中断是由于什么引起的，尤其对于小白用户来说，添加一个下贴士的入口，帮助用户解决问题。所以从用户体验的角度来看，闪电狗比猫眼做的更用心。

>>>②预设图和占位符提示