U2.11.3Treemap aspect ratio and layout stability设计研究

布局算法决定矩形的长宽比,细长矩形难以相互比较

别名: squarified treemap · slice and dice · 树图布局稳定性

概念解释

treemap 的面积由数值决定,但矩形的形状与位置由布局算法决定。slice-and-dice、squarified、strip 和保序变体可对同一数据生成不同长宽比、邻接和更新稳定性。极细长矩形通常更难估面积、放标签和选择,不过“更方正”不是唯一目标:动态追踪可能更需要位置稳定,阅读顺序或分组也可能要求保序。

机制

面积相同可由许多宽高组合形成。细长块容易让一维长度主导判断,宽度差异和邻近形状则使面积比较不稳定。Squarified treemap 优化长宽比,slice-and-dice 保留较清楚的顺序,稳定布局减少数据更新时的块位移;这些目标会冲突。布局算法不改变理论面积,却会改变可感知面积、标签空间、边界和动画中的对象恒常性。

怎么研究

在相同值与画布下比较布局,分别测同父面积比较、目标定位、顺序读取、标签识别和更新前后实体追踪。记录误差、时间、最差与分布性长宽比、节点位移及邻接变化,而不只报告平均形状指标。静态任务和动态任务应分开,且覆盖宽屏、窄屏和不同树形;方正度的算法改进不能自动证明用户任务更好。

边界

极小值在任何算法下都可能成为细条,需先处理深度、聚合或详情。为了保持输入顺序而接受细长块可能适合有序数据,却降低面积比较;为方正度重排可能破坏熟悉位置。响应式视口改变也会触发整体重排。布局必须确定性和版本化,否则相同数据刷新后无理由跳动会被误读为变化。

怎么落地

  • 根据主要任务选择目标:静态面积比较偏向控制长宽比,序列扫描偏向保序,频繁更新偏向位置与邻接稳定。
  • 固定排序键、算法、参数和相等值规则,并在响应式断点与数据更新中检查无意义位移。
  • 保留直接标签、搜索和可访问层级表,使细长或移动节点仍能按名称和值找到。
  • 用近似面积比较与更新追踪任务对比候选布局;若方正布局改善比较却破坏追踪,按任务分视图而非寻找单一赢家。

延伸

  • 同组U2.11.1 树图用嵌套矩形的面积表达层级下的份额 · U2.11.2 深层节点面积过小时不可读,需限制展示深度 · U2.11.4 相邻矩形的层级归属需靠边框或留白才能看出 · U2.11.5 树图无法表达负值,也不支持跨层级的直接比较
  • 相邻U1.04.1 主观面积感知系统性低于实际 · U3.07.1 纵横比改变斜率的视觉印象
  • 站内检索squarified treemap · slice and dice · aspect ratio · layout stability

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U2.11.3