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

恰年 网页设计 2017-12-11 12:44:39 261
摘要:在UX设计中有一种设计叫信息设计,就是如何让查看信息的人一目了然,金融数据往往会面临这样可视化的问题,让用户看到一张简单易懂的图的背后,是信息的逻辑。小试牛刀,此文做一个简单举例。

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

  

 

  背景介绍

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

  

 

  客户的需求文案

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

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

  数据分析

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

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

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

  理财产品的价值点在于其收益率,定投产品的收益率是通过长期投资,且复利投资来实现的。

  为了显示其收益率,就需要在这组表格数据里找到对能形成对比的排列:

  

  第一组对比:起始时间–结束时间

  与之对应的第二组对比:起始净值–期末净值

  与第二组对应是第三组数据:投资金额(每期投资*期数)- 期末资产总值

  其中“期数”贯穿始终,而期数正式定投基金与普通投资基金形式上的不同点。

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

  

 

  手绘第一稿

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

  可视化过程

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

  第一次美化:

  

 

  数据排版

  第二次美化:

  

 

  加工设计

  第三次美化:

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

  

 

  归纳数据

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

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

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

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

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

  

 

  上线版

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


版权声明

本文仅代表作者观点,不代表本站立场。

本文系作者授权本站发表,未经许可,不得转载。

相关推荐
优能自媒体系统采用独家首创的广告赞助模式,不仅适合于个人自媒体的广告投放,更加适合于团队自媒体人集体创作。仅需999元即可享受终生授权!远非市面上其他模板网站所能比拟。优能自媒体用过才说好!
优能cms 刚刚 优能广告
作为设计师,利用设计工具化可以帮助我们节省因重复设计产生的工作时间,实现从设计支撑到设计驱动的价值转化。让我们更专注于用户体验和对产品的创新,并且把自己带到更高的视野,经过全链路实践,提高自身专业影响力和核心竞争力,从而完成设计新时代的进阶之路。
恰年 2017-12-30 815 组件化设计 
  虽然有很多优秀网站可以借鉴,但是设计一个出色的网页并不是一件容易的事。尤其对于专业从事网站设计的设计师来说,更是如此,在日复一日不间断的网站设计面前,不仅已经审美疲劳而且已经创意枯竭。可是由于现在网站都做的很漂亮,用户的审美也变的挑剔起来,如何做出富有新意且让用户满意的网站,是一个不小的挑战。
恰年 2017-12-30 726 网站设计 
看看这些体育俱乐部网站的设计理念获得灵感!这些体育俱乐部网站可以应用于任何体育相关的网站,从足球,篮球,健身,瑜伽等等。
恰年 2017-12-25 926 网页设计 
作为一名优秀的设计狗,要是没有十个八个设计素材网站,或者哪个素材网站的会员,都不好意思说自己是从事设计行业的。
恰年 2017-12-24 872 网站设计 
在各种UI表单当中,错误信息的呈现形式常常存在一些潜在问题,有些产品甚至直接忽略了报错信息。报错信息的设计不当有很多不同的呈现形式,不过大多数都表现为在错误的时候提醒,或者包含有误导性的信息。
恰年 2017-12-23 694 UI报错信息 
文章排行
  • 日榜
  • 月榜