大屏展示数据可视化项目设计指南

这是一套陪标的飞机稿

现在很多机构都采购了新的大型拼接显示屏，并且对应用数据可视化进行工作业务汇报以及对一线业务势态监管需求日益强烈，成为了近年来一种普片性市场需求。

作为一名软件人机交互界面设计师，多多少少都会有机会接触到类似的工作把。

那么工作中需要注意到以下几点以一个成熟的设计师完成这项工作是没有问题的。

1、了解展示大屏的分辨率，根据大屏分辨率对应比例以最合适的尺寸输出高保证设计稿

(目前接触先来大多数都是32:9的比例也就是刚好双倍电脑屏幕，分辨率通常是7680px X 2160px设计输出3840 X 1080就可以了)

2、了解现有图表组件的基本属性。

图表类型

常见图表类型

图表属性以及可以设计的范围与技术边界。

主要组成示意图

2.1. 标题（Title）

图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。

2.2. 坐标轴（Axis）

坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。

2.3. 数据列（Series）

数据列即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。

2.4. 数据提示框（Tooltip）

当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。

2.5. 图例（Legend）

图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列。

2.6. 标示线（PlotLines）

可以在图表上增加一条标示线，比如平均值线，最高值线等。

2.7. 标示区（PlotBands）

可以在图表添加不同颜色的区域带，标示出明显的范围区域。

以上部分都是可以展开对应的设计（颜色搭配，字体大小，字号、间距、宽高尺寸）不同的搭配可以得到不同的效果。

3、数据的理解及运用

这一步现在小学生课本上都有（把数据运用到最合适的类型的图表上，易于读取数据要展示的结果）

例如：

汇总数据用柱状图

连续时间段数据用折线图或者面积图

占比数据用饼状图、环状图

综合评测用雷达图

排行用条状图

......

更多图可以去参考《数据可视化》的相关书籍

4、地图与数据的结合运用

区域数据
网点数据 关联数据 热力图

5、数据图表之间的关联交互

数据展示加上交互就可以更快捷的达到更加惊喜的效果。比如切换时间节点、地区、产品类型......快速达到预期的数据结果

左右2侧数据联动交互

6、视屏数据接入

地图与监控视频的交互