本文相关产品
WeTally: 一款极简风格的记账软件
在忍受不了众多记账软件的开屏广告、非原生的UI设计以及完全搞不清楚什么功能在哪里找之后,最终我还是打开 Xcode 开发了自己心中所想的记账 app。作为从大学到硕士的穷苦读书人,本身每月可开销的钱就很少,如果不好好管理自己的支出很容易变成月光一族。实际上大学的时候就因为忍受不了某记账软件的开屏广告打算写一个记账类的 app 了,后面保研之后过于兴奋去游山玩水也就耽搁了,现在总归是还愿了。
如前所述,开屏广告是我目前最痛恨且又无动于衷的,有些时候明明放着广告什么操作都没有,就会莫名其妙地跳转到 Safari,打开对应的广告,这要是我关掉 Safari 回到那个软件能继续进入主界面我也就认了,奈何周而复始,跳转到 Safari 好多次都进不去主页面。无奈之下,杀后台后勉勉强强才能进去。吐槽了一大堆,只为了表达我的一个核心设计理念:在我设计的记账 app 内绝对不能出现任何广告,哪怕我用爱发电也不要广告。下面介绍一下 WeTally 这款记账 app 的一些基本情况。
WeTally的设计风格
我是一个搞 iOS 原生的业余选手,目前使用 Swift 编程语言配合 SwiftUI 进行开发。在我总结了这么多年的记账习惯之后,我发现目前本人记账就只进行以下几件事情:
- 花钱之前看看余额,看看本月还能花多少钱:想吃顿大餐?看看余额,哟,还有蛮多钱的嘛,吃!
- 花完这笔钱之后,到月底每天还能花多少钱:想吃海底捞,一顿海底捞300,看看花完之后会怎么样。什么?每天只能喝西北风了?算了算了,省钱要紧。
- 记录一笔支出或者收入:这算是记账最核心的部分了,有这些记录,才能更好的帮助自己回忆当初为啥要花这些冤枉钱。
如何将这三件最常用的事情整合在一个界面并且在设计上显得优雅?我想到了 Apple Wallet 应用。我平时非常喜欢 Apple 的设计风格,经常在自己的项目中模仿或者复现 Apple 的一些UI界面。这次我打算将 iPhone 手机上自带的钱包 app 的设计搬入到这个记账的 app 内。
账本详情界面的设计
Apple Card 的使用界面是一个非常优秀的范例,里面包含了最近的交易记录,存款以及每周图表(参考图片1),完全符合我想要的设计。
模仿这个界面,我在 WeTally 中将中间的三个部分分别更改为了三个主要的功能(参考图片2):
- 今日的开销情况与本月的开销情况;
- 每周的开销图表;
- 到月底每天还能进行的理论开销。
当然不同的公司发工资的时间不一定是在月底,或者有些人想自己设置每月的起始日,设定账本起始日的功能我也包含在 WeTally 内部了。就比如我,我通常是每月 18 号才会有一笔新的收入,所以我只要保证到下一个月 18 号之前别把钱花光就行。
WeTally主页面的设计
当然软件的主界面实际上也参考了钱包 app 的设计,不过在动画效果上有些不太一样,你可以根据需要调整修改账本显示的风格(参考图片4)。
支出/收入分析界面的设计
虽然一般情况下正常人都只是机械地重复以下三个步骤:
- 打开记账 app;
- 记录一笔支出/收入;
- 关闭记账 app,打开其他社交类 app。
但是突然有一天,你发现自己怎么开始喝西北风了,这个时候如果你想追根溯源找到开销的前几名,那就需要使用高级一些的功能了:收入支出分析。
我把收入与支出分析按三个板块分别做了一个界面,这三个板块分别为:
- 日支出/收入分析
- 周支出/收入分析
- 月支出/收入分析
为什么要分成三个板块而不整合成一个板块?当然是因为账本详情界面上有对应的三个基本视图啦,需要将这三个视图利用起来。点按任意一个视图就可以查看对应的详情分析,具体的视图设计风格请参考图片5。支出/收入分析界面我参考了 Apple 的健康 app 中关于步数的设计。
小组件的设计
当你要花钱的时候,其实不用打开余额才会让你死心,只需要在锁屏界面上看看你今天花了多少钱实际上就能忍住不花钱。小组件的支持是一款记账 app 必不可少的功能,它可以让人在不打开 app 的情况下看到一些开销情况。小组件的设计风格(参考图片6)我是模仿 Apple 健康 app 中睡眠模块的,所以在主屏幕上连高亮颜色都一样。
账本详情等其他界面
其他部分界面大体上都是模仿钱包 app 的,如果你属于重度 Apple 粉,那么在使用 WeTally 的时候应该会一种莫名的熟悉感。有些设计个人目前还不是太满意,如果偶然间看到比较好的设计,后续版本中会进行更新。
写在最后
WeTally 实际上是为我一个人服务的,我是根据个人的使用情况开发的。如果你感兴趣,可以在 App Store 上下载并试用 WeTally。如果你觉得 WeTally 好用或者有什么地方可以改进的,欢迎分享给周围的朋友并在 App Store 上留言。
The End