在忍受不了众多记账软件的开屏广告、非原生的UI设计以及完全搞不清楚什么功能在哪里找之后,最终我还是打开Xcode开发了自己心中所想的记账app。作为从大学到硕士的穷苦读书人,本身每月可开销的钱就很少,如果不好好管理自己的支出很容易变成白领一族1与月光一族。实际上大学的时候就因为忍受不了某记账软件的开屏广告打算写一个记账类的app了,后面保研之后过于兴奋去游山玩水也就耽搁了,现在总归是还愿了。

如前所述,开屏广告是我目前最痛恨且又无动于衷的,有些时候明明放着广告什么操作都没有,就会莫名其妙地跳转到Safari,打开对应的广告,这要是我关掉Safari回到那个软件能继续进入主界面我也就认了,奈何周而复始,跳转到Safari好多次都进不去主页面。无奈之下,杀后台后勉勉强强才能进去。吐槽了一大堆,只为了表达我的一个核心设计理念:在我设计的记账app内绝对不能出现任何广告,哪怕我用爱发电也不要广告。下面介绍一下WeTally这款记账app的一些基本情况。

WeTally的设计风格

我是一个搞iOS原生的业余选手,目前使用Swift编程语言配合SwiftUI进行开发。在我总结了这么多年的记账习惯之后,我发现目前本人记账就只进行以下几件事情:

  1. 花钱之前看看余额,看看本月还能花多少钱:想吃顿大餐?看看余额,哟,还有蛮多钱的嘛,吃!
  2. 花完这笔钱之后,到月底每天还能花多少钱:想吃海底捞,一顿海底捞300,看看花完之后会怎么样。什么?每天只能喝西北风了?算了算了,省钱要紧。
  3. 记录一笔支出或者收入:这算是记账最核心的部分了,有这些记录,才能更好的帮助自己回忆当初为啥要花这些冤枉钱。

如何将这三件最常用的事情整合在一个界面并且在设计上显得优雅?我想到了Apple Wallet应用。我平时非常喜欢Apple的设计风格,经常在自己的项目中模仿或者复现Apple的一些UI界面。这次我打算将iPhone手机上自带的钱包app的设计搬入到这个记账的app内。

账本详情界面的设计

Apple Card的使用界面是一个非常优秀的范例,里面包含了最近的交易记录,存款以及每周图表(参考图片1),完全符合我想要的设计。

图片1: Apple Card详情界面

模仿这个界面,我在WeTally中将中间的三个部分分别更改为了三个主要的功能(参考图片2):

  1. 今日的开销情况与本月的开销情况;
  2. 每周的开销图表;
  3. 到月底每天还能进行的理论开销。
图片2: WeTally账本详情页面

当然不同的公司发工资的时间不一定是在月底,或者有些人想自己设置每月的起始日,设定账本起始日的功能我也包含在WeTally内部了。就比如我,我通常是每月18号才会有一笔新的收入,所以我只要保证到下一个月18号之前别把钱花光就行。

图片3: 账本起始日设置

WeTally主页面的设计

当然软件的主界面实际上也参考了钱包app的设计,不过在动画效果上有些不太一样,你可以根据需要调整修改账本显示的风格(参考图片4)。

图片4: WeTally主页面的设计

支出/收入分析界面的设计

虽然一般情况下正常人都只是机械地重复以下三个步骤:

  1. 打开记账app;
  2. 记录一笔支出/收入;
  3. 关闭记账app,打开其他社交类app。

但是突然有一天,你发现自己怎么开始喝西北风了,这个时候如果你想追根溯源找到开销的前几名,那就需要使用高级一些的功能了:收入支出分析。

我把收入与支出分析按三个板块分别做了一个界面,这三个板块分别为:

  1. 日支出/收入分析
  2. 周支出/收入分析
  3. 月支出/收入分析

为什么要分成三个板块而不整合成一个板块?当然是因为账本详情界面上有对应的三个基本视图啦,需要将这三个视图利用起来。点按任意一个视图就可以查看对应的详情分析,具体的视图设计风格请参考图片5。支出/收入分析界面我参考了Apple的健康app中关于步数的设计。

图片5: 支出/收入分析界面

小组件的设计

当你要花钱的时候,其实不用打开余额才会让你死心,只需要在锁屏界面上看看你今天花了多少钱实际上就能忍住不花钱。小组件的支持是一款记账app必不可少的功能,它可以让人在不打开app的情况下看到一些开销情况。小组件的设计风格(参考图片6)我是模仿Apple健康app中睡眠模块的,所以在主屏幕上连高亮颜色都一样。

图片6: 小组件的设计风格

账本详情等其他界面

其他部分界面大体上都是模仿钱包app的,如果你属于重度Apple粉,那么在使用WeTally的时候应该会一种莫名的熟悉感。有些设计个人目前还不是太满意,如果偶然间看到比较好的设计,后续版本中会进行更新。

图片7: 账本详情界面

写在最后

WeTally实际上是为我一个人服务的,我是根据个人的使用情况开发的。如果你感兴趣,可以在App Store上下载并试用WeTally。软件刚发布到App Store,如果想进一步体验高级的功能,可以私信我索要免费的一个月高级功能体验兑换码。如果你觉得WeTally好用或者有什么地方可以改进的,欢迎分享给周围的朋友并在App Store上留言。