作者注：当你在微信上和朋友闲聊，在b站看纪录片，或者逛skr。这时，网络突然断开了。我们应该给用户什么样的提示？最近因为在整理类似的场景，所以这篇文章分享给大家，在网络出现故障的情况下，如何给用户适当的提示。所有的错误提示/反馈都可以拆解为两部分：错误现象和解决方法。因此，当出现网络故障时，我们应该首先告诉用户你当前的网络状态不正常，让用户感知到这个事实，然后提供解决方案。目前常见的报错样式有toast、snackbar、dialogbox、notificationbar、embeddedinterface和emptypage。最近看了我之前的几篇文章，发现都是以组件来讲解适用场景。这种解构方式存在一个问题，即在现实中，产品或交互设计师是根据场景来确定合适的组件。因此，为了让大家更容易理解，我这里不具体介绍各个组件的用法，而是根据场景来定义组件。1、不提示首先，我们需要明确一个事实：并不是每一种网络故障都需要提示用户。这里的“无提示”其实是一个相对的说法。并不是不提示用户，而是在用户执行请求数据的操作后才通知用户网络故障。支付宝就是一个典型的例子。即使断网，用户也基本不会察觉。只有当用户请求新数据时，才会用toast通知用户网络异常。支付宝的冷淡也有了底气，因为它的大部分页面都有缓存机制，用户不用每次进入这个页面都去服务器请求数据。类似的还有QQ音乐和咕咚。对于这些产品，断开与Internet的连接不会产生灾难性的影响。因为断线不影响我听缓存或者下载的歌曲，也不影响运动数据的记录。因此，对于这类应用，当网络报错时，只要没有触发用户请求数据的操作，就不需要提示用户。当然，我们需要为缓存数据设置一个过期日期。如果超过有效期，网络仍未恢复正常，应及时提示用户网络故障。2.没有缓存当然，并不是每个页面都有缓存。对于没有缓存数据的页面，我们有两种选择。一种是显示空白页面，另一种是显示骨架屏幕（SkeletonScreen）。顾名思义，骨架屏就是展示页面的框架，当数据请求完成时，页面就会被渲染。这种在加载数据之前占好位置的模式也叫占位符，意思是一样的。***让我们谈谈空页。事实上，有两种方法可以显示空白页面：提供“刷新页面”按钮和提供“解决方案”按钮。两种解决方案都有其自身的原因。我个人更喜欢使用两种解决方案进行融合。显示“刷新页面”按钮。如果用户点击还是请求不到数据，那么就以snackbar的形式提供解决方案。其实解决办法就是引导用户在系统设置中勾选/开启网络权限。3、不断提示有缓存数据的页面，支付宝可能不会提示用户，但对于QQ、微信等即时通讯应用，网络故障时给用户反馈是非常有必要的。因为如果我不提醒的话，我不知道是不是对方突然不回我信息，是我惹了对方生气还是网络故障收不到。这里QQ和微信统一使用通知栏。用户点击后，进入一个展示网络故障解决方案的页面。这里可能有人会问，为什么不用对话框，对话框也可以完成跳转动作。我试着分析一下。如果使用对话框，对话框有两种触发机制：只要检测到网络不通，立即弹出对话框通知用户，弹出对话框通知用户用户立即。第二个提醒第一个触发机制显然不合理，因为用户使用微信并不一定要网络畅通，有些用户只是想查看聊天记录。只要检测到你这边有网络故障，就会弹出对话框，对用户造成很大的困扰。第二个也不合理。如果用户的网络环境不稳定、时断时续，那么一旦你第一次点击关闭弹框，用户将无法感知后续网络的异常。因此，微信用户对网络故障通知的需求是在不影响用户正常操作的情况下，为用户提供持续的提醒。好吧，我知道这个问题，但我不需要马上处理。满足以上条件的控件有两个：snackbar和notificationbar。微信用的是通知栏，京东用的是snackbar。以京东为例，如果用户在使用京东时突然遇到网络故障，界面顶部会弹出一个快餐栏来通知用户。点击之后，用户会进入一个展示一些解决方案的页面。其实我上面也提到过，所谓的解决方案就是让用户去系统设置页面查看/开启网络权限。我们可以像网易云音乐一样直接提供跳转链接，节省用户步骤。snackbar和通知栏的区别在于，snackbar的位置是固定的，只要你的网络不畅，它就会一直出现在界面的最上方。这是因为京东对互联网的需求要强于微信。没有网络的微信用户仍然可以浏览聊天记录。没有互联网，京东用户还能做什么？没有办法浏览产品，更不用说购物了。京东不仅仅需要微信用户来解决网络故障的问题。4.网络切换除了断网、弱网之外，另一个需要考虑的问题就是网络切换。当网络从4g切换到wifi时，我们用toast提醒用户没有问题，即使没有提示也不会对用户造成太大的影响。但反过来说，如果wifi突然断了，切换到4G网络，我们还能这么淡定吗？我用wifi看视频的时候，突然wifi断了，会自动切换到4G网络。为了防止用户在不知情的情况下消耗大量流量，我们应该给用户提示网络变化，用户确认后可以继续观看。目前，提示方式主要嵌入在界面和对话框中。哔哩哔哩和网易云音乐都嵌入了界面。有意思的是，在网易云音乐中，如果正在听歌时wifi突然断掉，4G网络会继续缓存这首歌，但QQ音乐不会继续缓存这首歌。单从这一点来看，个人觉得腾讯做的还是比较贴心的。***插一句：当网络状态从wifi切换到4G时，一定不能用toast！因为在某些安卓机型中，用户如果在系统设置中关闭推送，就会禁用toast。对于这些用户来说，他们收不到提示，很容易造成流量流失。因此，我们只考虑使用对话框进行高优先级的反馈，因为对话框携带的信息100%都会被用户看到。总结以上是我对网络故障场景的设计总结。如果您有不同的看法或意见，请留言或加入群讨论。
