记账应用设计:预算仪表盘改版前后对比

人们打开预算应用只为了知道一件事:我还能花多少。下面的初稿什么都想报告。那个数字藏在四个等大方框的最后一个里,只有 10 px;支出是八块饼图,图例只有 8 px;交易记录是 9 px 的五列表格。

修复版保留了所有功能,只改了顺序。数字排第一,而且超大;饼图变成一条扁平的条;表格变成四行人人读得清的普通行。

整个屏幕,改前改后

新手初稿

修复后

左边没有任何东西在带头。四个方框、一张饼图、一张柱状图、一行筛选和一张表格,分量都差不多,而唯一那个问题的答案,是第四个框里 10 px 的数字。眼睛得扫完整个屏幕才能找到它。

右边,屏幕按顺序作答:还剩多少,剩下的钱去哪了,最近发生了什么。一个数字很大,其余都是朴素文字,每个元素只承担一项颜色任务。

改了什么,量化对比

修复 1:先放还能花多少

之前

之后

一排四个等大的小方框:收入 $4,200 绿色、支出 $1,916 红色、储蓄 $1,000 蓝色、余额 $1,284 黑色,全都是 10 px;对比超大粗体的 $1,284,下面灰色小字写着剩余(预算 $3,200)和还有 12 天。

四个方框让每个数字一样大,所以没有一个是答案。用户得自己知道余额才是重点,然后还要在 10 px 下去读它。

修复版只选一个。$1,284 用 48 px 粗体,下面一行带着让它有意义的两个事实:它来自的预算 $3,200,以及本月剩余天数。没有预算的数字只是冷知识,有了预算,用户才知道该不该担心。

数字是对得上的,没有为了凑版面而编造。收入 $4,200 减去储蓄 $1,000 就是 $3,200 的预算,花掉 $1,916 还剩 $1,284。收入和储蓄移到了统计标签页。

可复用的规则:找出用户打开这个屏幕所要看的那一个数字,让它成为屏幕上最大的东西,再用一行字在下面写出背景。

修复 2:用一条扁平的条代替饼图

之前

之后

一张大饼图,八块彩色扇形,标着房租、餐饮、娱乐、交通、购物、健康、账单和订阅,带微小的图例和百分比;对比一条细的堆叠条,颜色为靛蓝、珊瑚、琥珀和青色,末端是浅色,两列两行图例为房租 $1,100、餐饮 $412、娱乐 $186 和其他 $218,下面是三行带细条的预算。

饼图在最好的情况下也难读,因为人们比较角度很不准。八块只会更糟。其中五块各占几个百分点,成了细条,而标注它们的图例只有 8 px。

条是从左往右读的,像进度条,谁都已经懂。它按 $3,200 预算的比例绘制,所以浅色末端就是还剩的 $1,284,屏幕用两种形式把同一个数字展示了两次。五个小分类合并为其他,$218,并在预算页里展开。各块加起来是对的:1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 等于 $1,916。

预算就在下面,是朴素的行:一个名称、"$412 / $600"和一条 4 px 的条。条向着上限填充,所以能看出用户离上限有多近。饼图做不到。

可复用的规则:各部分加起来是一个整体时,用一条条;把小的部分归入其他。

修复 3:四行,而不是一张表

之前

之后

一个交易标题,带全部、收入和支出筛选按钮,下面是五列表格:日期、商家、分类、方式和金额,十行 9 px 文字,一个浮动的珊瑚色加号按钮盖住了最后几个金额;对比一个近期标题,带珊瑚色的查看全部,以及四行:Marlow Market 的青色 M、Reel House 的紫色 R、Alder Studio 的琥珀色 A(绿色收入)、Cityline Transit 的绿色 C。

9 px 的五列表格就是电子表格。在手机上,它要你眯着眼,还要沿着一行横着读,而浮动加号按钮压在金额列上,最后几个数字被盖住了。

