断网提醒设计

断网提醒设计.png

第一步：明确提醒前提

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

第一步：明确提醒前提

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

• 整页提醒：直播

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

• 内容区按钮

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

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

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

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

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

支付宝：网络无法连接

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

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

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

• 重试按钮

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

• 弹窗

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

• toast

知乎：断网时打开首页，已经有缓存好的内容（没有时立即提示），点击一篇内容时会提示

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