图表世界充满魔法。一条曲线可以显示一瞬间的全部情况——人类历史汇总的流行病情况，恐慌趋势，或者繁荣时代。仅仅一条曲线就能让我们明白，激发我们的想象力，让事情变得有说服力。 

——Henry D. Hubbard 

数据可视化本质是将复杂无序的数据信息进行图形化显示，目的是让用户更高效获取及分析其中有价值数据。怎么把数据变得易读、易分析、美观是我们设计师的工作。

一般而言，面对一个数据可视化项目我会拆分以下5步来完成

1.分析目标用户与使用场景

随着用户的需求以及使用场景的变化，越来越多数据可视化项目从Web端转移到移动端（手机、平板等可持设备），因此面对设计需求下来，我们需要更多思考目标用户会在什么场景下使用我们的设计产物。

目标用户

不同的用户群体具有不同的使用目标，面对B端产品更多是说服负责人或老板即可，而C端产品面向用户群体更广，需要挖掘用户心理，调动用户情绪达到共振

使用场景

Web端屏幕较大，展示内容较多，而移动端一般展示关键重要的内容，因此，需要做双端数客户化设计时，我们需要作出取舍，从Web端中关键模块提取出来，在移动端上重新设计。

除此之外，需要考虑的场景特点。之前我碰到一个项目，在工厂生产条件要求，光线较为昏暗，用户在长时间中面对生产看板内容时，眼睛易感疲劳。因此，我们需要避免炫酷的设计下使用高饱和度高明度色彩造成扎眼效果，同时亦避免使用纯黑（#000000）纯白(#FFFFFF)颜色

2.提取关键业务数据

数据经过了层层筛选来到我们身边，作为搬运工怎么更好地让用户迅速读懂数据？公司人员比较完善时，会有产品经理、数据分析师、项目经理等，以上角色普遍具有强烈理性思维，作为设计师也可以发挥感性一面，发掘有价值数据。

3.交互设计&视觉设计

经过前两步分析，设计师们可以进入我们擅长的领域。在这里交互及视觉我认为逻辑关系不复杂，可一并进行。

数据可视化大部分工作集中于图表的绘制，经过上步的团队分析后，如何利用差异化（色彩及形状）凸显关键数据，同时需要注意相关细节

对比以上图中，我们会发现遇到最多的问题

1.X轴相关节点过多，导致信息拥挤，不易读取

2.X轴信息过多导致拥挤，可让相关信息倾斜排列或缩减信息，如：2019-01  02 03等显示

3.Y轴信息也可考虑将1000显示为1K等

......

参考很多大屏设计风格，黑底蓝边是否让大家感觉审美疲劳了？我们在合理的场景下使用大胆对比色凸显相关信息，前景色使用暖色调突出信息重要性，后景色使用冷色保持大屏科技感，下图是我尝试用自己理解的风格做的大屏设计：

4.细节技术

设计师通过努力创作了设计图，剩下就是让设计落地成具体项目，但是需要我们的开发同事帮助我们实现，但是并不是所有公司开发团队具有较强开发能力及充裕开发周期，因此我按照技术实现难度进行排列

开发能力较弱：可以使用阿里DataV、网易Sugar等拖拽式搭建项目

开发能力中等：使用百度的Echarts、谷歌的Hotcharts、AE+lottie制作场景动画、CSS动效

开发能力强：使用Three.JS、WebGl实现3D数据可视化

使用html+css也能做出好看的动效

3D数字可视化可利用C4D导出Dae格式源文件（可包含动作），给开发同事导入构建的BI项目中做出炫酷的城市效果

5.设计验收

设计图完成交给开发团队，不代表工作已经完成。忙碌的阶段过去了，我们需要对设计进行验收，确保视觉效果可以保持一定水平。

下图因为19年工博会大屏展示情景，比较可惜的是摊位不足只能让60寸大电视显示“数据大屏”，效果也需要作出调整。

不知道是不是有认真的观众看到这里，对看到这里的朋友们衷心说句谢谢！第一次写项目经验分享，不足之处或相关交流可以在留言中告诉我哦

Powered by Froala Editor