banner

一次移动记账 App 的设计探索

yixin

现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话,我会怎么去设计呢?本文记录的就是一次移动记账 App 的设计探索过程。

一. 设计前的思考

简单、高效和安全是设计之初就想到的三个关键词

在一天的使用过程中,我很可能存在多次记账的需求,这也意味着我会频繁打开这个产品,简单和高效可以让我更快的完成任务。记账因为涉及到资金这个问题,所以它同样需要一定的安全性。如果要给这个 App 一个定位的话,我认为它是一款 “能满足大众基本记账需求的轻便的移动记账 App ” 。

基于以上的思考,很快就产出了以下稿子:

1

视觉呈现上,我把它做的非常简洁干净,在进入密码解锁以后直接呈现一个列表,左下角则是有一个常驻的悬浮着的绿色添加按钮,用来添加一笔支出或者收入。

当然也有比按钮更优雅一点的方案:

2

通过手势下拉的操作展开一笔新的支出或收入,因为手势的优势在于没有固定的需要点按的操作位置,能有更高的效率。

尽管看似合理的初步方案就这么出现了,但是如果仔细深入思考的话,会发现它并没有实际解决你希望能够更高效记账这个行为。出于安全的考虑,你始终在打开记账 App 后需要输入四位的密码,然后才能进入记账的行为,这个过程会让你在每次记账的时候都需要多按几次手机。

为了解决这个痛点,我从最基本的使用场景出发,思考了以下几个问题:

  1. 我打开记账 App 的目的是干什么?
  2. 为什么记账?
  3. 什么时候记账?

针对第一个问题,答案很显然:目的就是记账或者查看收入和支出的报表。 第二个问题,记账的目的则是因为想了解自己的财务状况 / 收支分布。 而针对第三个问题:一般情况下则是在完成一笔消费后,或者可能是晚上回忆一下整天的消费统一记录。

在重新整理完这些思考以后,我最终决定重新拟一套设计方案。

二. 思考后的重设计

非首要功能,不应成为主路径上的障碍

在我常试过的很多记账 App 中,它们都提供了密码保护的功能,但也却因为这个密码保护功能使得记账的操作多了很多的步骤。在这一点上,金蝶的 “随手记” 做的不错,在密码保护界面提供了快捷入口。然而从我个人的角度来看,我并不是非常喜欢在密码保护界面多那么几个快捷入口的方式,至少我希望在不影响实际体验的情况下,能使界面显得更简洁一点。我反复思考后得出的结论是:密码保护需要保护的是账单隐私,而不是 “记账” 这个行为。

可以做一个大胆的设定,打开 App 后,如果直接进入记账界面,可以为我节省很多操作的步骤,甚至减去了密码保护界面点击一次快捷入口的行为。

3

于是重新设计的界面出炉了。

当我打开 App,呈现在我眼前的就是记账界面,我可以直接输入数字以后点击对勾就完成一笔记账操作。右上角有个查看报表的功能入口,当我点击这个图标的时候,会弹出密码框,输入密码就可以进入报表界面。

智能一点点,就能提升用户体验

回到此前思考的第二个问题,我记账的目的是为了 “了解我的财务状况” 。 所以预算功能及与其相关联的提醒功能就变得尤为必要。我设想了一个叫做 “预算” 的功能,当我设置了我每月的预算,并且每月的支出超出我设定的预算以后,那么在首页的记账界面,Titlebar 会变成红色以警示你应该省着点花钱。

4

至于我何时会记账这个问题,因为在很多时候可能会存在我完成一笔消费的时候记账,因此我的想法是根据打开的时间来预判,比如午餐时间打开的话,分类图标则默认选中 Food 选项。周末下午茶时间打开的话,分类图标则默认自动选中休闲类的选项,如果在程序开发上合入了智能学习的模块,它甚至可以根据用户的个人习惯,为每个记账的时间作分类的选择。通过使用预判的情况来减少我可能会去点击的操作,从而减少不必要的步骤。

为效率服务,在交互细节上的优化

在查看报表界面的时候,会遇到一些需要切换年份,月份或者周为单位的时候,因为手机屏幕在不断变大的情况下,如果将 Tab 放置在顶部,单手操作的时候切换会变得不太容易。因此对于切换时间这个维度的操作,我也重新思考了一下,利用下拉手势来解决。

5

三. 视觉设计

我给这款产品起名叫 Save+,也就是给予更节省的寓意,产品虽然是一个以记账为目的的 App,但是我希望传达给用户的并不是我每个月花掉了多少钱,而是省下多少钱的感觉。因此在 icon 的设计上使用了储蓄罐作为隐喻。

6

轻快、亲和

简单,高效是设计这个 App 的初衷,视觉呈现上需要传递给用户 “轻” 的感觉,简明清晰的图标和键盘作为主界面的元素符合直观的感受,让人在打开后就能直接进行操作。对每一枚分类图标都做了一个彩色选中态的处理,温和的颜色使界面显得不单调的同时更具亲和力。

7-1 7-2 7-3

图标中的图形奥义

