U5.02.2Legend arrangement direction should match the graphic's spatial order设计

图例项的排列方向应与图形中的空间顺序一致

别名: 图例方向 · 纵向横向图例

概念解释

图例有两种基本排法——纵向列表与横向行——选择依据不是空间剩下多少,而是图形中类别的展开方向:纵向展开的图形(线图从上到下的线端、纵向条形)配纵向图例,横向展开的图形(横向条形、从左到右的序列)配横向图例。方向对齐时"第几项对第几个"的位置对应成立;方向冲突时,读者要在脑中先做一次转置,再开始匹配。

机制

方向对齐降低成本的原理与顺序一致相同,但作用在另一个维度:序列位置跟踪是平行于扫视方向的,图例排列方向与图形序列方向同轴时,视线可以沿同一条轴完成对应;方向垂直时,每次对应都需要一次 90 度的心理旋转,匹配不再是"顺路"而是"换轨"。旋转本身耗资源,且旋转后的位置关系容易记错,错的对应就是错的类别。

边界

空间约束常常不配合:窄屏放不下横向图例,矮卡片放不下纵向列表,此时只能转置方向并接受成本,或者压缩图例项(聚合、精简)回到对齐状态。多列图例(两项一行的折中排法)会同时破坏两个方向的对应,是最后手段。方向规则的优先级低于图例与图形的邻近性——先保证近,再保证顺。

怎么落地

  • 排图例前先看图形序列方向:线端从上到下→纵向图例;条形从左到右→横向图例。
  • 方向不得不冲突时,把图例分成小块按图形分区就近放置,让每块的内部顺序与局部图形对应。
  • 验证:让读者找"从上往下第二个系列",方向对齐时应能直接顺到图例第二项;若读者出现明显的停顿回扫,方向可能是拧的。

延伸

  • 同组U5.02.1 图例与图形的距离决定视线往返的成本 · U5.02.3 图例置于图形上方、右侧或下方的匹配成本不同
  • 相邻U5.01.3 图例顺序应与图形顺序一致 · U5.02.4 图例项过多时匹配退化为逐项线性搜索
  • 站内检索legend orientation · spatial correspondence · legend layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

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