数据可视化是把相对复杂、抽象的数据通过可视化手段，表达数据内在的信息和规律，促进数据信息的传播和应用。
Dreawer Design 团队总结了以下四个可视化原则，供设计者参考及使用：
1. 准确
数据图表需精准、如实地反应数据信息的变化特征。
2. 清晰
让设计服务于数据内容，给用户以最为清晰、明确、迅捷的数据展示。用户看到可视化图表时，应能在 5 秒内了解到它的用途，而不是花几分钟都不能理解各个数据的含义。
3. 简单
可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
下面为图标类型与认知成本对比：
4. 美观
优秀的数据可视化界面，会有一套非常严谨一致的版面。这里的一致性需要考虑到布局、结构和内容。
1. 构成元素
我们从标题、坐标轴、图例、标签、提示信息、数据图形这 6 个大类，对数据图表进行进一步元素拆解及阐述。设计过程中，需遵循可视化原则来精简数据图表，让用户快速获取图表中的关键信息，完成任务。
图表构成 6 大类，元素细分：
标题：图表标题；
坐标轴：X/Y 轴线、刻度线、网格线、X/Y 轴标题、X/Y 轴标签；
标签：数据点、引导线、（文本）数据值；
提示信息；
图例；
数据图形：线、矩形、扇形、环形等。
下面为数据图表的基本构成元素示例（为了便于观察，某些字母做了大写处理）：
除了以上的常规元素，还有常用于饼图、环形图中的“引导线”：
2. 标题
标题是概括图表主题的说明文字，一个明确、精简的标题可以迅速让读者理解图表要表达的内容。
① 位置
一般位于数据图表卡片的左上方。
② 使用建议
标题需言简意赅、符合图表主题；尽量控制在 20 个字以内，标题宽度尽量不要超过卡片宽度。
③ 超长处理
当标题超过长出卡片宽度时，省略标题中间的文字，保住首尾，如“我是...标题”。
3. 坐标轴
① 坐标系
坐标轴包含在坐标系的概念里，因此，我们需要先了解坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。
数据可视化中，最常用的二维坐标系有两种：
笛卡尔坐标系：即直角坐标系，是由相互垂直的两条轴线构成。常用于柱状图、条形图、折线图、面积图等。
极坐标系：由极点、极轴组成，坐标系内任何一个点都可以用极径 r 和夹角 θ（逆时针为正）表示。常用于饼图、圆环图、雷达图等。
补充说明：
坐标轴由定义域轴（X 轴）和值域轴（Y 轴）组成。条形图中，定义域轴为 Y 轴，值域轴为 X 轴。
X 轴为水平方向的横轴，Y 轴为垂直方向的竖轴。以下主要针对笛卡尔坐标系的坐标轴构成进行分析：
② 坐标轴
定义：坐标轴指二维空间中统计图表中的轴，是坐标系的构成部分，它用来定义坐标系中数据在方向和值之间的映射关系。
构成元素细分：X/Y 轴线、刻度线、网格线、X/Y 轴标题、X/Y 轴标签。
③ 轴类型
根据对应变量是连续数据还是离散数据，可以把坐标轴分为：分类轴、时间轴、连续轴三大类。
④ X/Y 轴线
颜色层级：X/Y 轴线要比网格线层级高、颜色深，这样能让图表有主次区分。
使用建议：有网格线时，柱状图/折线图会隐藏 Y 轴线，条形图则是隐藏 X 轴线，以达到信息降噪、突出重点的目的。
⑤ 刻度线
轴刻度线是轴线上的小线段， 用于指示数值标签在坐标轴上的具体位置。轴刻度线有 3 种放置方式：置内、置中（即交叉方式）、置外。
位置建议：刻度线置中/置内时，可能会和网格线、数据图形重叠，所以建议将刻度线置于数值坐标轴外侧，以呈现最佳显示效果。
显示建议：
折线图：刻度线、X/Y 轴标签、数据点需要保持在同一垂直线上；
柱状图/条形图：由于单个柱子有很强的对应关系，此时可以隐藏刻度线；
⑥ 网格线
定义：网格线是用来辅助图表优化映射关系的，我们需要弱化网格线的视觉效果，来增加数据的可阅读性。
作用：1. 延伸数值刻度至可视化对象中，以便观察数据值的大小；2. 增加可视化对象之间的对比观察度。
使用建议 1：使用网格线时，需遵从主次原则，以轴线为主、网格线为辅；样式上可采用实线或虚线；避免颜色过重、使用纯黑/纯白色。
使用建议 2：网格线一般跟随值域轴的位置单向显示，柱状图、折线图等采用水平网格，条形图采用垂直网格。
⑦ X/Y 轴标题
轴标题主要用于说明坐标轴数据组的含义，也可理解为“轴单位”。当可视化图表标题、图例、轴标签等已能充分表达数据含义时，可隐藏轴标题。
这样处理体现了奥卡姆剃刀定律：如无必要，勿增实体。
⑧ X/Y 轴标签
轴标签是对当前某一组数据的内容标注，用于提高数据的可读性。
以下从 X 轴标签、Y 轴标签两方面进行分析：
a. X 轴标签
X 轴标签的设计重点在显示规则上。卡片宽度过窄、标签过多、名称过长时，X 轴标签便会出现显示问题（如标签重叠等）。
创意设计 设计素材 免费素材 海报设计 背景板 PSD下载 作品交易 海报设计 素材下载
