我对移动记账 App 的设计探索

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

一. 设计前的思考

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

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

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

我对移动记账 App 的设计探索

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

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

我对移动记账 App 的设计探索

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

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

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

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

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

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

二. 思考后的重设计

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

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

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

我对移动记账 App 的设计探索

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

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

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

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

我对移动记账 App 的设计探索

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

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

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

我对移动记账 App 的设计探索

三. 视觉设计

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

我对移动记账 App 的设计探索

轻快、亲和

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

我对移动记账 App 的设计探索 我对移动记账 App 的设计探索 我对移动记账 App 的设计探索

图标中的图形奥义

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

我对移动记账 App 的设计探索

结语

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

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/9409/

(0)
TinadminTinadmin
上一篇 2015-09-15
下一篇 2015-09-15

相关推荐

  • 虚拟现实产品是更棒的交互体验吗?

    2016年12月,携程UED大会把虚拟现实技术作为论坛的核心主题,邀请了方方面面的专家,从技术,硬件,体验等各个方面来剖析VR这种创新的趋势。

    2017-05-09
  • 怎样挣钱?用户体验是一个值得关注的话题

    近年来,“快闪”成了营销届的新玩法,不少大品牌纷纷开起了快闪店。何为“快闪店”Pop-upshop在一个固定地点,临时搭建起来的零售商店,存在时间长短不一,几天或者几周,有的几个月,也称Pop-up shop。坐标:成都远洋太古里品牌:欧舒丹时间:2018年3月2日—8日欧舒丹粉樱咖啡快闪店的出现,正值樱花季。这场满载法式浪漫的活动,呈现出唯美场景,现场随处可见,络绎不绝的打卡人群,这场营销又让欧舒丹火了一把。坐标:香港皇后大道品牌:C...

    2018-03-30
  • Excel表格常用快捷键大全之1-10个

    为了小伙伴能更懂Excel 快捷键的具体使用场景,小雅不是单纯的像网上看到的一堆快捷键堆上去就好,做了更详尽的解释,希望大家能喜欢!收藏一下,记住些Excel常用快捷键还是不错的!善用快捷键,新手到高手的蜕变!不废话,进入正题,本篇是1-10个快捷键,后续会陆续为大家呈现更多的Excel快捷键。第一,插入工作表默认情况下,我们新建一个Excel文档,只有3个工作表。3个sheet,即sheet1,sheet2,sheet3。如果这三个s...

    2018-03-17
  • 关于交互设计的一些图书网站推荐

    昨日有人在群里提问阿西站长说想读一些关于交互设计图书,阿西站长通过一晚上的搜索和不断的翻阅各种网站,并且结合自己做交互设计的经验给大家汇总了一下适和交互设计人员看的图书和网站。具体如下: 《交互设计之…

    交互设计 2014-11-18
  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12
  • 四个步骤,完成一个APP的LOGO设计需求

    希望这篇文章,能够在你做LOGO设计时,提供一些方向和思路。

    2017-05-01
  • 2018’IIDC信息与交互设计教学研修班开始报名了!

    点击信息与交互设计关注我们!资深教授的专业教学指导+行业专家的实际案例分享力求打造最有深度的课程培训5.10-5.12信息与交互设计专业委员会联合广州美术学院定于5月10日~12日在广州美术学院举办"信息与交互设计教学研修班"。本次研修班将特别邀请清华大学美术学院基础部主任、国家社科基金重大项目首席专家邱松教授就国家社科基金项目申报工作进行详细的解析与交流,同时邀请广州美术学院工业设计学院院长陈江教授;武汉理工大学艺术与设计学院副院长方...

    2018-04-20
  • 好的人机交互设计(UX)评判标准的四个原则

    一些设计的基本原则往往是通用的,甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。 一个设计师&产品…

    2015-04-14
  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08