打开网站发生网络故障时如何友善提示用户？



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音乐是不会继续缓存的。仅从这点上来说，腾讯做的更贴心。

     从以上四个内容中我们可以看到不同的软件是可以采取不同的措施的，那么网站建设如果一旦发生网络故障或者资源型的故障应该如何提醒用户呢？这里有以下四点建议：

1、引导用户切换检查网络

      一般情况下网站访问出现故障问题时候第一需要解决的就是用户自己的网络，当用户网络发生问题时候浏览器方面是会提醒资源情况的。

2、引导用户刷新重新访问

     当用户能够看到网站的提示页面时，应该引导用户重新访问资源，确保用户不会因为资源无法访问而终止访问，引导能够让用户认为网站是可以访问的。

3、引导用户重启浏览器

      有些时候网站没有问题、网站也没有问题，就是因为浏览器问题而无法显示问题，这个时候并不能排除浏览器故障，所以这里也应该解决下用户终端问题。

4、舒缓用户情绪

     一旦网站无法访问了，用户情绪第一次将会是有点突然，第二次必然烦躁，第三次必然是很厌恶的，那么这个时候就需要我们对用户的情绪进行安抚了，具体的安抚方法就因人而异了。