用途:设计能澄清数据而非装饰数据的可视化,帮助用户理解模式、比较数值并做决策。
主要能力:提供图表类型选择、响应式模式、无障碍数据表、色觉友好配色与交互设计参考;在语义状态、图表配色或分类颜色需在色觉缺陷下保持可区分时参考色盲 UX 资料;当数据表比图表更合适或需互补时参考复杂表格 UX 资料。
使用方式:必须先阅读 frontend-design 并遵循其 Context Gathering Protocol,复用已有上下文,仅询问关键缺口;还需收集用户想用数据回答的问题、受众是谁、数据是实时更新还是静态。随后评估数据故事与数据形状,再选择图表:分类比较用条形图(长分类名用水平条,数值轴从零开始)、时间趋势用折线图(约 5 条以内,尽量在末端直接标注)、两变量关系用散点图(仅在相关性真实时加趋势线,标注异常值)、频率分布用直方图、多分类层级部分整体关系用矩形树图;除极少数类别且某切片明显占优外避免饼图。
无障碍与配色:每个图表须有可访问替代方案,包括可视化前的文字摘要、带 caption 和 th scope 的数据表回退、用 aria-describedby 关联摘要、键盘导航与可听值播报,不能仅靠颜色,需用图案、纹理或直接标注。配色上,连续量表用单色相明度变化,发散量表用双色相加中性中点,分类量表用最大区分度且亮度一致的色相;避免红绿组合,改用蓝橙或紫黄,并用色觉模拟器测试。
响应式与交互:图表需在各视口可读,中等布局简化图例并旋转标签,窄布局可切换图表类型(如水平条替代垂直条),用缩放、显式取值、默认摘要视图等交互补偿,并测试最小宽度下的截断与换行。交互包括图例切换系列、悬停或聚焦高亮、刷选时间范围缩放、点击数据点显示详情、提供重置视图,实时图表只动画变化元素。
仪表盘:重要指标放左上,相关图表就近分组并统一尺寸,同一分类跨图配色一致,留出呼吸空间;全局筛选应同时更新所有图表,点击图表元素更新详情面板,避免无提示自动刷新并显示最后更新时间。
限制与反模式:避免图表垃圾(3D、渐变、阴影、多余网格线)、双 Y 轴、截断 Y 轴、过多数据系列、多切片饼图、无说明的缺失数据、仅靠颜色、无静态回退的动画、仅靠工具提示提供数据、无上下文的图表。发布前需核对图表类型匹配数据关系、条形图 Y 轴从零开始、色觉缺陷下颜色可区分、有无障碍数据表回退、有文字摘要、窄视口可读、交互支持键盘与粗细指针、工具提示增加精度、实时更新不迷惑用户、可视化回答具体用户问题。
资料未提供具体安装命令、收费、价格、平台或效果信息。