腾讯设计师对一款移动记账APP的设计探索

   不满意?自己来!腾讯的yixin同学对市面上的记账软件都不太满意,干脆自己设计了一款。这篇分享了他全部的设计探索过程,想知道专业设计师如何从零开始一款APP的设计,在细节上如何考量周旋,看这个就对了!


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

  一、设计前的思考

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

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

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


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

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


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

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

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

  我打开记账 App 的目的是干什么?

  为什么记账?

  什么时候记账?

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

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

  二、思考后的重设计

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

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

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


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

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

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

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


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

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

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


  三、视觉设计

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


  轻快、亲和

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


  图标中的图形奥义

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


  结语

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

时间: 2024-10-21 18:56:52

腾讯设计师对一款移动记账APP的设计探索的相关文章

腾讯设计师帮你掌握基于任务的导航设计

  用过Windows控制面板的同学应该都体会过那种找不到目标,一打开直接懵了的感觉,因为这类基于任务导航的产品,要求设计师要对产品用户以及用户任务一个非常清晰的认识,今天腾讯同学从企业QQ的实战中总结了不少经验,对这类小众但很有可能用到的知识,建议收藏哟. 对于不同平台导航的交互形式与视觉样式,已经有不少的文章来介绍与总结.本文所介绍的是关于导航规划思路,一个比较小众的领域,基于任务的导航. 目前产品主要使用基于对象的导航和基于任务的导航.相对来说的,纯粹的基于对象的导航的较为常见,但纯粹的基

三款个人记账软件推荐

青菜.水果,衣服.鞋帽,汽油.房价--物价一天天往上涨,工资的涨幅却始终追不上,不少消费者都遇到这样的"囧"境.在"开源"式微的情况下,"节流"就成了对抗通胀最有效的法宝之一.可是怎样节流,日常生活中又有哪些"流"可以被截,这就需要你对个人或者家庭的收支情况有个全盘掌握,记账就变得相当关键了. 如今的年代,再掏出账本来记账已经落伍了,有各种各样的记账软件来帮助你掌握和管理各种账目的进出,而且能够进行分类统计汇总,省却了自己狂按

“红月亮”惨遭雾霾抢镜 腾讯应用宝力荐5款防霾APP

伴随着十一长假的结束,烦人的雾霾也在北京.天津.河南等全国多个地区"复工",且有愈演愈烈之势.中央气象台已发布雾霾黄色预警,就连10月8日晚间罕见的月全食"红月亮"都在雾霾的干扰下惨变"黄月亮",怎一个坑字了得. 恼人的雾霾不仅影响心情,更对身体健康造成巨大隐患,那么要怎样才能在如此严重的污染环境中安全生存?今天,记者从腾讯旗下安卓应用商店--应用宝精选5款手机APP,APP虽小,对雾霾却能起到很好的预防作用,让你和小伙伴们再也不用担心中&quo

英普通讯日前发布四款“有线手机”

(记者焦立坤) 打手机时你会用耳机吗?相信多数人懒得用,不过一个全新的有线手机或将解决这个麻烦,英普通讯日前发布四款"有线手机". 这种新概念手机跟一般手机最大的区别是,有一个内置的可自动伸缩耳机.通话时只需要将耳机拉出,通话完毕后耳机和耳机线又可自动收回手机内.这是英普公司全球首创的内置伸缩耳机技术. 防辐射与环保是这种手机的看点,也得到了很多业内人士的肯定,有专家呼吁其成为行业标准.据了解,这一功能将推及到MP3.MP4.笔记本电脑等电子设备.

腾讯宣布推出一款血糖仪产品

摘要: 1月20日,腾讯宣布推出一款血糖仪产品,产品正式名称为糖大夫,售价为299元,目前腾讯糖大夫官网(tdf.qq.com)已经上线. 据腾讯产品负责人Kay介绍,糖大夫由腾讯梦工厂孵化,产品 1月20日,腾讯宣布推出一款血糖仪产品,产品正式名称为"糖大夫",售价为299元,目前腾讯糖大夫官网(tdf.qq.com)已经上线. 据腾讯产品负责人Kay介绍,糖大夫由腾讯梦工厂孵化,产品在正式推出前已经过6个月的研发.此前腾讯推出的WiFi硬件"全民WiFi"也是由

麻球游戏指腾讯还有近千款侵权游戏未撤

[TechWeb报道]1月14日消息,今日,麻球游戏在其官方微博中发表消息指出,腾讯还有近千款侵权游戏未撤.同时,国内不少Flash小游戏开发者也公开声援麻球游戏,支持麻球为开发者维权,呼吁重视小游戏开发者的基本利益. 近日,因正版授权Flash小游戏被腾讯大量非法盗用,麻球游戏已正式向腾讯发出维权公函,要求其停止侵权并公开道歉.随后,腾讯对此回应称,腾讯游戏频道的相关小游戏转载自第三方合作网站.由于来源网站未注明 版权,频道编辑审核不严才出现该问题. 今日,麻球游戏在其官方微博中发表消息指出,

腾讯游戏正式发布七款游戏新品,产品涵盖不同题材

2011年度发布会上,腾讯游戏正式发布七款网页和社交游戏新品,产品类型涵盖角色扮演.经营.养成等不同题材. 腾讯游戏副总裁王波会上介绍,这七款产品分别是<小白大作战>.<QQ宝石>.<QQ大赢家>.<大乐斗2>.<QQ水浒>.<QQ特工>.<TNT>,它们将以每月一款的速度陆续推出. "细分之下还有细分,"王波解释,"网页游戏和社交游戏作为新兴的细分市场,在它们之下还有更进一步的类型细分.&q

不走寻常路:22款“暗黑系”的网页设计分享

自从iOS 7推出后,便掀起了扁平化加色彩明亮的设计风潮.如今,色彩明亮的扁平化设计已填满了我们的生活,大家是否有些审美疲劳了呢?在扁平风潮下,依旧有些特立独行的设计师们坚持走自己的路,在他们的作品中采用的多是较为柔和的配色方案,使用的色彩也都趋于深色系!     虽然如今"暗黑系"并非大势,但他们的作品依旧充满了另类的吸引力.在黑与白的交错中,扑捉那份独特的情感体验!下面为大家介绍20款"暗黑系"的网页设计案例,让你感受光与影的美好!       Moreslee

干货:推荐十五款APP原型设计工具

我们知道,一款优秀的移动APP产品原型设计工具应该具备以下特点: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用谁知道) ③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个) ④.在线协作(多个PM狗一起用) ⑤.手势操作.转场动画.交互特效-(这些都不需要,留给专业的交互.视觉,搞那么虚的不如多想想产品流程逻辑做做减法.写写xxRD啥的) 以下逐步介绍那些我们势必要折腾的原型工具们: 1. POP(