I3.03.1explicit offline indicator设计

离线需要明确的状态指示

别名: 离线指示 · 断网标识 · offline badge · 连接状态

概念解释

设备已经不在网上,界面还长得像在网上——这是最贵的一种未知。离线需要明确的状态指示(explicit offline indicator):用稳定、可读、不能被内容淹没的信号说出「现在没有连接」,而不是等某次提交失败才让人猜。指示的是连接这一层事实,不是「哪些功能还能用」、也不是「操作会不会排队」。那两件事先要有指示,才能被问。

没有指示,离线被感知为卡顿、空白或「产品坏了」。有指示,离线变成一种可命名的模式。

机制

连接是全局模态,却几乎不占像素。人默认「能打开这个 app 就是在线」,这个默认只在失败时才被检验。失败又常常长得像别的错:接口超时、空列表、转圈不停。归因会落到内容、账号、服务器,而不是无线电。明确指示把连接从推断改成知觉:在评价鸿沟闭合之前,先把「世界是否连通」放进视野。

指示必须扛得住注意转移。一条 toast 说「网络不可用」然后消失,人切去看消息再回来,模型又回到默认在线。所以离线指示要像一种模式灯:只要还离线,灯就还在。它和内容争的是常驻槽位,不是瞬时注意力。

边界

飞行模式、系统级无网横幅已经够硬的环境,应用内可以更克制,但不能把系统横幅当成自己的状态——用户关掉系统提示之后,应用仍欠一条。弱网(高延迟、丢包)不是离线:标成离线会禁止其实还能做的请求,标成在线又会让超时看起来像故障。弱网需要自己的诚实说法(「连接不稳定」),不要挤进离线灯。局域网可用、公网不可用(内网工具、缓存站点)对「能不能做事」和「能不能同步到云」是两件事,一只灯不够,要能说出缺的是哪一段。后台同步进程自己断了、前台浏览还通,不要把整app标成离线。

怎么落地

  • 在主任务视野里放一盏只要离线就还在的灯:顶栏条、头像旁的点、标题下的一行。不要只用一次 toast。
  • 文案直说连接,不说「出了点问题」。离线、弱网、服务端故障三套词,不要混用一个红点。
  • 进入离线和恢复在线都要变灯;恢复时灯灭,可以叠加一句「已重新连接」,但不要只靠那一句、灯却没有家。
  • 验证:打开飞行模式,回到产品主屏,计时三秒。若仍无法在主视野里读到「现在没网」,指示失败。再关掉飞行模式:灯应在连接真正恢复后熄灭,而不是在按钮可点时就熄。用屏幕阅读器走同一路径,确认离线作为状态被读出,而不是只有颜色变化。

延伸

  • 同组I3.03.2 离线可用范围需提前说明 · I3.03.3 离线期间的操作需排队并在恢复后处理
  • 相邻E6.14 离线与连接状态提示 · I3.10 离线状态与本地优先
  • 站内检索offline indicator · connectivity status · offline mode

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/I3.03.1