分类 icon 众多,视觉设计上保持统一的语言可以使整体感更强。对分类图标类型进行视觉上的归纳后主要分为三种类型:圆形、方形和斜形,以此为依据保持图标的整体统一性和饱满度。

8

结语

当设计给定一个命题后,我相信从不同的使用场景和需求角度来解读往往会给出不同的设计解,从实际的使用场景中出发,瞄准一个哪怕很细微的痛点进行思考,往往也能发现一个新的突破点,而这个突破点则更可能是直接起到决定产品差异化走向的关键因素。当思路不够开阔的时候,不妨暂时先放下手中的设计任务,先找出这个突破点,以此为设计的依据和导向来设计产品。

Tags: , , ,

yixin
yixin
上一遍
下一遍
QQ空间 腾讯微博 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. kiriya says:

    会有发布的计划吗?还是仅仅设计了一下..

  2. 李行 says:

    学习了!

  3. b1ack says:

    有上线吗 我想用诶

  4. 啦啦 says:

    这个已经有这个app了吗?一直找不到顺手的记账app好苦恼。

  5. 赵夏阳 says:

    原来记账APP也可以这么优雅。

  6. lt says:

    请问app store里面怎么找到?再有只有中国app store才能下载吗?

  7. lt says:

    再有,设计的icon是什么类型版权?可以第三方使用吗?

  8. tcdona says:

    哈哈 ,喜欢

  9. joe says:

    找不到下载地址啊 搜索不到

  10. 不乱 says:

    写的好赞!学习了!

  11. 不乱 says:

    写的很好!赞!

  12. 冰果 says:

    您好,文章提到切换时间维度在交互上的优化,如果用左右滑动的手势呢?

  13. lihuan says:

    给个下载途径,看看真实效果啊

  14. 稀饭 says:

    这么可爱作者应该是女生

  15. markmark says:

    好喜欢这个简介的设计方案 弄的我心痒痒 想学APP开发了()

  16. 吴桐 says:

    不错,赞一个,最近在做一个App

  17. 英子 says:

    赞~思路清晰,界面简洁美腻!

  18. in北京 says:

    超赞! 文章不错,思路清晰。

  19. secert says:

    说的我都心动了。。。有没有做出来啊

  20. cigar says:

    生活中,我一直使用随手记来记录我的每日生活开支,直到这次结伴去欧洲跑马拉松回来后后,更新了【去啊】之后,焕然大悟,原来人世间还有这么个好东西,它基于结伴出行的场景,解决了行程,基于行程又提供了本次行程的活动中,小伙伴互相分享的照片;最后还可以基于每日的出行花费进行记账,然后分摊开支。这比单纯的记账,更符合场景,也更加自然。

  21. 周小浪 says:

    看着不错,什么时候上线

  22. K says:

    跟国外的一款 next 的记账 思路很像..可以去体验下

  23. Henry says:

    我只想弱弱的问一句,为啥是英文的?

  24. ariesqin says:

    转给随手记的PM们看看。谢楼主表扬~~~

  25. 言小柒 says:

    实际上感觉跟dollarbird好像。

  26. benzhaoguo says:

    喜欢您的设计,希望能够将设计开发出来。前腾讯员工,目前是iOS App的独立开发者,有自己的小团队,技术上iOS本人负责,Android同学的技术也很不错。

    请与我联系: 18123238386,zak.zhao77@gmail.com, QQ 35912467

  27. huang says:

    您好,我是一个android开发者,可以借鉴您这个做一个android端的实现么?如果方便的话,怎么联系您?

  28. Wedy says:

    在看这篇文章的时候,我是跟着作者的问题后面一路思考的。感谢这个思考的机会。

    有一个想法(手势触发添加收入、支出的动作)和一个反馈(键盘设计稿有小bug)。

    想法来了。
    除了正常的点击图标的入口之外,“额外”添加手势的入口,作为熟练用户的快捷入口。2个options。
    op1. 利用Save+的存钱罐的隐喻,从屏幕边缘(左侧)划入中央,触发添加收入。隐含从外界把钱拖到用来隐喻的“存钱罐”。 相对的,从中央向右侧划过右侧屏幕边缘,触发添加支出。隐喻从“存钱罐”把钱拿出去了。考虑到日常用户支出的频率远高于收入,可以考虑屏幕的左边1/4处作为收入入口,右边3/4作为支出入口。

    op2. 屏幕上面画减号‘-’,触发添加支出。画加号‘+’,触发添加收入。考虑到‘+’需要两画才能实现,可以考虑该形似的横折手势。

    反馈是一共出现过2个键盘的设计稿,一个不能删除,一个不能输入小数点。哈哈

  29. 1)在第一个进入界面有一些困惑。用户会乐于先记录钱,还是分类。我的思路是说:我买了一件衣服,2000元。还是说2000元,我买了一件衣服……这个部分还需要探讨。2)同意记账应该是伴随的,所以如果伴生在支付宝、微信支付内更合理,而不是单独的记账app 3)喜欢图标和重构思考的过程。