U5.02.1Legend-to-chart distance sets the cost of each round-trip设计

图例与图形的距离决定视线往返的成本

别名: 图例距离 · 视线转移成本

概念解释

图例离图形越远,每一次匹配的往返成本越高:视线要跨越的距离更长,注意力重新聚焦的次数更多。距离不仅拖慢单次匹配,还有第二层后果——距离太远时读者干脆放弃往返,改为凭印象猜类别,错误从"慢"升级成"错"。

机制

视线往返的成本由两部分构成:扫视移动本身(距离越长耗时越久)与注视切换(落点重新聚焦、上下文重建)。两者都随图例与图形的距离单调上升。更关键的是工作记忆的衰减:读者在图形处记住的颜色特征,要在抵达图例时仍然可用——距离越长、路上干扰越多,特征在记忆里衰减得越彻底,比对的准确率随之下降。所以距离惩罚的不是速度一项,而是速度与准确率两项。

边界

交互图表的悬停提示能让读者在图形原地获得类别名,绕开了距离成本,但要求额外交互且每次只解一个点;小屏幕上图例通常贴近图形,距离成本天然较低,但空间挤压又带来新的遮挡问题。规则适用于静态图与打印稿——那里距离固定、没有交互可用,图例距离就是纯粹的成本变量。

怎么落地

  • 图例放进绘图区就近放置(空白角落、线端附近),不用画布远角或页面底部。
  • 布局评审时量一下图例到图形元素的视觉距离:能缩小就缩小,图例尺寸为距离让路。
  • 验证:录屏观察读者匹配类别时的视线路径,往返路径明显长于图形本身尺寸,即说明距离过远,就近重排图例。

延伸

  • 同组U5.02.2 图例项的排列方向应与图形中的空间顺序一致 · U5.02.3 图例置于图形上方、右侧或下方的匹配成本不同 · U5.02.4 图例项过多时匹配退化为逐项线性搜索 · U5.02.5 交互式图例可兼任筛选器,但需提示其可点击
  • 相邻U5.01.1 图例强制视线在图与图例间往返 · U5.01.2 直接标注消除该往返
  • 站内检索legend proximity · gaze transition cost · legend placement

同组卡片

快捷操作

分享

分享当前页面

ios_share

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