数据可视化设计

概述

技能项

设计要素：数据感；设计风格；动效设计；3D设计

图表设计

Echarts

图表类型示例：Examples - Apache ECharts

• 柱状图：基础柱状图；堆叠柱状图；动态排序柱状图；阶梯瀑布图；
• 折线图：基础折线图；堆叠折线图；区域面积图；平滑曲线图；阶梯线图；
• 饼图：基础饼图；圆环图；玫瑰图；
• 散点图：基础散点图......

图形-数据结构

分类：随时间变化、类别比较、排名、占比、关联、分布、关系；

• 随时间变化：对一段时间内数据的展示，如单个或多个分类数据之间的趋势变化和比较。常见的图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。
• 类别比较：主要用于两个或两个以上类别数据的比较。常见的类别比较图形有柱状图、分组柱状图、气泡图、平行坐标图、多条折线图、子弹图。
• 排名：可以展示每个分类数据的排名顺序，还可以直观地展示最大数和最小数等。常见的有序条形图、有序柱状图及平行坐标图，都可以作为排名图形使用。
• 占比：主要用于展示分类数据占整体的比例情况，常用的图形有饼图、环形图、堆积面积图、矩形树图、旭日图等。
• 关联：展示两个或两个以上的数据变量之间的关系，常见类型有散点图、气泡图、柱状图+折线图、热力图等。
• 分布：主要用于展示每个数值在数据集中出现的频次或数量，常见类型有直方图、箱形图、小提琴图等。
• 关系：表示多个状态之间的关系及数据移动的变化，常见类型有桑基图、和弦图、韦恩图等。

图形选择：

• 根据真实数据
• 突出价值数据
• 可读性

图形设计

表格设计

原则：文字左对齐，数字右对齐；弱化边框；强调标题；突出重要信息；

数据可视化产品设计

B端产品关注业务

设计流程

展示型or 功能+展示型

需求调研

业务需求：解决哪些问题、服务哪些人群

用户需求：分角色的用户需求

技术方案：动效与3D效果等能否实现

数据分析

产品设计

视觉设计：格式塔原则、KISS（Keep It Simple and Stupid）原则、一致性原则，以及平台的设计规范

大屏设计尺寸：投屏电脑与显示大屏同比例的情况下，区分是否4K；优先按大屏的比例定义设计尺寸；

大屏分屏、字号、布局、黄金比例、用色、文案、

交互设计

动效设计

3D可视化设计

工具与案例