关于网络异常的产品设计

在产品设计中，有些设计是必须要遇到的，比如APP的升级更新，程序异常，网络异常，登陆注册等。这些问题是逃不了的，那么针对网络异常应该怎么设计呢？
网络异常包含哪些方面的？一是网络切换；二是网络断开。
关于网络切换，一般的处理都是从wifi切换到运营商网络的时候，给用户一个提醒，常用的方式就是一个弹出框，然后在弹框中说明需要切换到运营商网络，让用户去选择是否切换，如果是土豪，毫不犹豫的选择继续，不然就乖乖的暂停啦。当然什么样的app需要给用户提示呢？当然消耗流量大的肯定是需要给用户这个提示，是的，你答对了，但是如果仅仅是想到这个地方的话，那是远远不够的。
我们想一个问题，是否是一旦wifi切换到运营商网络就提示呢？其实不是的，因为我们在看视频或者听音乐的时候，是有个预加载机制的，他可以缓存一些数据，如果还在播放缓存中的数据，那么它就不会提醒，只有你需要加载新的数据的时候，它才会提醒。那么为什么不能立刻提醒呢？一是因为你还没有用到运营商的流量，还没有必要去提示；另外是因为它有可能会还没有用到运营商流量之前又切回到了wifi，这样就避免了对用户的打扰。同时如果切换了运营商网络的话，则需要自动切换音质或者分辨率，为用户节省流浪。常用的提示方式：
QQ音乐的提示：

QQ截图20151127184643.jpg

其实到这里还没有结束，因为上述的提示和措施一般发生在2G或者3G的情况下，随着流量越来越多，4G的情况下一般就不做提示，或者仅仅就弹出一个toast而已。
那么针对这一点，有一个更聪明的做法，就是推广流量包，不仅仅给用了一个提示，还给用户提出一个解决的方案：
网易云音乐是怎么做的呢

QQ截图20151127185127.jpg

所以如果从用户交互友好性来说，除了能即使给出提示，还要想是用弹框提示好，还是用toast提示，提示之后，要不要给用户一个解决方案，通盘考虑之后在做决定。
除了网络切换，网络断开的异常会遇到的更多，是所有的app需要考虑的问题，那么网络断开的提示有几种呢？
第一个就是toast，直接弹出提示，3s随后就消失；弹出toast后不同的app做法不同，这个取决于APP的做法：
如果你是H5网页的做法，那么弹出toast后，整个页面就是空白的，是没办法进行操作的，如下图所示：
楚楚街怎么处理呢？

1.png
美的商城的做法：
2.png
它们都是H5页面完成的，所以没办法进行数据展示，第一张比较好的是如果网络设置OK，用户可以很明确的点击重新加载刷新；而第二个就会让用户有一些迷茫，即使用户下拉可以重新进行刷新，但是这个行为是用户的无意为之，在这之前，用户不知道应该怎么做，所以，第一种方式比较好。除了第一种方式还有一个更好的方式，就是给用户提供设置网络的入口，不需要用户再退出应用，找到设置，再去查看网络情况，如下：
小米商城的处理方式：
3.png
这个时候点击查看网络设置，那么就可以直接去到网络设置，简单方便。
如果是本地端来实现的，那么因为有缓存，所以一般都会进行缓存的显示，而不是一篇空白，从视觉上来看会更友好一些，如下：
今日头条的提示：
4.png

不过它仅仅是给个提示，其实还是没有给出用户接下来应该怎么办的指导，那么下面就给出了更友好的设计：
京东的做法：

5.png
给出的处理方式：
6.png

它不仅给用了提示，还给出怎么办，所以从产品体验角度，它更友好。
第二种直接给出网络异常的弹出框，这个是除了toast的另外一种方式，它后面也会跟着两种情况，H5网页和native本地两种实现方式。与上一个toast不同的区别就是他会阻止你的下一步操作，必须做出选择才能往下走，所以在整个的感觉中，网络异常的处理是最高优先级的，那么两种网络异常设计的表现形式如下：
洋码头很是厉害，狂弹提示不让进：

7.png

乐视商城的弹出框：

8.png

第一张图片是弹框方式，但是它是把用户完全阻隔在外面的，根本进不去，点击确定之后，只要是网络断掉还是一直弹出这个框，用户想去了解里面根本不可能，同时也没有给出处理方式。第二个比第一个更近了一步，可以让用户去设置网络，给出下一步的动作；如果不做处理的话，还是能够进入app里面的，即使没有网络也可以对这个APP有个大致的了解，所以第二种会更好些。
但是本地端的实现遇到网络异常，是弹框好还是在上面给出一个提示好呢，这也是京东和乐视商城采取的不同的方式。个人认为看你的目的和计划怎么去引导用户。如果是进入后有内容可以呈现，也想让用户进来看，只不过网络导致了影响观看，那么就采取京东的方式；但是像乐视商城，进入之后第一页面根本没有可以给用户看的，那么就弹出框比较合适，优先让用户把网络设置好。另外也根据交互的难易度来考虑，比如如果是在智能电视上面，那么即使是本地端实现的，也不能采取京东的方式，因为电视需要遥控器一步一步操作，移到网络设置的地方很复杂，所以建议采取弹框的方式更合适。
关于网络异常处理也是需要好好思考的事情，不同的情况下采取的方式不同。它需要从自己的目的，用户体验，实现方式等多种维度去考虑。个人见解肯定不完全对，只是作为个人的一个思考。