APP交互效果分析案例：一款记账APP的重设计

今天25学堂继续为了解读群友的一些问题和大家的要求，给大家讲解一些关于APP交互效果分析的案例和实战型的操作经验。

为了培养大家养成一个良好的学习APP交互效果分析的习惯，在此，25学堂以一款记账APP为例来讲解一下APP的重设计。

目前，市场上最好用的记账APP非随手记APP莫属。

当然学堂里也有漂亮的金融APP界面设计欣赏：漂亮的APP界面设计欣赏：金融理财类APP设计

随手记APP，六年专注，2亿用户记账理财第一步！出自金蝶团队，左手购物拿满东西，右手就能把账记完。

第一招，这是学堂君教大家选择合适的APP案例来学习APP交互效果。

1、同行业里比较出名的APP，也就是用户数量大的APP。

2、迭代版本次数比较多的APP。

3、亲自体验随手记APP之后的感想。

第二招：梳理所开发APP的核心功能。换句话说也就是APP交互设计的路径分析。

比如记账APP的核心功能：

1、目的就是记账或者查看收入和支出的报表。

2、记账的目的则是因为想了解自己的财务状况 / 收支分布。

3、一般情况下则是在完成一笔消费后，或者可能是晚上回忆一下整天的消费统一记录。

第三招：针对以上的核心功能重设计

各位童鞋务必记住：非首要功能，不应成为主路径上的障碍。

下面就是某一位APP交互童鞋的实践过程：

第一步体验目前市场上主流的记账 App，提炼出共同点或是共同功能。

举例说明某一个点：密码保护的功能，以及后面我们如何优化交互设计流程

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

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

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

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

优化的第一要点：智能一点点，就能提升用户体验

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

如下图所示：

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

优化的第二要点：为效率服务，在交互细节上的优化

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

就不再是横向滑动来切换，还是下拉tab块来切换。快捷方便

就是换一种适合在移动端交互的方式。

优化的第三要点：色彩和icon设计的调整。

打开APP之后，非常简洁的界面。采用线性简约风格的分类图标。非常清爽。如下图

针对每一个图标都做了一个彩色选中态的处理，温和的颜色使界面显得不单调的同时更具亲和力。

分类 icon 众多，视觉设计上保持统一的语言可以使整体APP视觉感更强。

以上就是今天学堂君跟大家分享一款记账APP的重设计的APP交互设计知识。目的是教会大家学会去欣赏每一款优秀的APP的交互细节。应用到自己的APP当中。