销售智能看板Sales Intelligence Dashboard
按阶段呈现管道金额与赢单率，配合排行榜、配额进度与预测准确度。个人与团队视图要能一键切换。
典型场景CRM · 销售管理 · 业绩复盘
编号37
年代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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
按阶段呈现管道金额与赢单率，配合排行榜、配额进度与预测准确度。个人与团队视图要能一键切换。
关键词
Deal pipelinesales metricsterritory performancesales rep leaderboardwin-loss analysisquota trackingforecast accuracy
效果与动效
Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights
设计系统变量
--pipeline-colorsstage gradient--gauge-track#E5E7EB--gauge-fillprimary--rank-1-color#FFD700--rank-2-color#C0C0C0--rank-3-color#CD7F32配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)
辅色 / Secondary
Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors
强调色在页面底色上的对比度约 5.9:1，可用于正文与图标。
适用场景
适合 / Best For
- CRM dashboards
- sales management
- opportunity tracking
- performance management
- quota planning
避开 / Do Not Use For
- Marketing analytics
- customer support metrics
- HR dashboards
框架兼容
rechartschartjs
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Pipeline stages shown,
- Deals draggable,
- Quotas visualized,
- Rankings updated,
- Territory clickable,
- CRM integration
CSS / 技术关键词
kanban columns (flex), gauge chart (SVG arc), leaderboard ranking styles, map integration (Mapbox/Google), timeline vertical, deal card with status border
AI 提示词
Design a sales intelligence dashboard. Use: pipeline funnel, deal cards (kanban), quota gauges, leaderboard table, territory map, win/loss ratios, forecast accuracy, activity timeline.