U7.08.5Drillable elements need a clickable visual cue设计

可下钻的元素需有可点击的视觉提示

别名: 可点击性暗示 · afforance

概念解释

图表上的数据点、图例、类别标签如果绑定了下钻行为(点击展开细分、跳转详情),用户需要从外观上判断"这个可以点"——这就是可供性(affordance)在数据可视化里的应用。与按钮和链接不同,图表元素天生没有"可点击"的视觉惯例:一条折线看起来和不可点的折线一模一样,一个柱子也无法从形状判断是否绑定了行为。缺少提示时,下钻路径即使技术上存在,在用户眼里等于不存在。

机制

可供性的作用机制是视觉预期引导行为:用户在网页上学会的惯例是蓝色下划线文字可点击、凸起按钮可按压,这些预期来自数百万次交互的经验积累。图表元素没有这套惯例,意味着设计者必须主动建立"这个图表里什么可点"的信号——常用的手段包括:悬浮时光标变手型(最常见的最低限度)、悬浮时数据点放大或出现边框(表明这是独立元素)、颜色改变(数据点用链接色)、以及悬浮提示"点击查看按渠道拆解"(语义明确的邀请)。这些手段的效果强度依次递增,成本也递增。问题在于,仅靠手型光标是不够的——用户必须先把鼠标悬浮到元素上才能发现它可点,而这个动作本身依赖于已经预期它可能可点,形成了先有鸡还是先有蛋的循环。打破循环的方式是把可点击信号放在不需要悬浮就能看到的地方:视觉样式(链接色、边框)或者显式的文字标签。

边界

可点击提示的密度有上限:如果图表上每个元素都加了边框或颜色,可点击的信号反而被稀释,用户无法区分"这个能点"和"所有都能点"。移动端没有悬浮状态,可点击的视觉提示必须常显而不能依赖悬浮出现——许多桌面端设计在移动端失效正是这个原因。可访问性是另一条硬边界:仅靠颜色区分可点击状态的图表,对色觉缺陷用户不可用,可点击的元素应有非颜色的第二信号(边框、形状、文字提示)。

怎么落地

  • 为所有绑定了下钻行为的图表元素统一使用一种视觉信号(如链接色或虚线边框),并在仪表盘使用说明中说明这个惯例。
  • 悬浮提示写明点击后的效果("点击查看按地区的拆解")而非仅提示数据值。
  • 验证:找 3 位未见过该仪表盘的用户,问他们"这张图上哪些元素可以点击";没有人识别出实际可下钻的元素即提示不足。

延伸

  • 同组U7.08.1 仪表盘上发现的异常需要有通向解释的下一站 · U7.08.2 跳转到详情页时需携带当前的筛选上下文 · U7.08.3 详情页需提供返回并恢复原仪表盘状态的入口 · U7.08.4 缺少下钻路径的仪表盘只能发现问题不能定位问题
  • 相邻U7.08.1 仪表盘上发现的异常需要有通向解释的下一站 · U7.04.5 告警需指向可执行的下一步而非只报告数值
  • 站内检索affordance · clickable chart · hover tooltip

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U7.08.5