β

【产品体验】看 EasyCost 如何让记账变得简单

青溪·札记 119 阅读

记账对于关注自己的支出情况,对理财感兴趣的朋友来说是一种刚需,但是仍然有很多人难以坚持记下去(比如我)。究其原因,是这个事儿太琐碎、有时候也很麻烦。
让记账变得非常简单,是EasyCost 的目标和定位。接下来将重点从交互设计的角度来分拆这款App、挖掘设计亮点,看看它是如何做到简单记账。

一、交互设计

1、多账本管理

界面布局和交互操作:

配图

1)默认的浏览模式
– 在默认的浏览模式下(如上图左1),可通过左右滑动来浏览其他账本。
– 账本右下角用算术方式,展示全部的收入、支出、余额。点击计算区域,可依次切换至本月、本周、今天。个人觉得全部、本月比较实用,对于有存钱计划的用户来说,可以通过计算结果来了解支出、存款情况,合理消费。
– 有个非常赞的细节,在上图左1,账本名称下方有个表情符号。余额为负时,是撇嘴;余额为正时,是微笑;余额超过1000时,是大笑。情感化设计的引入顿时觉得设计者非常用心。
– 点击左上角的三线图标、或者通过双指缩放可进入多账本管理模式。点击左上角的图标,对新手来说学习成本小;而双指缩放操作,缺点是需要记忆、需要有人教,优点是比较酷、学会以后操作也很简单。两种操作方式结合,既满足了新手用户,也为中间用户、专家用户考虑。

2)多账本管理模式
– 可排序、删除、重命名账本,也可创建新账本

3)账本之间排序
– 长按想挪动位置的账本,拖拽至目标位置。

4)创建新账本
– 点击“创建新账本”,可立即创建一个新的账本,同时屏幕自动左滑至最后,用户即可看到此新账本。

配图

5)重命名账本
– 点击账本名称后的“编辑”图标,即可进入编辑名称的状态。
– 点击输入框之外的空白区域,可自动保存输入框中的内容。

6)删除账本、合并到其他账本
– 点击账本左侧红色的“删除”图标,弹窗让用户再次确认是否删除账本,也可选择合并到其他账本。
– 点击“合并到其他账本”,进入新页面在已有账本中选择一个,即可操作成功并回到 多账本管理模式。

配图

7)设置账本
– 在默认浏览模式下,每个账本的左上角均有一个“设置”图标,除了通用的设置项(选项开关、数据同步功能)外,可单独设置当前账本的货币类型、封面、收支类型(可删除、排序、添加),也可查看此账本的报表。

2、浏览账单

1)账单记录明细

配图

界面布局和交互操作:
– 点击账本任意区域,可查看账本余额(包括总收入、总支出),以及一周7天的支出数据曲线
– 在账本页面,上滑手势可查看此账本的账单明细,每天每一笔支出和收入都非常清晰。有个小细节,上滑手势操作后,账单明细会非常缓慢的上移直到与标题栏接触为止,顺滑的体验。

2)账单数据统计

配图

界面布局和交互操作:
– App的任意界面,横屏或摇一摇,均可进入饼图统计界面,默认展示支出情况。点击中间“支出”按钮可切换至“收入”视图。
– 拼图统计界面,向左滑动可进入曲线统计界面(看App Store介绍 双指缩放 可查看天、周、月、年的统计,但在我的手机上操作无效,只能左滑)
– 饼图统计界面,用户可查看不同收支类别的占比情况,了解自己的主要支出在哪里、主要收入来源是什么。可查看不同时间段——周、月、年的支出和收入情况。
– 曲线统计界面,用户可按照天、周、月、年进行对比。比如本月跟上月的对比、今天跟去年对比。

3、记账

1)新增账单

通用功能:选择分类、输入数字、添加说明、修改时间、选择标签、选择账本

配图

界面布局和交互操作:
– 在账本界面,有两个入口可以新增账单,一种是较为明显的下拉手势,另一种是点击账本上的小表情。
– 支持加减运算的数字键盘,适用在一天中同一个类别有多笔支出时。比如用户在晚上记录当天三餐的消费,则先输入早餐支出+中餐支出+晚餐支出,省去了心算的麻烦。
– 被选中的收支类型,用背景颜色与其他类型区分开来,同事在数字输入框前方显示该类型对应的图标。
– 在上图左1界面,右滑可切换至图2,此时可添加说明、添加标签、修改时间、选择账本。选择标签后,对应的颜色会替换“标签”图标显示出来。同样的,如果点击“取消标签”可将已选择的颜色图标删除。设置了颜色标记的账单记录在界面上会有相应的颜色做背景,只是比没有上图3中标签颜色深。
– 在上图左2界面,点击“时间”图标,会弹出时间选择控件,如上图右2界面。
– 在上图左2界面,点击“三线”图标,可进入选择账本界面。因为用户此时是从“日常开销”界面新增账单,所以默认记在此账本下,不过用户仍然可以选择其他账本。

个性化功能:收支类型的自定义、修改、排序

配图

界面布局和交互操作:
– 长按收支类型,可进入修改界面,如上图2 。可以自定义名称、选择图标、设置收支类型是支出还是收入。
– 周期记账属于高级功能,购买之后可以设置固定的金额、设置之后根据重复方式(一次、每天、每周、每月)自动记账。如果设置了提醒,则会在“开始时间”推送一条消息告知此时自动记了一笔账。我个人觉得这个功能并不那么顺手。比如我每个工作日(周末除外)的公交支出基本不变,按说周期记账是适用这个场景的,可惜重复时间没有工作日这一项,可见还有优化改进的空间。
– 在账本设置界面,有一项“收支类型设置”,可对收支类型排序或删除。

2)修改账单

界面布局和交互操作:
– 在账本界面上滑查看账单明细,点击某条账单记录,即可进入编辑模式。

3)删除账单

配图

界面布局和交互操作:
– 长按某条账单记录,进入删除模式,此时可点击选择任何一条账单。点击删除图标即可删除所有已选中的账单,无需再次确认。
– 已被选中的账单,再点击一次可取消选中。
– 在删除模式,点击左上角的关闭图标,可以回到左图1的浏览模式。

二、小结

EasyCost 这款App用到了不少手势操作,最初接触需要几分钟来摸索,有一定的学习成本。但是熟悉之后,又会发现所有的手势操作又遵循着用户的使用习惯,学会之后的记忆成本也就没那么高了。整体来看,EasyCost 的设计确实不错,有不少值得学习的点。

全篇完~~

欢迎关注我的微信公众号:青溪札记(qingxizhaji)
一枚交互设计师,正在这里分享产品体验记录、交互设计思考心得、阅读笔记、生活乱弹。

二维码

作者:青溪·札记
关注 产品设计、知识管理、阅读
原文地址:【产品体验】看 EasyCost 如何让记账变得简单, 感谢原作者分享。