# 个人财务看板设计：青绿卡片里的不同口径

原网页：https://www.jvds.cn/share/ui-design/personal-finance-dashboard-context-u132
语言：zh-CN
发布：2026-10-21
作者：界达设计工作室（JVDS）

WealthWise的个人财务看板把净资产、预算、流水与订阅放进一套白灰卡片里，青绿色作为主要数据颜色。统一视觉使页面整洁，却也让很多不同性质的数字看起来很接近。读这组设计，关键是识别每张卡回答的问题：金额是当前余额还是一段时间的支出，圆环是评分还是构成比例，订阅是周期计划还是已经发生的交易。

## 核心结论

- 固定侧栏与独立卡片将总览、预算和流水分开，青绿颜色建立共同视觉。
- 日期、指标名与比较对象决定数字含义，图表形态不能单独解释口径。
- 周期交易和订阅管理有不同信息任务，应从摘要接到可核对记录。

## 总览将多种问题分到各张卡

总览左侧固定导航，Dashboard被白底选中，主区上方将Net Worth与AI Financial Health Score并排。净资产卡先给342,847，再分出收入支出小卡；评分卡则用短线圆环显示72%，旁边有几条说明。金额与评价因此有各自容器，不需要在一个巨大图表里混读。

中部Cash Flow Visualization用流向关系连接收入来源与支出类别，Net Spending用环形分布展示构成，底部还有Upcoming Bills和投资表现。不同图表适合不同问题：流向看来源去向，圆环看部分比例，账单列表看即将发生的对象。容器右上局部日期或过滤入口也让每项资料有独立调整的位置。

评分标题下却写Saved，容易让72%被理解成储蓄比例。读者需要知道这是评分、目标进度还是其他指标。JVDS更偏好让[指标名、单位和简短定义](https://www.jvds.cn/share/ui-design/dashboard-metric-selection)一起出现，再决定用圆环还是数字卡；形式越统一，字段含义越应精确。

![青绿色财务总览里的净资产、评分圆环、现金流和支出分布](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i1.webp)

多种图表各答一个问题，标题和单位负责区分含义。

## 预算摘要与跨月图需要相同范围

预算页上方Monthly Budget、Actual Spending与Savings Rate三卡并列，分别使用小柱图、折线与百分比摘要。下方Budget vs Actual给出两条曲线，日期入口在右，提示卡同时列出June的预算22,352与实际17,642。颜色把两种系列分开，提示卡让同一时间点可以直接对照。

上方预算7,500、实际6,845旁写97.8% of budget。如果按这两个可见金额计算，约为91.3%，并不等于97.8%。下方跨月图的金额又处于不同数量级，需要说明是否是不同范围、账户或示例状态。大字与曲线已经可读，比较口径仍要一致，才能让比例和趋势一起解释。

右侧Recommendations逐项列类别，下方还有预算构成与行为提示。建议区域适合指出相关观察，但应能回查其使用的[期间和记录](https://www.jvds.cn/share/ui-design/dashboard-data-visualization-mistakes)。把摘要、比较与建议分为连续层次，比让每张卡各自给一个没有来源的结论更容易理解。

![预算摘要、Budget vs Actual双曲线与推荐区](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i2.webp)

双曲线提供对照位置，摘要比例要与对应金额和期间一致。

## 周期计划与近期流水各有时间意义

流水页将Total Balance、Monthly Recurring与This Month放在顶端。Recurring Transactions列表保留服务名称、Next日期、金额和Monthly，右侧Weekly Spending按一周的日子画柱图，下方Recent Transactions再列Date、Description、Amount、Status与Receipt。计划性支出、周内观察和具体记录分处不同区域。

独立订阅卡进一步展示Monthly、Annual、Next renewal与Usage，并提供Manage Subscription。它可以成为周期摘要的深入入口，但需要与近期流水说明关系：续订计划与已发生或Pending记录并不是同一种状态。管理动作之后，也应能回到同一服务看到更新结果。

导航选中Transactions，页头却仍写Budget & Spending，标题需要校对。下方另一个资产构成示例还将多个类别都标成62%，与构成图的语义不符。资料卡复用时，不能只替换外观与标题；应同时核对字段、数值、单位和当前页面身份。

![周期交易、周支出、近期流水与独立订阅卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i3.webp)

计划、发生与管理分开呈现，标题及比例也要随资料同步。

## 常见问题

### 同一财务看板可以让各张卡单独选日期吗？

可以，但要让当前期间始终可见。跨卡比较时，最好能确认是否使用相同范围；若不同，应在摘要或提示里说明，避免把相似图形当成同一口径。

## 设计检查清单

- 为金额比例和评分明确指标定义、单位及时间。
- 验算预算与实际比例，核对摘要和趋势图的范围。
- 分清续订计划、交易状态和管理结果，校对页面标题。

## 先整理财务信息口径再安排图表

如果个人财务产品需要将预算、流水和订阅整合进工作台，界达设计工作室（JVDS）可协助UI/UX设计与网站设计、开发，梳理数据定义与页面层次。

可以从现有字段和记录出发，讨论哪些适合概览、比较或进一步管理。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)