前言

随着C端红利的消失，这几年有部分设计师开始转入到B端。

而目前市面上做B端的公司基本上都在做大数据业务，那我们怎么才能把不可见的数据转化为可见的图形符号，能将错综复杂、看起来没法解释和关联的数据，建立起联系和关联，发现规律和特征，获得更有商业价值的洞见和价值。

我们可以借助可视化图表寻找数据规律、分析推理、预测未来趋势。另外，利用可视化技术可以实时监控业务运行状况，更加阳光透明，及时发现问题第一时间做出应对。

废话不多说，我们进入正题.....

之前已经有很多前辈分享过一些相关的文章，我这次主要是以一个新人的身份来分享2019年这一年做可视化大屏的一些心得体会。

希望能帮助到准备进入这行的朋友，共同探讨和学习！

1.1需求分析

一般在做之前我们会拿到产品或者需求方给的需求文档，不同人给的方式也会不一样，比如下图：

这种是比较好的一种，因为已经帮你把信息梳理好了，你可以直接在上面做视觉效果，当然如果你有比这个更好的表现形式也可以换（换之前要和需求方沟通一下）。

如果是这种就需要自己去梳理一下，看用什么形式展示，我通常会先去纸上大致画一下，条件允许可以给到需求方看看，讲述一下你的想法，这样避免后期返工。

1.2灵感来源

这里要感谢互联网时代的进步，让我们可以便利的获取到各种资源进行学习和参考。

首先要说的就是echarts官网，在这里你可以学习到各种基础图形的表现形式，如果你公司前端比较厉害，可以在基础图形基础上进行创意，甚至可以脱离这种基础图形的制作，后面我们再详细介绍。

https://www.echartsjs.com/examples/zh/index.html

花瓣网也是一个灵感来源地，搜索可视化大屏、可视化图表、数据地图......等都可以找到一些参考。

https://huaban.com/search/?q=%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F&type=pins

除了上述这些以外还有站酷、ui中国都是可以进行参考的地方，这里就不在多举例。

1.3页面布局

有了前面的准备相信现在脑子里已经有了大致的思路，这时不要急着去做，先根据需求文档内容结合参考案例把页面框架先画出来，因为很多时候大屏都是2K 、4k的屏，可能还会出现比这个更大的分辨率，如果急着去做修改的时候可能大于制作时间。我们可以先在ps里面建一个对应尺寸的画布，把布局先画出来，有时候想的很好，但是做完后会发现页面整体不是很协调。

1.4颜色搭配

做可视化大屏和做网页、移动端还是有一些区别，颜色不能太单一也不能太花，单一色会让人感觉很沉闷，颜色多了又会感觉很花哨，我记得我第一次做大屏，我们负责人过来看了一眼，说了句“如果客户是50岁的人可能会喜欢你这个配色”，现在回头看第一次做的确实有点辣眼睛。

后来就花了点时间研究了下可视化大屏的配色，发现大部分配色都是采用的深蓝色，这个可能和科技、数据以及承载的硬件环境有关。辅助色大部分是采用橙、黄、绿、红，当然也会有一些其它颜色，因为大屏里面会涉及一些图表，比如饼图10个指标就需要10种颜色。

我一般是选一个主色调配合对应的同色系去使用，图形上配合辅助色。下面用一个案例举例：

这个客户是做环保相关业务，如果我们直接就用蓝色去做可能会有一些问题，应该先去看看客户的相关资料，比如网站、宣传物料之类的，我当时是看到他们官网用的是蓝绿色，所以我在做的时候加入了一些绿，这样做的好处是第一客户可能比较喜欢蓝绿色，第二就是可以和整体宣传物料形成统一。

P.S：1、不是所有的行业都可以使用官网的品牌色，比如有些品牌色是红色，大屏做成全红就不太合适，目前我接触到的只有党建大屏会用到全红色。2、不要每个模块都去使用辅助色，尽量使用同色系，辅助色只作为点缀色使用。

1.5头部设计

通过头部色彩搭配、元素运用就可以猜测这个网站“有几分”，这是在web时代的设计要领。

后来随着扁平化、交互式网站的流行，很多时候会把头部和内容进行结合，也就很少会单独去设计头部。

可视化大屏设计也是有相同之处，如果你做的是扁平风格，主要是通过交互和动画的形式去展示，头部就可以通过极简的方式处理（类似下图）。

反之你的内容没有太多的交互和动画效果，更多的通过视觉光效明暗渐变的形式设计，这个时候头部可能就比较重要了，否则内容视觉很重，头部很轻看着就会不协调。

下面是平时做的一些头部样式：

1.6内容设计

设计内容前我会先把外框样式设计好，每个人设计方法不一样，我这里主要是分享我自己的方法，内容设计也是基于框架图去做。

内容怎么放、用什么样的形式在我们做框架图的时候就要想好，否则这个框架就没意义了。

在做框架设计的时候可以找个星空背景，对应标题也可以找点图标或者给点装饰。

设计内容有两种方式，一种是用常规图形，也就是我们灵感来源里面提到的echarts官网，里面会有很多图表，开发可以直接把代码拿过来用。

设计需要做的就是画图表和配色，这里推荐一个插件https://pslkzs.com/index.html，可以帮助解决一些体力劳动。

比如我们经常用的地图，特别是城市地图，网上不是很好找，需要去网上下载jpg对照着描线，还是比较麻烦的，ps助手官网提供大部分城市的地图路径，复制到ps插件可以自动绘制，自动分层方便后期根据自己需要进行调整。

第二种就是定制开发，可以根据业务数据进行创意设计，这种就需要开发技术支持，如果不知道能否做出来，最好问下开发。

大屏有个很重要的地方就是主图，也就是占比最大的区域，是整个屏的亮点，可以花点时间做，

这几年比较流行2.5d加上也比较好出效果和做动画，所以这一年做的很多2.5d的形式。

其它图表大部分还是基于官方图形进行扩展，也可以根据行业属性进行图形设计，比如官方提供的漏斗图和柱图我们可以在此基础上进行扩展生成另外一种形式。

可能有些数据内容比较多，这个时候如果用官网的图表不是很好排列，这个时候可以利用其它图形进行展示，比如下图里面的部分图形，我一般会去网上找科技相关的素材，从中提取部分形状结合数据形成新的图表

1.7整体优化

有时候做完后发现画面比较暗，视觉没有突出，然后又去一点点调整，这个时候可以利用图层样式的亮度与对比度+曲线+饱和度进行调整，这样可以快捷的调出效果，等客户确定后切图做动画的时候再去单个调。

科技大屏怎么能少了光，可以去花瓣网搜索光效，会出现很多光效素材，找一张黑底光效，放到需要发光的地方做图层叠加，一般常用就是滤色，也可以尝试其他效果。对一些特殊图形加光效可以CTRL+T图片变形手动调整自己想要的效果。

Powered by Froala Editor