U5.02.5Interactive legends double as filters, but clickability must be signalled设计

交互式图例可兼任筛选器,但需提示其可点击

别名: 可交互图例 · 图例筛选

概念解释

交互式图表里的图例常常身兼二职:既是颜色对照表,又是序列的开关——点击隐藏或单独显示某个系列。这个第二职能很强大,但有一个前提:读者得知道图例能点。静态的图例看起来就是个对照表,没有任何可供性提示时,没人会去点它,筛选能力等于不存在。

机制

问题本质是可供性缺失:数字界面的"可点击"不是固有属性,是学到的视觉约定(悬停变化、手型光标、按钮样式)。图例的默认外观(色块加文字)与静态图完全相同,不携带任何可交互线索;交互能力只存在于代码里,不存在于感知里。可供性必须被显式安装——悬停反馈、状态图标、说明文字——否则功能对用户不可见。未被发现的功能不只是浪费,还会造成困惑:读者偶然点中后图面突变,却不知道发生了什么、如何恢复。

边界

提示要克制:悬停高亮加光标变化是最低成本的暗示,首次使用提示或图例旁的"点击隐藏"说明适用于关键功能,但常驻说明文字会增加噪音。触屏没有悬停,可供性必须完全靠显式线索(图标、说明),成本更高,功能价值要重新评估。此外图例筛选改变了图的数据范围,筛选状态必须可见可撤销,否则读者会把"被隐藏"误读为"没有数据"。

怎么落地

  • 给图例项加悬停高亮与光标变化;重要图表在首次展示时用一行提示说明可点击。
  • 触屏端用图标或长按替代悬停,并在功能确实高频时才保留图例筛选。
  • 筛选后保留可见的筛选状态标记与"重置"入口。
  • 验证:可用性测试里数一数自发点击图例的用户比例;无提示时接近零即可供性缺失,需补提示再测。

延伸

  • 同组U5.02.1 图例与图形的距离决定视线往返的成本 · U5.02.2 图例项的排列方向应与图形中的空间顺序一致 · U5.02.3 图例置于图形上方、右侧或下方的匹配成本不同 · U5.02.4 图例项过多时匹配退化为逐项线性搜索
  • 相邻U5.04.4 多图并置时只有统一排序才能跨图对照 · U11.02.5 交互引起的视图变化需被播报
  • 站内检索interactive legend · affordance · legend as filter

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U5.02.5