data-viz

详细介绍

创建能够阐释数据而非仅作装饰的数据可视化。目标不是让数据看起来引人注目，而是帮助用户理解模式、比较数值并做出决策。

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

必须完成的准备工作

阅读 frontend-design，并遵循其上下文收集协议。重用可用上下文，只针对会产生重大影响的信息缺口提问。此外，还要了解：用户希望通过数据回答什么问题、受众是谁，以及数据是实时更新还是静态数据。

评估可视化需求

选择图表前，先理解数据所讲述的内容：

用户想要了解什么？
- 比较不同类别（条形图）
- 了解随时间变化的趋势（折线图）
- 展示部分与整体的关系（堆叠条形图或树图，尽量少用饼图）
- 展示分布或范围（直方图、箱线图、散点图）
- 展示层级结构（树图、旭日图）
数据的形态是什么？
- 数据点数量（少量数值还是数千个）
- 系列或类别数量（单系列还是多系列）
- 时间粒度（按日、按月、按年）
- 数据是连续型还是类别型
使用场景是什么？
- 仪表板（快速浏览摘要）还是探索性分析（深度交互）

预期的视口范围、密度需求和主要输入方式
- 实时更新还是静态报告
- 无障碍需求（屏幕阅读器、色觉缺陷）

可视化维度

图表选择

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

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

折线图用于展示随时间变化的趋势。最多使用约 5 条线。尽可能在线条末端直接标注。

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

直方图用于展示频数分布。当数据的形状（聚类、离散程度、偏斜）很重要时使用。

树图用于展示包含多个类别的层级式部分与整体关系。

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

无障碍数据呈现

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

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

色彩策略

在数据可视化中有目的地使用颜色。

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

响应式行为

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

在中等尺寸布局中简化图例并旋转标签
考虑在窄屏布局中切换图表类型（改用横向条形图，而非纵向条形图）
利用交互进行补偿：缩放控件、显式显示数值、默认显示摘要视图
在最小宽度下测试截断和换行行为

交互设计

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

仪表盘设计

仪表盘将多个可视化图表组合在一个一目了然的界面中。

布局原则：

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

交互性：

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

反模式

图表垃圾：装饰性的 3D 效果、渐变、阴影和多余网格线会遮挡数据
双纵轴：容易引发误导性比较。请改用并排图表
截断的纵轴：纵轴从非零值开始会夸大差异，造成视觉误导
数据系列过多：包含 10 条以上曲线的图表会变得难以阅读。请分组、筛选或拆分
包含许多扇区的饼图：人眼难以准确感知角度
未加说明的缺失数据：应通过视觉方式区分数据缺口和零值
仅依赖颜色区分：色盲用户无法区分纯粹通过颜色编码的系列
没有静态备用方案的动态图表：自动播放的动画会让需要稳定参考点的用户感到困扰
将工具提示作为唯一数据来源：使用粗指针设备或行动不便的用户可能难以触发工具提示
缺乏上下文的图表：没有比较基准、参照线或单位的数值毫无意义