E5.17.1navigation badge设计

导航项徽标提示该目的地内存在未处理事项

别名: 导航徽标 · unread badge · 目的地未处理

概念解释

贴在导航项上的徽标不是装饰,它声明:这个目的地里面有尚未处理的事项(navigation badge)。消息里有未读、审批里有待办、购物车里有未结账的件。它把「要不要进去」从打开之后才知道,提前到还在导航上的时候。不是泛泛的「这里有新功能」,也不是整页的通知——范围钉在这一站。

机制

导航是选择场,徽标是加在某一选项上的待办线索。人扫一排目的地时,徽标把其中一项的预期收益抬高:进去能清掉一件事。没有徽标时,未处理事项要等用户碰巧走进去才被看见,处理被推迟。线索必须能映射回目的地内部的对象(哪几条未读、哪几笔待办),否则它只是一个红点焦虑源:进去找不到对应的事,线索就从导航信号变成噪音。

因为贴在导航上,徽标还会影响走哪条路。它不该出现在不能处理那些事项的入口上(例如一个只读的「关于」)。它也不该代表「系统某处有事」——那是全局通知的工作。范围一漏,所有带徽标的项都变得一样急,选择场被均匀上色,线索失效。

边界

目的地内部没有可处理对象(纯内容页)时,不应为了拉回访而贴徽标。营销式「新」标签不是未处理事项,不应占用同一套视觉。无障碍上,徽标必须进入该项的名称(「消息,三件未读」),否则视觉用户和辅助技术用户拿到的选择场不同。子层有未处理、只把徽标贴在父级上时,人知道这一支有事,仍要再找一层——这可以,但父级徽标必须在子层清完后消失。

怎么落地

  • 只在「进去就能处理」的目的地上贴徽标,并让内部列表能解释这个数字或圆点从哪来。
  • 把徽标写进导航项的可访问名称,不要只靠颜色。
  • 不要用同一套徽标去标「产品更新」或「推荐」,以免和处理事项抢信号。
  • 验证:看见徽标再进去,应能指出对应的未处理对象。指出不了就是假线索。再问「这个点代表哪一站里的事」,答成「系统在叫我」即范围漏了。

延伸

  • 同组E5.17.2 数字徽标在数量很大时需要折算展示 · E5.17.3 徽标常驻不消退会削弱用户对新事项的敏感度 · E5.17.4 徽标出现的判定逻辑需要与实际状态严格一致
  • 相邻E6.11 徽标与红点 · E5.02 底部标签栏
  • 站内检索navigation badge · unread count · wayfinding cue

同组卡片

快捷操作

分享

分享当前页面

ios_share

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