coordinated-data-views

协同视图

有些数据有多种自然的呈现方式。一组地点既可以用地图表示，也可以用列表表示。一个依赖网络既可以用图表表示，也可以用节点表格表示。一个数据集既可以用图表表示，也可以用原始表格表示。当这两种呈现方式确实对不同任务都有用时，应同时展示并保持同步——这称为协同视图。

核心规则：在一个视图中进行的任何选择或高亮，都应立即反映在另一个视图中。

---

何时使用协同视图

在以下情况下使用协同视图：

1. 两种呈现方式服务于不同任务——表格用于查找和浏览；可视化视图用于理解布局或关系
2. 用户会频繁地在两者之间切换，而不是偶尔看一眼其中一个
3. 数据集足够大，仅靠可视化视图无法识别单个项目，而仅靠表格又无法说明它们之间的关系

不要仅仅为了让界面更丰富而添加协同视图。如果用户只看表格而忽略可视化视图，那么它只会增加复杂度，没有任何益处。

---

同步选择模型

选择状态由一个共享状态存储统一管理，而不归属于任何一个视图。两个视图都从同一状态读取数据并写入数据。

Table row clicked → shared highlight state updated → both views re-render

Visual element clicked → shared highlight state updated → both views re-render

同步涵盖的交互：

交互	表格中的效果	可视化视图中的效果
点击行	行高亮	对应元素高亮
点击可视化元素	对应行高亮并滚动到视野内	元素高亮
悬停在行上	行轻微高亮	元素轻微高亮
悬停在可视化元素上	行轻微高亮	元素轻微高亮
清除选择	行恢复默认状态	元素恢复默认状态

**滚动到视野内：**点击可视化元素时，表格必须滚动，让对应行进入视野。高亮的行如果不在屏幕上，就毫无用处。

---

一致的颜色编码

颜色在两个视图中必须表达相同的含义。如果表格徽标中的某个类别是橙色，那么它在可视化视图中也应是橙色。绝不要在不同呈现方式中为相同数据指定不同颜色。

集中定义颜色：

const CATEGORY_COLORS = {
  groupA: 'hsl(24, 80%, 55%)',
  groupB: 'hsl(210, 70%, 55%)',
} as const;

两个渲染器都从同一来源导入颜色。整个布局中只显示一个共享图例，不要在每个视图中各自显示。

**颜色表示状态，标签表示身份。**当每个项目都已显示自己的名称时，应让同一类型的所有项目使用相同颜色，将颜色留给状态：计划中、部分使用、空闲、不可用。同一色调的深浅会被理解为程度差异，而不是不同事物；灰色项目也会与表示空白的灰色混淆。若要显示某个项目有多个出现位置，可在悬停或选择时高亮其所有出现位置。这样，图例只需解释状态，无需列出项目，因为标签已经说明了项目。

---

布局

视图之间的空间分配取决于哪个视图是主要视图：

**表格为主（探索、数据管理）：**表格占据 60–70% 的宽度；可视化视图作为辅助面板放在右侧或底部。

**可视化视图为主（理解布局和关系）：**可视化视图占据 60–70%；表格作为辅助面板。

**权重相等：**采用 50/50 分栏，并提供可拖动的分隔线。保存用户偏好的分栏比例。

┌─────────────────────┬────────────────┐
│                     │                │
│   Table (primary)   │  Visual view   │
│                     │                │
└─────────────────────┴────────────────┘

在移动设备上，每次只显示一个视图，并通过选项卡或切换控件在视图之间切换。不要尝试在小屏幕上同时显示两个视图。

时间轴和日历网格

沿时间轴放置每个标记时，应依据其覆盖的时间，而不是单位数量。当每天的单位数不同时，让每天保持相同宽度，并按当天实际拥有的单位数划分，这样，以当天最后一个单位为终点的标记就会结束在当天的分界线上。若宽度按单位数量的占比计算，只要每天的单位数不同，标记就会发生偏移，进而与旁边的网格相矛盾，读者便会两边都不相信。

构建日历或矩阵时，应以一个单位作为基准，即一个方形单元格加一个间隙，并让每一行（包括标签）都遵循这一间距。当窗口变化时，只调整显示的列数，不要改变单元格大小。让网格紧挨行标签，并将多余宽度留在末端；在宽屏上使用可伸缩的标签列，会把网格推离它所对应的内容。

---

视觉视图控件

只影响视觉呈现的控件应放在视觉视图面板中，而不是表格区域。

常见的视觉专用控件：

• 缩放／平移 — 导航（通常由渲染库处理）
• 图层不透明度 — 在密集地图或图表上显示重叠区域
• 图层切换 — 显示／隐藏类别或类型
• 重置视图 — 将所有元素适配到视图中；重置地图范围

这些控件不会影响表格。不要将它们放在表格工具栏中。

影响共享数据的控件（筛选器、时间范围、类别选择）应放在两个视图之外、布局上方或旁边，因为它们会影响两个视图中显示的内容。

---

高亮与选择

这是两种不同的状态：

高亮（悬停）： 临时状态，在指针悬停于某个元素上时显示，不会持续保留。两个视图都显示微弱的效果（例如 50% 不透明度的叠加层，或淡淡的行背景色）。无需交互即可清除；移动指针即可清除。

选择（点击）： 持续状态，直到明确清除。两个视图都显示明显、无歧义的视觉效果（例如亮色边框、饱和色彩、选中行背景色）。点击其他位置或按 Escape 可清除。

不要混淆这两者。指针移开后仍持续显示的悬停高亮会令人困惑。

---

在数据旁显示分析

用于解释或总结屏幕上数据的面板属于联动视图，而不是对话框。应在表格旁打开该面板，采用非模态形式，并保持页面可滚动。用户需要将每项说明与其所依据的行进行核对。模态对话框恰好会遮住这些行。

---

性能注意事项

如果管理不当，联动视图可能会触发开销较大的重新渲染。

• 对悬停高亮进行防抖处理——不要在每次指针移动事件时都更新，只在目标元素发生变化时更新
• 为项目使用稳定的标识（统一的 ID），让 React（或同类技术）能够协调更新，而无需重新创建元素
• 对于大型数据集（1000+ 个项目），无论视觉视图如何，都应对表格进行虚拟化
• 对于使用 canvas 或 WebGL 渲染的视图，避免每次高亮时都重新创建元素；应改为更新现有元素的样式属性

---

审查清单

• 视图之间的选择状态是否通过单一存储共享，而非重复存储？
• 点击某行是否会高亮对应的视觉元素，反之亦然？
• 点击视觉元素时，表格是否会滚动到对应的行？
• 两个视图中的颜色分配是否一致，并由单一来源定义？
• 共享图例是否只显示一次，而非在每个视图中重复显示？
• 视觉专用控件（缩放、透明度、图层切换）是否位于视觉面板中，而非表格中？
• 所有分析或摘要面板是否都位于数据旁边，采用非模态形式，并保持页面可滚动？
• 悬停高亮和点击选择是否在视觉上明确区分？
• 在移动设备上，是否提供了明确的视图切换方式？
• 是否对悬停事件进行了防抖处理，以避免不必要的重新渲染？