常听到一句话，“能用图描述的就不用表，能用表就不用文字”。这句话也直接的表明了：在认知上，大家对于图形的敏感度远比文字高。

数据可视化设计的兴起和数据可视化工具以及大数据的发展有着重要的关系。随着大数据时代的到来，更好的运用数据，更多的理解数据，成为了许多面向用户、面向政府、面向企业端的产品的应有之义。为了应对这种趋势，设计师应当如何应对、如何设计出一套专业的数据类的产品呢？

先问是什么，再问怎么做。结合实际情况来看，可视化大屏设计分为两种应用场景，一种是数据分析场景，另外一种是数据可视化场景。

这两种场景在名称上让人觉得难以区分，设计师在实际设计过程中也非常容易混淆，简单的来说，数据分析场景是和实际项目中的中后台系统相结合的，用户用其来对场景数据进行分析查看，是一种实用性更高的数据可视化展示方。媒介为电脑屏幕，在表现方式上，一般嵌套在中后台系统中，功能上着重筛选、交互，多视图展示等等。

而我们在本文所说的数据可视化场景属于第二种，目的在于展示某种结果，媒介一般是尺寸很大的拼接屏幕，交互方式偏向自动化交互，一般不需要用户操作，在实际的设计中需要考虑设备和观看者的关系从而对设计进行调整，例如，大屏的尺寸和观看人的身高的比例，考虑人眼的位置，在大屏的底部避免放置很重要的信息等等。

1.设计尺寸

拼接大屏：大屏几乎都是拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现，例如一个很大的人物图像被缝隙正中“劈成”两半，或者“劈中”了眼睛，看起来很不舒服，所以设计时可以建立缝隙位置的参考线避免类似情况发生。（现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵）

设计尺寸：拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px

2.视觉设计

有了设计尺寸就可以开始着手开始对大屏进行设计了，在这里，视觉设计的流程分为了解需求、确定可视化目标、选择图表形式、设计视觉效果、动效设计 5个阶段

2.1了解需求

首先介绍一下项目的背景，这次项目是为了在某某数博会上展示XX城市的经济运行数据，简言之就是需要以数据的方式展示一个城市的经济运行的成果，项目的周期大约只有一个周左右，由于行政级别比较高，对于设计的整个效果要求比较高，对于我们设计团队是一个巨大的挑战。

首先将需求拆分：

按照正常的项目经验，项目流程应该有产品——交互——设计——开发这样正常的开发流程，但是由于时间太紧张，只能省掉开发的部分由产品和设计来主导的一次交付项目。

根据项目的需求，我们首先要确定的是整个数据可视化的数据重点是什么？

以下图为例：中央地区的地图以及三个主要经济指标是相对比较重要的部分，数据大屏中依照地图来区分各个模块的数据维度，达到联动的效果。

2.2确定可视化目标

XX城市的经济运行数据，我们可以看以上的初步需求原型图，展示一个城市的经济运行的成果，大部分都是宏观的数据，决定着重展现趋势和体量数据，部分指标着重展示。

各个小图表展示目标详见title

2.3选择数据的展示方式

根据可视化目标来选择和确定数据图表的展示方式，通常来说，可以从数据关系和应用场景两个维度来分析

方法一.按照数据关系选择

我们拿到数据需求的时候往往是原始数据，Excel，设计师要对数据类型和数据的展示方式有一个基本认知。

本文根据数据可视化专家Andrew Abela的提炼以及谷歌发布的数据可视化设计指南相结合总结分类数据类型的6种类型：

• 比较、分布、关系、组合（构成）、流程、关系
• 
  

比较

定义：随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较

• 比较分类：条形图（多个），柱形图（少量），分组柱状图，平行坐标图，多条折线图，子弹图

• 比较时间：折线图、曲线图、柱状图、堆叠柱状图、蜡烛图、折线面积图、时间线图、地平线图、瀑布图

联系

• 定义：表示两个或多个变量之间的关系。

• 散点图（2个变量）、气泡图（3个变量）、柱状/折线图、热力图

  
  

• 分布

• 分布：分布类图表显示每个值在数据集中出现的频率。展现一组数据的分布情况，如描述性统计中的集中趋势、离散程度、偏态与峰度等
• 直方图（单个变量少量数据）、正态分布图（单个变量多数据情况）、散点图（2变量）、曲面图（3个变量）、箱型图、小提琴图、密度图

构成

• 定义：局部与整体的静态或者持续性的关系
  • 静态构成：饼图、圆环图、树状图、旭日图、瀑布图、堆叠百分比柱形图 
  • 随时间变化的构成：堆积百分比柱形图（相对差异）、堆积柱形图（相对和绝对差异）、堆积百分比面积图（相对差异）、堆积面积图（相对和绝对差异）
• 
  流程
• 定义：流程类图表显示了多个状态之间的数据移动
  • 桑基图、甘特图、和弦图、网络图
• 
  关系：
• 定义：用于图谱来展示多个项目之间的关系
  • 网络图、维恩图、和弦图、旭日图

                    这几种图表的详解将在以后的文章中详细的说明，在这里只做枚举

按照以上的方法，设计图完成稿

将在下篇分享使用data v工具将设计落地以及动效制作的方法，欢迎大家沟通交流

Powered by Froala Editor