UX设计:一个金融数据可视化案例


时间: 2021-07-30 10:19:46 人气: 7 评论: 0

在UX设计中有一种设计叫信息设计,就是如何让查看信息的人一目了然,金融数据往往**面临这样可视化的问题,让用户看到一张简单易懂的图的背后,是信息的逻辑。小试牛刀,此文做一个简单举例。

背景介绍

客户需要做一个基金定投主题页,下图为主题页中需要举例说明的部分,通过用户可以理解的方式展示:

客户的需求文案

看到这么一段字,要去做信息设计**想到如何实现呢?

将排版变好看吗?换成更好看的表格边框,增加配色吗?不是的!

数据分析

因为就算是换排版、换配色也不是“用户可以理解”的方式,理解不是字面理解,而是对于内容的理解,“基金公司为用户提供的定投服务去相信和尝试的原因”才是这张图文的真正用意。

所以在做设计之前,一定要搞清楚:设计的目的

基金公司“定投”服务的概念属于金融理财知识,业务知识是设计的功课之一,在通读文字内容后,通过同理心来提取业务概念的核心。

理财产品的价值点在于其收益率,定投产品的收益率是通过长期投资,且复利投资来实现的。
为了显示其收益率,就需要在这组表格数据里找到对能形成对比的排列:

  • 第一组对比:起始时间结束时间
  • 与之对应的第二组对比:起始净值期末净值
  • 与第二组对应是第三组数据:投资金额(每期投资*期数)- 期末资产总值
  • 其中“期数”贯穿始终,而期数正式定投基金与普通投资基金形式上的不同点。

能理解到这个程度,就可以利用初中数学的方法建坐标轴了( 论数学对设计的重要性)。

手绘第一稿

可以看到,在没有有色笔标识之前,数据的理解就已经图形化了,而用有色笔标出的即数据的真正意义,就是刚刚没有被对比的数据,金额的变化折算的收益率就是定投产品的价值。

可视化过程

由于图**数据的意义意义已经解释清了,那么就可以再进行美化处理了。

第一次美化:

数据排版

第二次美化:

加工设计

第三次美化:

(其中客户修改了案例数据。不以“沪深300指数”为例,而以“中证基金”为模拟数据来源)

归纳数据

这一次美化,几乎又做了一次深度归纳,为什么呢?

因为从用户的角度来想,定投产品的原理是他想知道的,但他最想知道的是定投产品比普通基金投资“”在哪里?就是前文所说的目的:基金公司为用户提供的定投服务去相信和尝试的原因

好的收益率就是原因,那么只要用最简洁明了的数据就可以显示了。

那么其实只要着重突出数据表中未分组的统计数据就行了。

此版设计样式给最后成品奠定了基础。

上线版

可以看到,钱币代替了柱状图,更形象地说明了收益的情况,而收益率用更大更清晰的字符去显示定投的优势。

以上,就是这个案例能分享给你的设计过程,你更喜欢哪一版呢?

(我最喜欢手绘第一版,因为是深夜在家学习时琢磨出来哒,从0-1)

附产品上线后的页面地址:http://www.xyamc.com/fund/pc/fundvalue

 

作者:Eliza(森森),1年UX、交互设计、1年产品运营&用研、2年新媒体运营。

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

题图来自 unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
5人打赏
---蛙鱼源码WAYUYM.COM---专业提供网站模板,网站源码下载,教程培训,程序插件,网站素材等建站资源,主要收集各类精品源码资源,包含CMS程序模板、网站源码、游戏源码、APP源码等 ,所有资源都没有水印适合搬运,我们致力于打造一个优秀的建站资源共享学习平台!

专业厂家,设备先进,技术力量雄厚,自动化生产技术先进,产品质量符合国家标准,价格合理,https://www.69shenlan.com/,具有质量保证,生产及时,交货快捷的特点。 我们的宗旨:做我们擅长的事,希望用我们的创意和创意为客户实现战略定位,塑造品牌,强化形象!
我们的要求:坚持“优质产品、优质服务、优惠价格、快速交货”的经营方针,努力开拓市场,真诚为客户服务! 我们的发展:以独特的专业和专业精神,https://www.69shenlan.com/1:1--

1年

评论