预测分析Predictive Analytics
历史实线 + 预测虚线 + 置信区间带,异常点高亮。必须标注模型版本与不确定性,否则容易被误读为确定结论。
典型场景需求预测 · 风险管理 · 增长建模
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质,决定了界面的气质。
同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
历史实线 + 预测虚线 + 置信区间带,异常点高亮。必须标注模型版本与不确定性,否则容易被误读为确定结论。
关键词
效果与动效
Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations
设计系统变量
--forecast-dash5 5--confidence-opacity0.2--anomaly-color#F59E0B--prediction-color#8B5CF6--scenario-toggle-width48px--ai-accent#6366F1配色方案
色值取自风格数据,不足时补充主题令牌主色 / Primary
Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors
辅色 / Secondary
High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)
强调色在页面底色上的对比度约 4.0:1,适合大字与图形,正文需另配深色。
适用场景
适合 / Best For
- Forecasting dashboards
- anomaly detection systems
- trend prediction dashboards
- AI-powered analytics
- budget planning
避开 / Do Not Use For
- Historical-only dashboards
- simple reporting
- real-time operational dashboards
框架兼容
能力矩阵
实现要点
落地清单
- Forecast line distinct,
- Confidence bands visible,
- Anomalies highlighted,
- Scenarios switchable,
- Predictions dated,
- Accuracy shown
CSS / 技术关键词
stroke-dasharray for forecast lines, fill-opacity for confidence bands, anomaly markers (circles), tooltip for predictions, toggle switches for scenarios, gradient for probability
AI 提示词
Design a predictive analytics dashboard. Use: forecast lines (dashed), confidence intervals (shaded bands), trend projections, anomaly highlights, scenario toggles, AI insight cards, probability indicators.