页面采用Z型布局：左上余额→右上收入→左下支出→右侧图表。80%用户只看前两个模块就离开，但需要明细的用户可以继续滚动。每个模块用 IntersectionObserver 控制入场动画，避免一次性信息过载。
核心数字使用 countUp 动画（1.2秒 ease-out），让数据"活起来"。用户打开页面3秒内必须获得"我还剩多少钱"的答案——这是 Nielsen Norman Group 的 3-second rule。
收入=绿（安全）、支出=红（警觉）、预算=蓝（理性）。6种消费分类 ≤8色（Miller's Law: 7±2），避免认知过载。背景色 #f8fafc 是 Tailwind 的 gray-50，比纯白减少眼疲劳。
FAB记账按钮56px（>44px最小触控），放在右下角拇指热区。点击弹出底部Sheet而非跳转页面——保持"仪表盘掌控感"。3步完成记账：金额→分类→确认。