U5.01.3Legend order should match the graphic order设计

图例顺序应与图形顺序一致

别名: 图例排序 · 顺序对应

概念解释

必须使用图例时,图例项的排列顺序要与图形中类别的空间顺序对应:图例第一项对应图里最靠前(最上或最左)的系列,第二项对应第二个,以此类推。顺序一致时,匹配从"逐项比对颜色"降级为"按位置对应",读者扫一眼就能锁定候选;顺序错乱时,每一次匹配都是全表扫描。

机制

一致顺序起作用的原理是把特征匹配转化为位置匹配:人眼对序列位置的跟踪远比对颜色记忆可靠,图形顺序与图例顺序平行时,读者可以用"第几条线对第几项"的对应关系直接缩小候选,颜色比对只做最后确认。顺序错乱时这个捷径被拆掉,颜色特征成了唯一线索,工作记忆的负担回到原点——这正是图例排序规范存在的全部理由。

边界

"图形顺序"对不同图型定义不同:线图按线端终点的纵向顺序,条形图按条的排列顺序,堆叠图按层叠顺序(注意有的行业惯例把图例倒排,使图例首项对应最上层——关键不是方向而是与图形层序严格对应)。环形图的扇区没有线性顺序,此时按数据排序或语义分组排列图例,保持全产品一致即可。位置对应是捷径不是硬约束,跨图一致性与对应精确性相比,前者是底线。

怎么落地

  • 排图例前先确定图形中类别的出现顺序,图例严格照抄这个顺序,不按数据值、不按字母、不按"好看"。
  • 堆叠图让图例首项对应最上层(或统一最下层),并全站统一方向。
  • 验证:让读者找指定的第 n 个系列,顺序一致时第一次往返应能锁定;若读者仍需来回比对多趟,检查图例顺序是否与图形脱节。

延伸

  • 同组U5.01.1 图例强制视线在图与图例间往返 · U5.01.2 直接标注消除该往返
  • 相邻U5.02.2 图例项的排列方向应与图形中的空间顺序一致 · U5.04.2 按值排序使排名与极值无需搜索即可读出
  • 站内检索legend order · position correspondence · stacked legend order

同组卡片

快捷操作

分享

分享当前页面

ios_share

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