随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。所以数据可视化设计，绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化设计，肯定是一头雾水，不知从何入手。本文结合最近设计案例，分享大屏可视化设计过程中遇到的一些问题以及设计思路，供大家一起交流与学习。

往期回顾：

数据可视化大屏该如何设计？结合实战案例来教你！

本文从数据可视化大屏设计前的准备，到设计思路的案例实操，为你分享一个完整的数据可视化设计思路。

△ 最终动态效果图

案例分解

首先放的是项目改版前的页面：

1. 需求介绍

某某应用云，分为五大云平台模块：云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。

可视化⼤屏首页需要展示的内容包括：

2. 需求分析

分析大屏可视化的一些共性：

结合大屏的一些共性特点针对看到的线上旧版本设计，分析存在的问题。

3. 布局

整合数据，分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局，可以先在纸上画一画，然后脑子里有大概思路以后再用电脑绘制，如下图：

采用栅格化对称布局，让整体视觉左右平衡。

4. 风格

一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。

了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择，确定一个大致的风格，然后结合具体的业务场景进行设计。

5. 颜色

颜色上结合产品使用场景，以及整个产品调性还是以蓝色为主，背景选用深色调，让视觉更好聚焦，内容部分采用比较透亮的蓝色系，保证内容与背景有一定的对比关系，便于业务信息传达。

6. 主体地图

地图为大屏的主要展示内容，首先分析展示的目的是为了看清各个城市间的不同分布情况，和城市数据的汇集效果。

如图：

改版前：地图过于单薄，没有立体感，太平缺乏层次，颜色黄色不符合产品调性。

改版后：主色调改为科技蓝，在原有地图上增加外发光和多层阴影叠加，增加地图的立体感，地图上增加科技线条上升的效果代表每个城市数据变化的提升，地图背景采用比较弱化的转动线条圆形，衬托地图主体数据可视化动画效果图，使得画面更加丰富。

7. 地图效果的实现方法

首先用 ps 拉框助手新建一个山东的地图（拉框助手的使用获取方法可以参照上篇文章）。

完成后会得到一个叫 map 文件夹的地图分层文件，如图所示。这里需要对每个城市的颜色进行调整，为了区分每个城市之间的数据不同关系。

调整完块之间的颜色后，就需要给地图整体增加立体效果。

首先，是整体给地图加了一个描边和外发光。描边是为了强化地图边缘，外发光是为了地图与背景有一个区分。

其次为了增加地图立体感，需要给地图增加多层阴影叠加的效果。复制现有形状层，拼合成一个山东省的地图，如下图：

最后，把拼合好的图层移动到 map 文件夹下面，阴影可以添加多层，这里针对每一层进行不同颜色大小的调整，就是下面的这种效果了，地图的体积厚度感也就出来了。这里只是提供一个大概的思路，大家可以多去尝试。

整体地图效果调整完成后，就是给地图增加些纹理，和上升线条这些细节上的效果了。纹理可以用图案叠加，或者找一张纹理图剪切蒙版实现，最后再添加上升线条的效果，地图的效果就完成了。

最后加上线条上升的动态效果：

8. 数据图表拆分

在选定数据图表之前，首先要确定图表之间的关系，可以从以下四个维度进行思考分析：

可以参照下面这个图：

△ 图片来自于网络，侵删

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看，可根据选择的图表在其基础之上进行美化设计，总之选定图表最重要的两个点就是：易理解、可实现。

易理解：就是要考虑最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

可实现：主要是跟开发前期沟通好实现方式，一般都采用开源组件库的居多，比如 echarts 组件库，我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以

来源【首席数据官】，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！