可视化大屏

主要参考书籍:《写给ui设计师的数据可视化设计》

目前市面上的可视化大屏方式

阿里巴巴（datav）：https://www.aliyun.com/product/bigdata/datav

sugar（百度）：https://cloud.baidu.com/product/sugar.html

腾讯云图：https://cloud.tencent.com/product/tcv

帆软（免费，推荐使用）：https://www.fanruan.com/

tableau（很好上手，需要安装软件，有很多破解版，学生在官网可以免费使用一年）

powerBI（商业可视化）

highcharts (需要写代码，推荐使用）

grafana（免费，但是需要账户）：https://grafana.com/products/cloud/?plcmt=nav-products-cta1&cta=cloud

echarts（需要写代码，推荐）

如何学习数据可视化设计

产品能力

• 挖掘需求
• 理解需求
• 需求评审

交互能力

• 体验设计
• 用户研究
• 交互方法论

设计能力

• 图形设计
• ui设计
• 动效设计
• 3D设计

数据能力

• 理解数据
• 分析数据
• 选用图表

可视化设计

四要素（学习步骤）

• 1. 数据感，能够通过设计表达数据
  • 研究echarts的图表里面的数据结构
• 2. 能够驾驭科技感，FUI等设计风格
  • 研究Behance网站搜索HUD
• 3. 具备动效设计的能力，因为大屏强调动感体验
  • ae
• 4. 具备3D设计的能力，能够直观地展示可视化的真实场景

  • C4D

  • AE

  • Ventuz

  • unity3D

  • Unreal en-gine4

    • 视觉呈现

核心要义

• 多看
• 多练
• 多思考

基础平面图表设计

时间变化

-  折线图

	- 折线图主要功能就是描述数据随着时间变化的趋势以及数据见的趋势比较

-  柱状图

	-  随时间变化而产生变量的数据

		-  比如每个月的店铺销量

-  堆积柱状图 

	-  两个数据之间的综合比较

-  面积图

	-  反应数据的变化趋势，确保不会覆盖彼此的数据信息

-  K线图

	-  反应趋势和价格信息的

-  瀑布图

	-  重点突出数据变化的结果，以表示多个特定数据之间的变化关系

		-  比如：每个月企业员工的增减数量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

类别比较

-  柱状图

	-  可以表示类别的大小

		-  以长度为变量，比较两个或多个不同类别的情况

-  分组柱状图

	-  同一数轴上展示各个分类下的不同分组数据

-  气泡图

	-  用气泡表示多个纬度的东西

-  平行坐标图

	-  用多个垂直平行坐标轴来展示不同纬度的数据

-  多条折线图

	-  可以表示数据随时间变化的趋势
	-  多组数据的对比情况

-  子弹图

	-  可以表达丰富的数据信息，高效的传达信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

排名

-  有序条形图

	-  有序条形图是最常用的排名图形

-  有序柱状图

	-  如果是排名的话建议还是用有序条形图
1
2
3
4
5
6
7

占比

-  饼图（不推荐）
-  环形图（推荐）

	-  相对于饼图的利用率更高

-  堆积面积图

	-  可以展示店铺总销量，还可以展示每种商品在对应月份上的占比情况

-  矩阵树图

	-  环形图只适用与类别比较少的，但是矩阵树图可以进行多个分类，则可以在大分类中不断下钻

-  旭日图

	-  旭日图就是多个饼图，越内层的圆环层次越高，越往外层级越低
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关联

-  散点图

	- 点的位置由XY决定，越密集说明数据的关联性越强，反之关联性越弱

-  气泡图

	-  散点图只能单个维度，不能多个纬度，如果想展示多个纬度，气泡图是最合适的

-  柱状图+折线图
-  热力图

	-  热力图一半用冷色到暖色的不同来表示数据从大到小的权重
1
2
3
4
5
6
7
8
9
10
11
12

分布

-  直方图

	-  直方图主要展示数据的分布情况，区间是连续的，柱子之间没有间隔

-  箱形图
- 小提琴图

	-  上下边界与箱型图的箱子一样为四分位
1
2
3
4
5
6
7
8

关联图形

-  桑基图

	-  桑基图也被称为桑基能量平衡图，因为桑基图始末端的分之宽度总和相等，可以表示数据见的关系和一种特定类型的流程图

-  和弦图

	-  和弦图用于表示数据间的关系，外围的不同颜色表示不同的分类，边的大小表示数据的大小

-  韦恩图

	-  通过图形与图形的叠加，表示集合与集合之间的相交关系，一般用于表示2·~5个集合的关系
1
2
3
4
5
6
7
8
9
10
11