U2.11.3Treemap aspect ratio and layout stability设计研究
布局算法决定矩形的长宽比,细长矩形难以相互比较
别名: squarified treemap · slice and dice · 树图布局稳定性
概念解释
treemap 的面积由数值决定,但矩形的形状与位置由布局算法决定。slice-and-dice、squarified、strip 和保序变体可对同一数据生成不同长宽比、邻接和更新稳定性。极细长矩形通常更难估面积、放标签和选择,不过“更方正”不是唯一目标:动态追踪可能更需要位置稳定,阅读顺序或分组也可能要求保序。
机制
面积相同可由许多宽高组合形成。细长块容易让一维长度主导判断,宽度差异和邻近形状则使面积比较不稳定。Squarified treemap 优化长宽比,slice-and-dice 保留较清楚的顺序,稳定布局减少数据更新时的块位移;这些目标会冲突。布局算法不改变理论面积,却会改变可感知面积、标签空间、边界和动画中的对象恒常性。
怎么研究
在相同值与画布下比较布局,分别测同父面积比较、目标定位、顺序读取、标签识别和更新前后实体追踪。记录误差、时间、最差与分布性长宽比、节点位移及邻接变化,而不只报告平均形状指标。静态任务和动态任务应分开,且覆盖宽屏、窄屏和不同树形;方正度的算法改进不能自动证明用户任务更好。
边界
极小值在任何算法下都可能成为细条,需先处理深度、聚合或详情。为了保持输入顺序而接受细长块可能适合有序数据,却降低面积比较;为方正度重排可能破坏熟悉位置。响应式视口改变也会触发整体重排。布局必须确定性和版本化,否则相同数据刷新后无理由跳动会被误读为变化。
怎么落地
- 根据主要任务选择目标:静态面积比较偏向控制长宽比,序列扫描偏向保序,频繁更新偏向位置与邻接稳定。
- 固定排序键、算法、参数和相等值规则,并在响应式断点与数据更新中检查无意义位移。
- 保留直接标签、搜索和可访问层级表,使细长或移动节点仍能按名称和值找到。
- 用近似面积比较与更新追踪任务对比候选布局;若方正布局改善比较却破坏追踪,按任务分视图而非寻找单一赢家。