APP数据可视化设计实战分享

我最近一直在想自己要写什么，不如这次就来说说我最近在项目中遇到的问题吧，再给大家看看我的解决方案，如果大家有更好的方案欢迎留言或者进群，我们一起探讨啊~

最近一两年我所涉及的项目都是有关于将网页的功能系统改成APP，而针对的用户就是公司的业务经理，是金融公司的业务经理们，我们的甲方爸爸！

当然这就意味着网页的产品，会有大量的数据，而且由于网页产品的信息处理还没有太与时俱进，所以大量的数据都是文字和数字的组合，因此要将这些数据改成APP时，就觉得好难啊。

表单在APP上并不好放，最好的解决方法就是设计成图表，而现在市面上图标样式不管是网页的还是APP一搜一大把，Ant Design有专门的数据网站，如下图所示：

什么样的都能找到，那么我为什么会觉得好难呢？因为数据超多der~考虑的内容又有很多，难免忧愁。

为什么要设计图表？

因为数据表单在手机上并不好展示，同时从用户体验的角度上来考虑，数据本身都是数据组成，可读性就不太好，因此如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值），图表只是最终的表现形式。

图表由哪些元素构成？

一张标准样式的图表基本上是如下图所标示的几种元素组成，如下图所示：

当然这只是最基础的一种图标形式，对于别的形式就不多介绍了，大家都有基础知识，本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计。

图表设计

1、明确数据指标

首先，我们得先搞明白这些数据是怎么来的、干嘛的，尽可能要求他们给到你的是尽可能精准的数据，否则会导致接下来的工作前功尽弃。就举我前几天的例子来说吧，产品给了我这样一张图，如下图所示：

我没有仔细的去问一些具体的信息，比如数据最多的时候会是什么样、业务想在这个表里看到什么信息、想要解决的问题什么？这些我都没有问！

上来就是一顿设计操作，把表单设计成了这样，如下图所示：

结果在走查的时候，业务很明确的指出数据信息不够多，他们想要在页面上将所有的数据信息都能看到，而数据最多的情况，数据表单是长这样的，如下图所示：

就是因为一开始在拿到表单的时候没有仔细去分析，才会导致这种情况的发生，因此要如何改进呢？

2、明确设计目的

其实图表设计跟产品设计的思路有点类似，一开始要先明确的就是设计目标，但这个很容易被设计师所忽略，因此前期在缺少设计目标支撑的情况下，设计师就会像一个没有指挥的小乐手，闭着眼睛乱弹，没有方向感。

就像我之前设计方案被推翻，就是因为思考不明确导致的，定义设计目标的过程需要站在业务的角度和数据的角度进行综合分析从而进行构建，一方面需要考虑业务如何更简单的分析、理解数据从而提高决策效率；一方面又需要考虑数据本身如何更加精准、一目了然的传达给用户。

3、规划设计方案

我在写这篇文章的时候，看了很多相关的图表文章，很多都是分析哪些不同类型的图表，配色上要怎么处理，或者哪些图标是用在什么地方的，对我都没有太大帮助，因为图表设计并不是普通的只是要好看的图表而已。

4、解决问题

重新设计之前，我去找业务很详细的了解了他们对于数据的需求，想要一目了然的看到所有的数据对比信息，数据在表单中要全部展示出来，数据后台每天都会刷新，针对的场景是来自在去拜访客户路途中查看客户目前的信息，我就将图表改成了下图所示：

由于面对的数据信息比较多，条纹图比较符合多数据的信息，当然这是数据最多的时候出现的情况，每家公司出现的数据是根据业务所提交的信息展现的。

在功能确定了之后，就是我们的细节问题，不是说我们在750*1624的画布上设计好了图表就行了，我们还要考虑到适配的问题，如下图所示：

屏幕较窄的时候，将X轴的标签文字打斜，保证数据正常阅读的同时也不影响美观度。还有一种解决方案就是有连续的数字时，可以有简写。

如何选深色底和浅色底

我们可以先来一个对比图，同样的数据在深色背景和浅色背景下的图表可读性做对比，如下图所示：

很显然浅色背景下的图表阅读效率更高，那么面对复杂数据的时候，情况是否一致呢？如下图所示：

很显然，深色更适合展示信息比较少，突出重点信息的页面，因此我们在找数据页面参考，在选择深色和浅色背景里犹豫的，可以参考一下。

划重点

这里讨论的只是我在公司项目中的其中一个图表设计，不能说做的很多，只是分享一下自己在试错的过程中的成长，从web端改到APP，都会说减少一些功能，让产品更好用，但是总有不想砍功能的需求方，如何满足这些需求，是需要我们一直都在思考的事情。

当然如果大家有更好的设计想法，欢迎在评论区留言~

更多推荐

--关于我们---

UI中国 专业用户体验设计平台

新浪微博：@UI中国