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

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


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

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

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

首先,先说明一下该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

相关推荐

  • 6个简单的方法,设计出漂亮的重叠色彩效果

    颜色对设计来说是非常重要的要素。只要有鲜明的颜色,就算是极简的单色设计,也能表现出引人注目的独特魅力。本文将参考一些网页设计,看看各种各样的颜色重叠效果的设计方法。

    2017-05-14
  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • Axure-小红书APP登陆界面划屏效果制作

    有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果 效果分析 …

    2016-01-06
  • 完美界面设计秘诀:界面设计的八大黄金法则

    只要你的设计涉及到人与界面之间的交互,这八大规则在设计过程中至关重要。“这个功能减轻了焦虑,因为用户知道即便操作失误,之前的操作也可以被撤销,鼓励用户去大胆放手探索。”

    2017-08-04
  • 关于创意,国外设计师用垃圾制作的插画,震惊到我了。

    本文来源于交互设计网:我是UE网,小编:阿西巴巴 图片来源:互联网 有些生活中的日用品或消耗品产生的垃圾我们随手都丢掉了,不过在设计师眼里这些也可能价值数十万美元。她是如何变废为宝的呢? 下面是作品: 我真…

    2015-04-20
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 交互设计基本方法--进行目标用户调研(情境访谈)

    为了满足用户对产品特定的交互模式的期望,一手的、准确的、可被有效利用的用户研究数据将是进行交互设计的源泉和关键。情境访谈是一种以用户为中心的设计并与人类学相关的研究模式,属于品质性研究和情境设计方法…

    2017-08-01
  • 设计实战:教育产品组件化交互设计的实践与思考

    网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

    2017-10-16
  • 我对QQ音乐的体验:关于探索音乐的故事。

    作为一名两年的QQ音乐app用户,当初我使用它的原因在于精美的界面设计和众多高质量的音乐资源。而现在,我每天都有听歌的习惯,这个我常用的软件也成为了不能缺少的部分。我接下来从探索音乐的角度分析QQ音乐手机客户端的一些功能和体验,仅代表个人观点。

    2017-06-02
  • 818那些影响用户体验的创意

    作为创意经常不通过审核的一枚苦逼广告主,你一定经常看到以下拒绝原因:因模糊、变形,出现马赛克等原因导致无法识别,请优化。人物形象影响用户体验,如【动作不雅、衣服暴露、大头照】。文字包含【低俗、不良诱导、负面描述】等影响用户体验。……有没有觉得很委屈,很痛苦,很莫名其妙?作为苦逼的设计师,好不容易满足了甲方爸爸的变态要求,没想到又被更变态(划掉,正规)的腾讯社交广告审核拒绝了。概括一下,这些拒绝原因全部称为“影响用户体验”。那什么是影响用...

    2018-04-19