E5.17.2badge count compaction设计

数字徽标在数量很大时需要折算展示

别名: 99+ · 徽标折算 · overflow count

概念解释

未处理事项一旦上百,精确数字在导航项那块小面积里放不下,也读不完。数量折算(badge count compaction)把 1283 收成 99+ 或 1.2k 这类上限或数量级,保住「很多」这个信号,放弃个位精度。它处理的是显示密度,不是要不要有徽标,也不是徽标该不该消失。

机制

导航项的徽标槽只有几个字符的宽度。四位、五位数字会撑破图标、挡住相邻项,或小到无法辨认。人在选择场里需要的是量级:0、几个、几十、已经爆掉。个位精度在走进目的地之后再给。折算是把显示从计数器改成量级指示,避免导航几何被数字撑坏。

折算也改变比较。两个目的地分别是 104 和 191,折成 99+ 后看起来一样急,区分被拿掉了——这是有意的:导航上本就不该靠精确未读数来排序两个都已经「很多」的站。若产品确实要人先处理更多的那一站,应在内部列表排序,而不是在导航上赛跑谁的数字更长。对辅助技术,折算后的名称应说「超过九十九」而不是把 99+ 当普通数字读。

边界

数量经常在个位数徘徊的目的地(审批、购物车)不应过早折算,精确值就是行动依据(车里 2 件还是 3 件)。折算阈值要按槽的宽度和字体来,而不是抄一个 99。数量级写法(1.2k)对「未读消息」合适,对「待签字的 3 份合同」不合适。零不应显示为 0 的徽标,而应是没有徽标。

怎么落地

  • 为该导航槽设定最大可读位数,超过就折成上限(99+)或量级,并在目的地内部给出精确值。
  • 可访问名称使用完整或「超过 N」,不要朗读加号。
  • 两个都已折算的项不要指望用导航数字分出先后。
  • 验证:把未读拉到四位数,导航项几何不应被撑破,相邻项仍可点。进入后应能看到精确值。把数量从 99 加到 100,信号仍应是「很多」而不是突然换成不可读的三位数。

延伸

  • 同组E5.17.1 导航项徽标提示该目的地内存在未处理事项 · E5.17.3 徽标常驻不消退会削弱用户对新事项的敏感度 · E5.17.4 徽标出现的判定逻辑需要与实际状态严格一致
  • 相邻E6.11 徽标与红点 · E5.15 导航项数量
  • 站内检索badge overflow · 99+ · count compaction

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.17.2