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

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

核心结论

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

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

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

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

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

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

预算页上方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逐项列类别，下方还有预算构成与行为提示。建议区域适合指出相关观察，但应能回查其使用的期间和记录。把摘要、比较与建议分为连续层次，比让每张卡各自给一个没有来源的结论更容易理解。

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

流水页将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%，与构成图的语义不符。资料卡复用时，不能只替换外观与标题；应同时核对字段、数值、单位和当前页面身份。

常见问题

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

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

设计检查清单

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