断网提醒设计

断网提醒设计.png

第一步:明确提醒前提

  1. 用户需不要需要查看缓存内容
  2. 什么时候检查网络状态

第一步:明确提醒前提

1.有必要立即并打断用户提醒(整页提示,内容区按钮,弹窗)
这一类场景页面功能全部无法使用,且没有本地缓存可查看,即断网了啥都不能用啥都看不了

  • 整页提醒:直播

网络未连接, 请检查网络后点击页面刷新

  • 内容区按钮

云音乐:无可用网络,检查 云音乐网络连接权限及当前网络状态【查看详情】
读书:【刷新重试】【去本地书架看看】

2.有必要提醒,但不要打断用户(notice bar,toast,页面内提示)
这一类场景页面部分本地功能可用,或者本地缓存可查看。不打断用户思路,轻提醒,达到让用户了解,知道的目的即可。

  • Notice bar:出现在标题下方或列表顶端,点击可获取解决网络问题的帮助

微信列表:无法连接服务器,请检查你的网络设置

  • toast:少量文字,几秒内消失,提醒但不打断

支付宝:网络无法连接

  • 页面内提示:打不断用户,让用户知道的目的

墨迹天气:当前网络不可用

3.需要提醒用户,但不是立即
这一类场景,用户会持续操作的场景

  • 重试按钮

微信聊天:发送失败提醒用户,点击即可重新发送
微博:有内容发送失败,已存入草稿箱,点击可重新发送

  • 弹窗

淘宝:用户操作时不打断,完成后会弹窗提示提示,并保存操作

  • toast

知乎:断网时打开首页,已经有缓存好的内容(没有时立即提示),点击一篇内容时会提示

4.不需要提醒
这一类场景,断网了也没有什么影响

推荐阅读更多精彩内容