银行 App 设计:首页改版前后对比
一个看起来像信用卡广告的银行首页,以及让余额当主角的修正版。每处改动并排对比,附上背后的理由,还有免费的 Figma 文件。
银行 App 的首页必须在一秒内回答一个问题:我有多少钱?下面的初稿是一张好看的渐变卡片,但除了余额,最大的元素竟然是卡号,操作按钮有六种颜色,几乎每一笔交易都是红色。它看起来像一则信用卡广告。
修正版保留了品牌紫色和所有功能。它把颜色花在最重要的数字上,让其他一切安静下来。
整个屏幕的前后对比
新手初稿
修正后
左边,这张卡就是一张卡:余额、遮盖的卡号、持卡人姓名、有效期和 VISA 标志,全都堆在一个渐变上。下面是六种颜色的六个操作圆圈,再往下是一列平铺的交易,每笔支出都是红色,每个商户都有自己的 logo 颜色。
右边,这张卡就是余额。它有账户名称、以元为单位的数字、一行说明本月变化的文字,后四位数字缩在角落里。下面的一切都更平静,所以视线第一眼就落在余额上。
| 新手初稿 | 修正后 | |
|---|---|---|
| 卡片显示内容 | 余额、卡号、持卡人、有效期、VISA 标志 | 账户名称、余额、本月变化、后四位数字 |
| 快捷操作 | 6 个,6 种颜色 | 3 个,一个实心,两个朴素 |
| 列表中的红色 | 每笔支出 | 没有 |
| 列表中的绿色 | 收入 | 仅收入 |
| 交易图标 | 5 种品牌颜色 | 1 种图标风格,使用品牌浅色 |
| 标签页 | 4 个外加一个悬浮按钮 | 4 个 |
修正 1:把紫色花在余额上
之前
之后
左边:“总余额”配眼睛图标,$12,450.80 字号统一,一排星号加 4821,“持卡人”和“有效期”,以及亮色渐变上的 VISA 标志。右边:角落里的“主账户”和 4821,$12,450 配较小的 .80,还有深紫色上的“本月 +$320.50”胶囊标签。
初稿把品牌渐变用在一张看起来就是卡片的卡片上,所以第一印象是“这是一张信用卡”。余额的字号最大,但卡号、持卡人姓名、有效期和 VISA 标志都在争夺卡片的同一块区域。这些信息大多是用户早就知道的,或者只在网上支付时才需要。
修正版保留同样的紫蓝色系,但只让它服务于一个想法。元是 42 pt,分是 22 pt,因为 $12,450 是你要读的数字,.80 只是细节。一个胶囊标签显示本月的变化,这是人们看完余额后会问的第二个问题。卡号缩成角落里遮盖的“4821”,足够分辨这是哪个账户。
可复用的规则:品牌色很吵的时候,只给它一份工作。
修正 2:三个操作,而不是六个
之前
之后
左边是蓝、绿、橙、粉、紫、灰六个圆形图标:转账、收款、充值、缴费、兑换和更多。右边是三个宽按钮:实心的转账,以及朴素白色的收款和充值。
六种颜色配六个操作,等于在说“它们同样重要,而且各不相同”。其实两者都不是。留下的三个是每个账户都需要的:转账、收款和充值。缴费、兑换和更多从这个屏幕上消失了,新的“支付”标签页为这类操作提供了专属的位置。
修正版还给这三个操作建立了层级。转账用品牌色填充,因为这是人们来这里的目的。收款和充值很朴素,在那里却不喊叫。按钮很宽,容易点中,标签放在图标旁边而不是下面。
修正 3:交易按天分组,颜色要有意义
之前
之后
左边是平铺的五笔交易,每笔都有彩色品牌圆圈、“Oct 22, 2026 at 09:41 AM”这样冗长的时间戳,以及红色或绿色的金额。右边是“今天”和“昨天”两组,各自放在一张白色卡片里,配紫色字母方块,每个名称下面有分类,金额为黑色,只有一笔绿色的 +$2,500.00。
红色意味着停止。把每笔支出都标红的银行 App,会把正常的生活,比如视频订阅、打车、一杯咖啡,变成一排小警报。修正版让支出保持普通文字,只把绿色留给唯一的好消息:收入。
时间戳也变了。每行都写完整的日期和时间,大多是重复信息。按“今天”和“昨天”分组,日期只说一次,每行的第二行则说明这笔付款是做什么的:“订阅”“交通”“工资”。这才是人们扫视列表时真正想问的问题。
商户也失去了品牌颜色。红色的 N、黑色的 U、绿色的 S 和橙色的 A 看起来很活泼,却把列表变成了一道没什么可说的彩虹。一个带字母的浅色方块让每行保持整齐,你读到的就是金额和名称。
修正 4:四个标签页,不要悬浮加号
之前
之后
左边是首页、卡片、一个大的悬浮加号按钮、统计和我的。右边是首页、卡片、支付和我的,当前标签页为紫色。
悬浮加号按钮在问:“添加什么?”在银行 App 里,它可能意味着转账、收款、添加卡片或充值,用户得点开才知道。它还压在内容上面,把标签栏劈成两半。
修正版把它换成一个叫“支付”的标签页,背后是什么一目了然。统计离开了标签栏,余额卡片则带上了其中人们每天都会看的那个数字:本月变化。
那些较小的修正
- 只有一个图标的顶部栏。 初稿在问候语旁边放了二维码、铃铛和设置图标。修正版只保留铃铛。
- 真正的首字母头像。 带“AM”的紫色圆圈是纯品牌紫,所以能从背景中凸显出来。
- 一个边距和一套间距比例。 各行使用 20 点边距,间隙取自一个简短的清单。
- 更平静的问候语。 “Good Morning, Alex Moreno!”带着大写的 M 和感叹号,变成了“Good morning”加一个名字。
- 会分组的卡片。 每天的交易放在一个白色容器里,行与行之间有细分隔线,组与组之间没有。
审视你自己的银行 App
| 问题 | 为什么重要 |
|---|---|
| 余额是屏幕上最大的元素吗? | 这是人们打开 App 想要回答的问题 |
| 分比元小吗? | 分是细节,不是标题 |
| 红色只出现在出问题的地方吗? | 正常消费不是错误 |
| 操作之间有层级吗? | 六个同等的选择等于没有选择 |
| 首页真的需要显示卡号吗? | 后四位提示足以识别账户 |
| 有没有标签页或按钮需要靠文字才能理解? | 悬浮加号会让人猜 |
获取 Figma 文件
这个免费文件包含两个屏幕、每个修正部分的前后对比组件、UI 颜色变量、iOS 文本样式,以及一份带有致谢的说明文件。
免费 Figma 文件
银行首页改版前后对比
两个屏幕和每个修正部分的 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。
FAQ
银行 App 首页应该先显示什么?
余额,要大,再配一行简短的说明本月的变化。接下来是快捷操作,然后是最近的交易。
银行 App 应该有多少个快捷操作?
三个就很好:转账、收款和充值。把最常用的做成实心,其他的保持朴素,较少用的操作移到“支付”标签页。
银行 App 里的支出应该是红色吗?
不应该。红色读起来是警告,而日常消费不是。让支出金额保持普通文字,只用绿色表示收入。
银行 App 首页上的卡号应该怎么显示?
遮盖并缩小,只显示后四位数字,让人能分辨正在看的是哪个账户。完整信息应放在卡片页面。
银行 App 应该有悬浮加号按钮吗?
通常不要。加号没说它添加什么,所以换成有文字标签的标签页,比如“支付”。
来源
- 两个屏幕都是我们自己的作品,在 Figma 中设计和测量。商户名称都是通用示例。
- 最初作为轮播图发布在 App Brainy。
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
