网络故障场景如何提醒用户？来看这篇超细致的总结！

王M争：当你正在用微信跟同伙胡侃，在 b站看纪录片，逛虎扑怼 skr。这时网络忽然断掉，我们应该给用户什么样的提醒呢？最近由于本身也在梳理类似的场景，所以这篇文章就来跟大家分享交流一下在网络故障场景下如何给予用户合适的提醒。

所有的报错提醒/反馈都可以拆解为两个部分：报错征象息争决方案。因此网络发生故障时我们首先应该告诉用户您当前的网络状况非常，让用户感知到这个事实，然后再提供解决方案。

目前来说，常见的报错样式有 toast、snackbar、对话框、告示栏、界面内嵌与空网页。最近看了一下本身之前的文章，发现都是基于组件来阐述适用场景。这种解构体例有个题目，那就是实际情况中，产品或者交互设计师都是基于场景去确定合适的组件。因此为了更方便大家理解，这里我不详细介绍每个组件的用法，而是以场景来定义来组件。

1. 不提醒

首先我们必要明确一个事实：不是每一种网络故障都必要提醒用户。这里的「不提醒」其实是一个相对的说法，并不是真的不给用户提醒，而是只有效户实行了请求数据的操作才告知用户网络发生故障。付出宝就是一个典型的例子，即使断网了，用户基本也感知不到。只有效户请求了新数据，才会以 toast 关照用户网络非常。

付出宝这种高冷也是有底气的，由于其多数网页都有缓存机制，用户不用每次进入这个网页都要去服务端请求一遍数据。类似的还有 QQ音乐、咕咚，对于这些产品来说断网并不会带来灾祸性的影响。由于断网不影响我去听缓存或下载好的歌曲，也不会影响记录运动数据。所以对于此类应用来说，当网络报错的时候，只要用户没有触发请求数据的操作，没有需要提醒用户。

当然我们必要给缓存数据设置一个有用期，假如过了那个有用期，网络照旧没有恢复正常，应该及时提醒用户网络故障。

2. 无缓存

当然并不是每一个网页都有缓存，对于没有缓存数据的网页，我们有两种方案。一种是展示空网页，另一种是展示骨架屏（Skeleton Screen）。

骨架屏顾名思义就是展示网页的框架，当数据请求完成时再渲染网页。这种先占好位置再加载数据的模式也被称之为占位符，都是一个意思。

最后再说空网页，其实空网页的展示方案也可以分为两种：

• 提供「刷新网页」按钮
• 提供「解决方案」按钮

两种方案都有本身的道理，我小我更倾向于把两种方案进行融合。展示「刷新网页」的按钮，假如用户点击了照旧没有办法请求到数据，这时以 snackbar 的情势提供解决方案。其实解决方案都是指导用户去体系设置里检查/开通网络权限。

3. 持续性提醒

有缓存数据的网页，付出宝可以不提醒用户，但是对于 QQ 和微信这类即时通信类的应用来说，给予用户网络故障的反馈是特别很是有需要的。由于假如不给提醒，我不知道对方忽然不回我信息是我惹对方气愤了照旧我网络故障收不到。QQ 和微信这里同一采用的是告示栏，用户点击之后进入一个展示网络故障解决方案的网页。这里可能会有人问，为什么不使用对话框，对话框也可以完成跳转动作啊。

我尝试着来分析一下，假如使用对话框，那么对话框的触发机制有两种：

• 只要检测出网络不通行，立即弹出对话框关照用户
•  检测出网络不通行，立即弹出对话框关照用户，不做二次提醒

第一种触发机制显明不合理，由于用户使用微信并不肯定非要网络通行，有的用户就是想翻看一下聊天记录。你这边只要检测出网络故障就会弹出一个对话框，会对用户造成很大的干扰。

第二种也不合理，假如用户所处的网络环境不稳固，时断时续，那么一旦你第一次点击关闭了弹出框，用户就无法感知到后续网络的非常。

所以微名誉户对于网络故障提醒的要求是在给予用户持续性的提醒前提下，还不能干扰用户正常操作。好了好了，这个题目我知道了，但是我不必要立即行止理。

可以知足上面这个条件的控件有两个：snackbar 和告示栏，微名誉的是告示栏，京东用的是 snackbar。以京东为例，用户在使用京东过程中假如网络忽然发生故障，那么会从界面顶部弹出一个 snackbar 来关照用户，用户点击之后会进入一个网页，展示一些解决方案。其实在上面我也提到过，所谓的解决方案就是让用户去体系设置页检查/开通网络权限，我们可以像网易云音乐一样直接提供一个跳转链接，节省用户操作步骤。

snackbar 和告示栏的区别在于 snackbar 的位置是固定的，只要你的网络不通顺，那么它一向会出如今界面顶部。这是由于京东对于网络的诉求比微信要更强，没有网络微名誉户还可以翻看聊天记录，京东用户没有网络还能干什么？没有办法欣赏商品，更不用说剁手了，京东比微信更必要用户去解决网络故障的题目。

4. 网络切换

除了断网与弱网情况，另一个必要考虑的题目是网络切换。当网络从 4g 切换至 wifi，我们用 toast 来提醒用户没有任何题目，甚至不提醒也没事，不会对用户产生太大的影响。但是反过来说，wifi 忽然断掉，切换至 4g 网络，我们还能如此淡定吗？

当我用 wifi 观看视频，忽然 wifi 断掉，会主动切换至 4G 网络。为了避免让用户在不知情的情况下耗费大量的流量，我们应该给用户一个网络变更的提醒，用户确认之后才可以继承观看。提醒的体例目前来说重要界面内嵌和对话框，哔哩哔哩和网易云音乐这里用的都是界面内嵌。

故意思的是在网易云音乐中，假如你听歌过程中 wifi 忽然断掉，那么 4G 网络会继承缓存歌曲，而 QQ音乐是不会继承缓存的。仅从这点上来说，我小我觉得腾讯做的更知心。

最后插一句：网络状况由 wifi 切换至 4G 绝对不可以使用 toast！由于安卓的某些机型中，用户在体系设置中关闭推送会把 toast 也给禁用掉。对于这些用户来说，他们是收不到提醒的，很容易造成流量的损失。所以优先级高的反馈我们都只考虑使用对话框，由于对话框所承载的信息用户100%会看到。

总结

以上就是我对网络故障场景下的设计总结，假如你有不同的看法或者意见，迎接留言或者加群讨论。

迎接关注作者的微信公众号：「王M争」

图片素材作者：Tayyab Ali