可视化图表设计
2023-01-09 10:12:59 1 举报AI智能生成
可视化图表设计是一种将数据转化为图形或图像的技术，以便更直观、更容易地理解和解释数据。它可以帮助用户快速识别数据中的模式、趋势和关系，从而更好地支持决策制定。可视化图表设计通常包括选择适当的图表类型、确定数据的范围和比例、选择合适的颜色和字体等元素。在设计过程中，还需要考虑用户的视觉感知和认知习惯，以确保图表的可读性和易用性。通过使用可视化图表设计工具，用户可以快速创建专业的图表，并将其嵌入到报告、演示文稿或其他文档中，以增强信息的传达效果。总之，可视化图表设计是一种强大的工具，可以帮助用户更好地理解和利用数据。
作者其他创作
大纲/内容
选择合适的图表
分析数据关系
构成关系
用于分析总体和各部分的占比比例
常用图表
一般：饼图/环图、堆叠图、面积图
涉及到层级结构：矩形树图、旭日图
关键词：占比、比例、百分比
比较关系
在一定取值范围内，通过对两个或两个以上的指标分析，可以直观看到变化和差距
常用图表
趋势对比
折线图
散点图
分类对比
条形图
柱状图
气泡图
关键词：增减、升降、涨跌、波动
分布关系
利用空间分区来展示数据之间的分布关系，常用于两个或以上数据的相关性
常用图表
关键词：随着.....而变化 A和B之间的相关性、交并集等
关联与流转
动态地体现相关路径下对象之间的关系，状态，数据量的流转变化等
常用图表
关键词：流程步骤、留存、转换、关系
分析数据特征
变量特征
连续型数据
指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。
离散型数据
指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。
维度特征
多维度分析需要将多个变量在同一平面直观表示，可以使用极坐标系去展示多个维度变量
根据分析视角选择图表
对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。
层级特征
矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。
旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过1个圆环表示，离原点越近代表圆环级别越高。旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。
旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过1个圆环表示，离原点越近代表圆环级别越高。旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。
流程特征
流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径。
其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。
强化视觉层次
强化数据特征
趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。
展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。
色彩视觉传达
定性型：使用色调来进行分类
选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。
色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。
定量型：使用深浅色板强调内在顺序
顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。
发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。
图表中的响应式设计
布局框架适配
在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间。
元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
图表元素适配
信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在移动端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。
坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。
极值适配
缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。
互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。
悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。
0 条评论
下一页
