静待水到渠成

网贷记账应用“库牛”设计全过程之五——用户界面设计

虽然之前实习的时候也经常会做需求的界面设计,但是基本都只是产品中的部分需求,完整地思考整个产品的设计还是第一次。
有了前面的分析,对这个应用所需要提供的服务,所需要满足的任务场景都已经比较清晰了,不过具体实现时还是有很多的方案,如何想到尽可能多的方案,继而如何从中选择合适的一个方案都是很好的挑战。

设计之前,为了方便描述,我给这款网贷记账应用起了个名字——库牛,还画了logo和吉祥物有木有o(︶︿︶)o
库牛,取意于为你守护小金库的牛。其中,牛又取自股市的牛市,指普涨的市场,在此希望此应用能守护你的财富不断上涨的过程。
logo是带牛角的钥匙,是开启堆满财富的金库的钥匙。
吉祥物是可爱的小牛头像(你如果觉得不可爱那肯定是因为我画得不好o(︶︿︶)o 唉),吉祥物的名字叫小库好啦(好随意的名字嘻嘻~)

图片

APP框架整理

按照之前的分析,很显然,除了记账这一操作之外,库牛主要是提供各种信息的浏览。另外,记账操作只需要提供入口即可,并不需要展开操作的详细信息。
故而库牛作为一款信息浏览型的应用,可以用信息架构的方式来整理其框架。

首先梳理库牛的信息,主要有以下几种:

  1. 记账入口
  2. 待处理交易提醒
  3. 近期回款提醒
  4. 交易数据
  5. 项目数据
  6. 平台数据
  7. 总账户数据
  8. 帐号信息
  9. 更多(设置、意见反馈等)

其中有两个问题需要先确定下:

  1. 记账入口是否要一直展示,还是只在部分页面展示即可?
  2. 是否需要帐号系统?

对于第一个问题,记账入口必须出现在应用的第一屏,此外可以根据具体页面的情况设计,并非一定要在所有页面出现。毕竟,虽然一直展示记账入口可以为记账提供一定的方便,但是也占据了宝贵的空间,所以还是要根据实际情况做平衡。
对于第二个问题,考虑到数据备份的重要性,需要数据备份,因此自然也需要帐号系统来对应每个帐号的数据。至于选用第三方帐号还是自有帐号没有太大影响。在此,考虑到用户注册后更改帐号的场景很少,可以用简化注册流程,永久记住帐号的方式来减少自有账号的弊端,所以后续设计过程中选用的是自有邮箱帐号。

其次,对库牛的信息进行整合归类。

  1. 首页:记账入口,待处理交易提醒,近期回款提醒。
  2. 明细:交易数据。因为交易数据是统计数据中最多的,所以单独作为一个分类,项目、平台、总账户则作为另外一个分类。
  3. 统计:项目数据,平台数据,总账户数据。
  4. 更多:根据库牛的特点而细化为帐号信息,数据提醒,回款提醒,意见反馈,推荐我们,关于我们,退出登录。

APP功能层级和优先级判断

上述四个分类中,功能是彼此独立的,并不存在从属层级关系。不过首页的优先级最高,更多的优先级最低,明细和统计优先级居中,但根据使用频率高低,明细的优先级略高于统计。
四个分类为扁平的功能层级,优先级则首页>明细>统计>更多。

具体每个分类下的功能层级和优先级为

  1. 首页:三者功能层级扁平,记账入口优先级最高,待处理交易提醒与近期回款提醒优先级相近。
  2. 明细:只有交易数据一项,不需说明。
  3. 统计:数据层级上,项目数据从属于平台数据从属于总账户数据,但是展示的时候,三者还是可以扁平化一同展示。
  4. 更多:功能扁平,优先级参照通用性分类即可。按照功能类别,可以进一步将帐号信息、数据提醒、回款提醒三者分为一组,意见反馈、推荐我们、关于我们为一组,退出登录单独作为一组。

APP导航选择

其实这样一分类,整个框架都很明晰了。接下来就是选择什么导航,每个分类下具体如何展示的问题了。

常见的导航类型有平铺页面,标签栏,树形结构,抽屉式等,各有优劣。
鉴于库牛的各个分类功能之间和分类下的子功能之间的层级都比较扁平化,所以不适合选择树形结构。另外,由于库牛只有4个大分类,所以适合选择标签类,这样相比平铺页面和抽屉式,可以更好地告知用户应用主要功能和当前所在的功能,用户点击一次即可访问到应用所有的主要功能。
虽然之前说记账入口并不必在每个页面出现,但是如今采用标签式,最多可以容纳5个标签,还是可以思考下是否要把记账作为中间的第三个标签展示的。不过考虑到在明细、统计、更多页面下,其实直接进入记账的需求并不大,最终还是不添加记账作为标签,而保留原定的四个标签。
故而,最终确定了标签栏的导航类型,共四个标签,依次为首页、明细、统计、更多,点击应用默认进入首页标签。

记账操作,属于编辑内容,需要弹出键盘等操作,不适合在下方保留标签栏,故而采用模态视图,专注于操作任务,同时也节省页面空间。
从明细、统计进入更详细的二级、三级等统计数据页面,为了增加数据的展示空间,也采用模态视图。

APP具体页面设计

具体页面的设计,我认为主要是两点,一是多看看其他的应用的设计多积累几种可选方案;二是实践,空想是很难判断好坏的,简单地画出来就能给你带来不少真实的体验。

具体页面设计的实践中,我对APP主要做了以下改变。

  1. 首页增加部分总账户数据的展示,以填补首页的过分空白。
  2. 明细在列表方式外增加日历的展示方式,方便用户更直观地查看数据,并支持用户在某一个日子直接添加记账。
  3. 在标签栏状态下,每个页面的右上角添加一个吉祥物头像,作为注册登录入口。嗯,这个可以增加用户黏性吧,我才不会告诉你我其实只是直觉觉得太空了。。。

先贴几张我画的初稿吧,因为画的时候我太懒了,直接在原稿上改,所以现在都没有完整原稿的图了呀。。。
让我重新画个Axure我又懒。。

还是下篇看完整版吧,完整版我勉强做个Axure版的出来o(︶︿︶)o ,还是喜欢手绘嘛~~

图片

Comments