data-viz

详细介绍

创建能够阐明数据而非徒增装饰的可视化。目标不是让数据看起来令人印象深刻，而是帮助用户理解模式、比较数值并做出决策。

请参阅数据可视化参考，了解图表类型选择、响应式模式、无障碍数据表、色觉友好型调色板和交互设计。当语义状态、图表调色板或类别颜色需要在色觉缺陷情况下仍能区分时，请参阅colorblindness UX参考。当数据表比图表更合适，或可作为图表的补充呈现形式时，请参阅complex table UX参考。

强制准备工作

用户通过 /data-viz 启动此工作流。此技能激活后，加载 $frontend-design — 其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议 — 如果尚无设计上下文，则必须先加载 $setup。此外，还要了解：用户希望通过数据回答什么问题、受众是谁，以及数据是实时更新还是静态数据。

评估可视化需求

选择图表前，先理解数据所呈现的故事：

用户想要了解什么？
- 跨类别比较（条形图）
- 随时间变化的趋势（折线图）
- 部分与整体的关系（堆叠条形图或树图，极少使用饼图）
- 分布或范围（直方图、箱线图、散点图）
- 层级结构（树图、旭日图）
数据形态如何？
- 数据点数量（少量数值还是数千个）
- 系列或类别数量（单系列还是多系列）
- 时间粒度（每日、每月、每年）
- 数据是连续型还是类别型
使用场景是什么？
- 仪表盘（概览摘要）还是探索性分析（深度交互）
- 受众以移动端为先还是以桌面端为先
- 实时更新还是静态报告
- 无障碍要求（屏幕阅读器、色觉缺陷）

可视化维度

图表选择

根据数据关系选择图表，而非根据审美偏好。

条形图用于比较不同类别的数值。类别名称较长时使用横向条形图。数值轴从零开始。

折线图用于呈现随时间变化的趋势。线条数量限制在约 5 条以内。尽可能在线条末端直接标注。

散点图用于呈现两个变量之间的关系。只有在相关性确实时才添加趋势线。为值得关注的离群值添加标注。

直方图用于呈现频率分布。当数据形态（聚类、离散程度、偏斜）很重要时使用。

树图用于呈现包含许多类别的层级部分与整体关系。

避免使用饼图，除非类别极少且有一块明显占主导。即便如此，也优先选择环形图或堆叠条形图。

无障碍数据呈现

每张图表都必须提供无障碍替代方案。

在可视化之前提供主要洞察的文字摘要
提供标记规范的数据表作为备用方案（<caption>、<th scope="...">）
使用 aria-describedby 将图表与摘要关联
确保用户可通过键盘在数据点之间导航，并能听到数值播报
不要仅依赖颜色；应使用图案、纹理或直接标注

颜色策略

有意识地在数据可视化中使用颜色。

顺序色阶：用单一色相的明暗变化表示数值大小（密度、体量）
发散色阶：用两种色相和中性色中点表示相对中心的偏差（方差、盈亏）
分类色阶：为不同组别使用区分度最高且亮度一致的色相
避免红绿搭配；改用蓝橙或紫黄
使用色觉模拟器测试调色板

响应式行为

图表在不同视口尺寸下都必须清晰易读。

在中等尺寸布局中简化图例并旋转标签
在窄屏布局中考虑切换图表类型（改用横向条形图，而非纵向条形图）
利用交互功能弥补：支持双指缩放、点击查看精确数值，默认显示摘要视图
在最小宽度下测试截断和换行行为

交互设计

点击或轻触图例项可切换数据系列的显示状态
悬停或聚焦时突出显示某个数据系列，并弱化其他系列
使用刷选或拖动来选择时间范围并缩放
点击数据点可在面板或相邻视图中显示详细信息
筛选或缩放后提供“重置视图”选项
更新实时图表时避免整体重新渲染；仅为发生变化的元素添加动画

仪表板设计

仪表板将多个可视化内容整合在一个一目了然的界面中。

布局原则：

将最重要的指标放在左上方（适用于从左向右阅读的用户）
通过邻近布局和统一尺寸，在视觉上将相关图表分组
同一类别在所有图表中使用一致的配色
留出充足空间；过于密集的仪表板会让人不堪重负，而非传达信息

交互性：

全局筛选器（日期范围、类别）应同时更新所有图表
点击图表元素应更新详细信息面板或相关图表
避免在没有明确提示的情况下自动刷新仪表板；显示“上次更新时间”戳

反模式

图表垃圾：装饰性的 3D 效果、渐变、阴影和不必要的网格线会遮蔽数据
双 y 轴：容易造成误导性比较。应改用并排图表
截断 y 轴：从零以上开始会夸大差异，造成视觉误导
数据系列过多：包含 10 条以上线条的图表会变得难以阅读。应分组、筛选或拆分
切片过多的饼图：人类难以准确感知角度
未说明原因的缺失数据：应在视觉上将数据缺口与零值区分开来
没有图案辅助的颜色编码：色盲用户无法区分仅靠颜色编码的数据系列
没有静态回退方案的动画图表：自动播放的动画会让需要稳定参照的用户感到烦恼
将工具提示作为唯一数据来源：触摸操作不便或行动不便的用户可能难以触发工具提示
缺乏上下文的图表：没有比较对象、基线或单位的数字毫无意义