交互设计思路:积分模块改版总结

作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。


作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

交互设计思路:积分模块改版总结

积分已经成为每个互联网平台黏住用户,增加平台留存率的重要手段之一,金融平台也不例外,虽然积分的商业模式很重要,但是如何展现给用户,用户的使用体验是否流畅也同样重要。下面就我最近的手边项目积分模块的改版做详细阐述。

首先,先说明一下该APP的积分模块组成,包含每日签到、积分奖励(外星人奖励、投资奖励)、积分记录及积分的相关活动等。

1.每日签到页面

每日签到原页面:交互设计思路:积分模块改版总结

问题分析:页面布局零散,相关内容布局不合理,页面样式呆板不新颖。

改版页面(交互稿):

交互设计思路:积分模块改版总结

交互设计思路:积分模块改版总结

改版说明:

  1. 关联相近原则,将“立即兑换”和我的积分移到相近的位置,看到积分数字,立即想到可以兑换什么。
  2. 增加签到进度条和日历,更直观的让用户了解到连续签到可以获得不一样的奖励。
  3. 最底部增加积分的相关活动,为以后扩展奠定基础。

总结:要充分理解和分析需求,做更贴近用户需求的设计。

2.外星人奖励页面

外星人奖励原页面:

交互设计思路:积分模块改版总结

问题分析:没有空状态引导,表格样式的展现形式看起来很乱,信息展示的优先级也叫混乱。

改版页面(交互稿):

交互设计思路:积分模块改版总结

改版说明:

  1. 将导航移至标题栏内,减少页面的分割,看起来更有整体性。
  2. 增加空状态引导,以使操作流程形成闭环。
  3. 头部样式采用弧形样式,更加活泼大气一点。
  4. 增加了邀请人数的字段,这样用户更加直观的了解到自己邀请了多少人。
  5. 将原来的表格样式改为list的样式,将信息进行重构,突出奖励。

总结:空状态引导很重要,关乎整个APP的体验闭环。页面样式也是交互设计的一大亮点,不一样的样式也会给用户耳目一新的感觉。

3.投资奖励页面

投资奖励原页面:

交互设计思路:积分模块改版总结

问题分析:和外星人奖励页面一样没有空页面引导,信息展示优先级不对,需求理解不透彻。

改版页面(交互稿):

交互设计思路:积分模块改版总结

改版说明:

  1.  增加空状态引导,页面头部样式和外星人奖励页面统一。
  2. 将list的信息进行重构和整理,根据页面的信息显示的优先级进行调整,突出奖励,将状态字段单独作为一列,将无奖励的金额直接显示为0,比原来的的无奖励但有奖励金额的状态更清晰。
  3. 增加页面交互:当用户开始选择筛选条件(交易时间、产品类型、状态)时,筛选条件和列表将置于页面顶部,减少干扰信息,让用户更专注于查看列表本身。

总结:信息整理很重要,根据用户的关注度、页面信息的重要程度进行产品设计。

4.外星人页面

外星人原页面:

交互设计思路:积分模块改版总结问题分析:缺少活动事件的引导,用户进到该活动页面以为每个人都符合邀请条件,但实际上需要满足一定的条件,而相关说明隐藏的太深,用户极有可能根本关注不到。

改版后页面(交互稿):

交互设计思路:积分模块改版总结

改版说明:将原来的活动规则里面的内容进行提取,增加成为外星人事件的引导,更加可视化,图形化。

总结:可视化是交互设计的重要手段,所以将文字可视化图形化已经成为设计趋势。

积分记原页面

积分记录原页面:

交互设计思路:积分模块改版总结

改版后页面(交互稿):

交互设计思路:积分模块改版总结

改版说明:

  1. 突出积分的增加或减少,并且以时间流的形式展示,更加直观。
  2. 筛选条件其实是一个低频的需求,所以将筛选条件移到右上角,点击后再出现。

总结:时刻关注用户需求,做以用户为中心的设计。

项目总结

  1. 理解需求、分析需求是设计页面的关键。
  2. 影响信息展示样式的关键点:用户的关注度、使用频次、使用习惯。
  3. 关注页面的空状态引导。

 

作者:柴维英,从事交互设计5年多,不断钻研,不断进步,拥有丰富的交互实践经验。

本文由 @柴维英 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-04 21:28
下一篇 2017-05-04 23:39

相关推荐

  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 在设计登录注册之前,注意这10个要点能迅速提高用户体验

    有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

    2017-05-26
  • 从这几个案例入手,学会设计APP注册流程

    从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。

    2017-05-25
  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

  • 怎样合理设计产品交互框架,这里有6个细分步骤

    这六点无论是对产品新人还是有经验的PD都是很重要的,按照整个流程可以避免很多问题,也会让我们的工作变得有节奏,而不至于丢三落四,确实对产品的把握。

    2017-05-18
  • 交互设计岗位面试攻略

    面试交互设计岗位的同学应该准备以下几点: 1技能交互理论,熟记于心,信手拈来做为交互设计专业的学生,如果连一些普通的理论认识都不了解的话,是会很吃亏的。你所做的设计很容易遭到别人的质疑。这里推荐同学们…

    交互设计 2015-12-03
  • 如何基于开发的视角进行产品设计?

    既然UI设计师的主要工作是交付,那么学会以开发的视角和分析方法来进行设计将非常重要。

    2017-05-07
  • 5个实用配图技巧,为产品带来优质体验

    图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

    2017-05-12
  • VR中的协作游戏

    在VR中分享经验、与他人协作,这是绝无仅有的一个新维度。玩家们甚至语言都不通,这个事实如此奇妙,证明了我们仅凭极少的手段就能沟通和协作。

    2017-04-28
  • 那些年苹果做错的设计

    设计不是艺术,它不是孤立存在的,更不是设计师的自娱自乐。设计永远和人、使用场景、用户需求相关联。iOS会不断地更新迭代它的设计,除了有商业目的上的考虑外,更多的是根据时代(人、环境、需求)的变化而变化,去做符合当下的设计。

    2017-05-16