首页放四行就够了。36 px 的圆圈里放商家首字母,让眼睛有东西可抓,商家名 15 px,分类 13 px 灰色,金额靠右。收入是列表里唯一的绿色,所以工资不用标签就很突出。日期、支付方式和筛选都从查看全部和每一行里打开,所以什么都没丢。

可复用的规则:首页展示最近几条,而不是完整历史。把筛选放到查看全部后面。

修复 4:让月份做标题

之前

之后

一行顶栏:菜单图标、珊瑚色的 Penny 字样、Dashboard 一词、2026 年 11 月下拉框、导出图标和带红点的铃铛;对比珊瑚色的小号 Penny 字标,下面是 28 点粗体、带箭头的 November,旁边是带红点的铃铛和珊瑚色加号。

初稿的顶栏把六样东西放在同一个字号:菜单、字标、什么都没说的"Dashboard"标签、下拉框、导出和铃铛。下拉框是人们真正会用的控件,却是最小的。

修复版给屏幕一个标题,而标题本身就是控件。"November"是 28 粗体加一个箭头,字标单独一行变小,加号从浮动按钮挪到了顶栏,放在铃铛旁边。菜单和 Dashboard 标签移到了个人资料标签页,导出移到了统计。

可复用的规则:如果主要控件是筛选,就让它当标题。

其他小修复

• 功能一个不少。 每周图表、收入和储蓄移到统计。五个小分类合并为其他,并与目标一起在预算页里展开。筛选、日期和支付方式从查看全部和每一行里打开。
• 边距一致。 初稿左 14 px,右 12 px。修复版两边都是 20。
• 没有方框。 修复版没有卡片、没有方块、没有阴影。靠留白和字体来分隔。
• 更少的标签。 四个标签放在带细线的 78 px 扁平栏里,取代五个实心线框混用的图标。
• 字号层级。 文字从 13 到 48 px,而初稿是 8 到 13 px。
• 内容下方留白。 修复版在标签栏上方 67 px 处结束,所以没有东西被截断或遮住。初稿里浮动加号压在表格上。

审查你自己的预算屏幕

获取 Figma 文件

免费文件包含新手初稿、修复后的屏幕,以及每个部分的组件。

免费 Figma 文件

记账应用屏幕改版,前后对比

两个屏幕和每个部分都是 Figma 组件。免费,仅供查看,可复制到你的草稿。

在 Figma 中打开

FAQ

记账应用的首页该怎么设计?

先放还能花多少,要大,下面一行写预算和剩余天数。然后是一条扁平的条表示钱花到哪了,几行朴素的预算,以及最近的四笔交易,其余的都放在查看全部后面。

支出分类用饼图还是条形图更好?

当各部分加起来是一个整体时,用扁平的堆叠条。人们读长度比读角度快,小分类也会作为条的一段保持可见,而不是一道细缝。把最小的归入其他。

预算图表该显示多少个分类?

三到四个。在这个屏幕里,五个小分类合并为其他,$218,并在预算页里展开,所以这条条保持清晰可读。

金融应用里的主数字该多大?

大到成为第一眼看到的东西。这里余额是 48 px 粗体,月份标题是 28 px,各行是 15 px。

首页应该显示多少笔交易?

四到五行,13 到 15 px,再加一个查看全部链接,用来看完整列表、筛选和支付方式。

预算应用的标签栏该放什么?

四个标签就够:首页、统计、预算和个人资料。目标放在预算里面。

来源

• 两个屏幕都是我们自己在 Figma 里设计并测量的。应用 Penny、它的商家和金额都是虚构的。两个屏幕上的数字前后一致:收入 $4,200 减去储蓄 $1,000 是 $3,200 的预算,花掉 $1,916 还剩 $1,284,还有 12 天指的是 11 月 18 日,也就是最新一笔交易的日期。
• 参考的模式:Copilot Money 和 Monarch,它们都是一个剩余可花数字、一条分类条、朴素的行和扁平的标签栏。
• 图标来自 Phosphor (MIT)。没有使用照片。
• 最初作为轮播图发布在 App Brainy。