财务看板Financial Dashboard
金额对齐、千分位、正负色与等宽数字是底线；同比/环比与预算差异并列呈现。红色需按财务语义使用，避免与品牌红冲突。
典型场景财务系统 · 交易终端 · 预算管理
编号36
年代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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
金额对齐、千分位、正负色与等宽数字是底线；同比/环比与预算差异并列呈现。红色需按财务语义使用，避免与品牌红冲突。
关键词
Revenue metricsprofit/loss visualizationbudget trackingfinancial ratiosportfolio performancecash flowaudit trail
效果与动效
Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions
设计系统变量
--currency-symbol$--decimal-places2--profit-color#22C55E--loss-color#EF4444--variance-threshold10%--table-header-bg#F3F4F6配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)
辅色 / Secondary
Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)
强调色在页面底色上的对比度约 7.9:1，可用于正文与图标。
适用场景
适合 / Best For
- Financial reporting
- accounting dashboards
- portfolio tracking
- budget monitoring
- banking analytics
避开 / Do Not Use For
- Simple business dashboards
- entertainment/social metrics
- non-financial data
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配不建议
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Currency formatted,
- Decimals consistent,
- P&L clear,
- Budget variance shown,
- Audit trail complete,
- Export to Excel
CSS / 技术关键词
number formatting (Intl.NumberFormat), waterfall chart (positive/negative bars), variance coloring, table with totals row, sparkline for trends, sticky column headers
AI 提示词
Design a financial dashboard. Use: revenue/expense charts, profit margins, budget vs actual, cash flow waterfall, financial ratios, audit trail table, currency formatting, period comparisons.