E6.11.3badge hierarchy设计

徽标层级需与内容重要性对应

别名: 徽标优先级 · badge rank · 红点滥用

概念解释

同一界面上可以同时出现点、小数字、大数字、高对比色块。这些外形构成一套层级:越强的标记越像在说「先处理这个」。层级必须跟内容的重要性对齐——提及你、付款失败、安全告警走上层;赞、新功能提示、营销走下层或根本不占角标。重要性是任务后果,不是运营想要的打开率。角标用满同一档,等于没有档。

机制

人在一屏里做视觉搜索时,会先被最醒目的角标吸走。若最醒目的是营销点,安全告警的点就要在同一搜索里竞争,而且通常会输,因为营销更新更勤。层级被倒挂之后,注意的全局分配就错了:忙碌的标记训练眼睛去找热闹,安静的重要标记被当成没有。层级还跨入口比较——消息上的「3」和首页图标上的红点会被放在一张优先级表里读。产品若没有这张表,每个功能自己决定自己有多红,用户会自己编一张,且编出来的往往把最吵的排在最前。

边界

无障碍和色盲条件下,单靠更红不够构成上层,要靠形状、数字和位置一起抬。系统级通知(操作系统自己的角标)不在应用能控制的层级里,应用内再叠一层同样醒目的,会变成双重上层。空状态里的装饰点不是徽标,不要纳入这套层级,以免把插画圆点读成未读。临时的「正在录制」圆点是状态指示不是未读徽标,应放在不同的位置,避免两套圆点抢一种含义。

怎么落地

  • 列出所有会打点或打数字的入口,按后果分成至多三档,每档只用一种外形(点 / 普通数字 / 高对比数字)。
  • 营销和功能介绍默认不进角标;非要进,只能走最弱档,且可被用户关掉。
  • 同一时刻上层徽标应极少,多条上层同时亮起说明重要性定义已经失效,该合并或降级。
  • 验证:把一屏上所有角标圈出来,按醒目程度排序,再按任务后果排序。两份名单对不上,层级就倒了。

延伸

  • 同组E6.11.1 红点表示存在,数字表示数量 · E6.11.2 无法清除的红点会被永久忽略
  • 相邻E5.17 导航项的徽标与提示 · E1.01 按钮的层级 · E6.02 横幅提示
  • 站内检索badge hierarchy · notification priority · visual rank

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E6.11.3