UI中国|APP数据可视化设计实战分享
我最近一直在想自己要写什么 ， 不如这次就来说说我最近在项目中遇到的问题吧 ， 再给大家看看我的解决方案 ， 如果大家有更好的方案欢迎留言或者进群 ， 我们一起探讨啊~
最近一两年我所涉及的项目都是有关于将网页的功能系统改成APP ， 而针对的用户就是公司的业务经理 ， 是金融公司的业务经理们 ， 我们的甲方爸爸！
本文插图
当然这就意味着网页的产品 ， 会有大量的数据 ， 而且由于网页产品的信息处理还没有太与时俱进 ， 所以大量的数据都是文字和数字的组合 ， 因此要将这些数据改成APP时 ， 就觉得好难啊 。
本文插图
表单在APP上并不好放 ， 最好的解决方法就是设计成图表 ， 而现在市面上图标样式不管是网页的还是APP一搜一大把 ， Ant Design有专门的数据网站 ， 如下图所示：
本文插图
什么样的都能找到 ， 那么我为什么会觉得好难呢？因为数据超多der~考虑的内容又有很多 ， 难免忧愁 。
为什么要设计图表？
因为数据表单在手机上并不好展示 ， 同时从用户体验的角度上来考虑 ， 数据本身都是数据组成 ， 可读性就不太好 ， 因此如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值） ， 图表只是最终的表现形式 。
图表由哪些元素构成？
一张标准样式的图表基本上是如下图所标示的几种元素组成 ， 如下图所示：
本文插图
当然这只是最基础的一种图标形式 ， 对于别的形式就不多介绍了 ， 大家都有基础知识 ， 本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计 。
图表设计
1、明确数据指标
首先 ， 我们得先搞明白这些数据是怎么来的、干嘛的 ， 尽可能要求他们给到你的是尽可能精准的数据 ， 否则会导致接下来的工作前功尽弃 。 就举我前几天的例子来说吧 ， 产品给了我这样一张图 ， 如下图所示：
本文插图
我没有仔细的去问一些具体的信息 ， 比如数据最多的时候会是什么样、业务想在这个表里看到什么信息、想要解决的问题什么？这些我都没有问！
本文插图
上来就是一顿设计操作 ， 把表单设计成了这样 ， 如下图所示：
本文插图
结果在走查的时候 ， 业务很明确的指出数据信息不够多 ， 他们想要在页面上将所有的数据信息都能看到 ， 而数据最多的情况 ， 数据表单是长这样的 ， 如下图所示：
本文插图
【UI中国|APP数据可视化设计实战分享】就是因为一开始在拿到表单的时候没有仔细去分析 ， 才会导致这种情况的发生 ， 因此要如何改进呢？
2、明确设计目的
其实图表设计跟产品设计的思路有点类似 ， 一开始要先明确的就是设计目标 ， 但这个很容易被设计师所忽略 ， 因此前期在缺少设计目标支撑的情况下 ， 设计师就会像一个没有指挥的小乐手 ， 闭着眼睛乱弹 ， 没有方向感 。
推荐阅读
- 钛媒体APP|B站宣布要上天！拟6月下旬发射，主要用于科普教育
- 宅客ZhaiiKer|杜比全景声音乐平台Tidal上线，暂只支持Apple TV 4K等少数产品
- |荷兰企业推出全新半导体技术，并承诺对华投资！中国光刻机获突破
- 搜狐新闻|苹果专利显示肌电感应的Apple Watch手环可以更准确地检测到手势
- 中国企业家|李彦宏和王兴们，在这里拿到通往未来的船票
- 腾讯新闻深网|小米引入新高管，任命杨柘出任中国区CMO
- 雷锋网|登上 Science！电刺激控制基因表达，APP 一键释放胰岛素
- |官宣！杨柘出任小米集团中国区CMO 负责品牌建设等
- 人群中国科学家通过古人基因组数据探寻中国文明源流
- 中国电池网|互动交流│常铝股份：向国轩高科供应电池箔产品