对比分析看板Comparative Analysis Dashboard
同屏并列两组数据：主序列蓝、对照橙/紫，差值用箭头与徽章标注。避免双 Y 轴误导，差异要能被颜色和方向同时读出。
典型场景竞品分析 · A/B 实验 · 期间对比
编号33
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
同屏并列两组数据：主序列蓝、对照橙/紫，差值用箭头与徽章标注。避免双 Y 轴误导，差异要能被颜色和方向同时读出。
关键词
Side-by-side comparisonsperiod-over-period metricsA/B test resultsregional comparisonsperformance benchmarks
效果与动效
Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare
设计系统变量
--positive-color#22C55E--negative-color#EF4444--neutral-color#6B7280--comparison-gap2rem--arrow-size16px--badge-padding4px 8px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)
辅色 / Secondary
Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors
强调色在页面底色上的对比度约 4.9:1，可用于正文与图标。
适用场景
适合 / Best For
- Period-over-period reporting
- A/B test dashboards
- market comparison
- competitive analysis
- regional performance
避开 / Do Not Use For
- Single metric dashboards
- future projections (use forecasting)
- real-time only (no historical)
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Period selector works,
- Deltas calculated,
- Colors meaningful,
- Benchmarks shown,
- Mobile stacks properly,
- Export comparison
CSS / 技术关键词
display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping
AI 提示词
Design a comparison dashboard. Use: side-by-side metrics, period selectors (vs last month), delta indicators (+/-), benchmark lines, A/B comparison tables, winning/losing highlights, percentage change badges.