定义
借助视觉的表达方式，将数据用有趣、浅显、直观形式去传达给观众的一种手段。生成物是信息图标，由信息和图形组成（Inforgraphics）
最初是纸媒上刊登，目的是帮助人们理解新闻信息的视觉化内容。
分类
六大类：图解（Diagram）、图表（Chart）、表格（Table）、统计图（Graph）、地图（Map）、图形符号（Picgram）
01.图解-用插图对事物进行说明
image.png
02.图表-用图形、线段、插图等阐述事物的相互关系，简化对大量数据之间的理解。
用户通常理解图表会比理解数据快。图解和图表的区别在于前者是用可视化的手段去传递信息，图表使阐述信息之间的关系。例：流程图
03.表格-根据特定的信息标准进行区分，设置纵轴和横轴
image.png
04.统计图-通过数值来表现变化趋势或者进行比较。
image.png
05.地图-描述在特定区域和空间里的位置关系
将真实的世界转换为平面，无论在哪种信息地图，最重要的是让用户找到想到要看到的信息。
展示形式包括：将整个区域的布局或结构完整呈现的地图；将特定对象突出显示的地图。
06.图形符号-不使用文字，直接用icon传达信息
通过用易于用户理解、与人直觉相符的图形传达信息的一种形式，比如限速标识，人们会约定俗称的用一些符号来代表一些固定的意思。比如男女厕所，不要超出用户常见的理解范围。奥运会中图形符号的应用
image.png
常用的六种图标：柱状图、条形图、折线图、饼图、散点图、地图
image.png
选择合适的图表需要先对数据组的数量进行分类。
a.当仅有一组数据
标签（Lable）：含有数据的标签
image.png
进度圈图（Progress Doughnut Chart）
image.png
折线/面积图（Line/Area Chart）
image.png
直方图/密度图（Histogram/Density Plot）
显示相同类型的数据。直方图使用以等间隔分布的列，而密度图具有连续的曲线。
image.png
时间线（Timelines）
用于说明按日期排列的一组事件。垂直时间轴便于移动/滚动
image.png
b.2组数据类别
强调数据的团体关系
韦恩图（Venn Diagram）
不是UI中显示数据的一种流行的方式，但通常用于信息图表设计。用字啊显示重叠区域或突出显示两组数据内容的差异及重叠性。
image.png
直方图/密度图（Histogram/Density Plot）
如果要在一处显示多个直方图，则可以使用“密度图”。用这种图表来显示两个变量如何相交。
image.png
强调数据之间的比较
条形图（Bar Chart）
用于显示两个（或多个）变量之间的差异。
image.png
折线图（Line Chart）
用于显示变化在X轴上的定量值，比较随时间变化的两个值。
image.png
面积图（Area Chart）
比较两个或多个不同的数据集。
image.png
强调数据之间的比例大小
饼图（Pie Chart）&环形图（Dougnut Chat）
image.png
c.多组数据类别
表格（table）
显示任何数据的好办法，尤其是具有大量变量的数据集。
image.png
强调大量数据间的比较
条形图（Bar Chat）&多组条形图（Multiset bar chart）
用来将两个或多个数据系列并排并按类别分组在一起，置于同一轴上。
image.png
image.png
线型图
类似两个变量的折线图，曲线和面积也可以应用与折线图
image.png
强调多组数据间的相关性：此类别的三个图表通常在实践中很少用于UX项目作为显示图表，因为它的易读性较弱，缩放后很难阅读。
散点图（scatterplot）
用于显示大量元素，将彼此进行比较，并发现与主要趋势不同的元素。
image.png
气泡图（bubble chart）
散点图再多增加变量。
image.png
马赛克图（mosaic plot）
使用两个轴的图，两个轴具有百分比比例的变量，像一个矩形分成多种碎片
image.png
强调多组数据间的比例
饼图&环形图
image.png
堆积条形图（stacked bar graph）
用于显示如何将较大的类别划分为较小的类别，以及各个部分与总量的关系。
image.png
地图（map）
与地理相关的数据
image.png
其他图表类型：这组的大多数无法根据移动设备的大小进行扩展
树形图（tree chart）
用于显示元素之间的层次结构和关系。在交互式系统中，必须垂直和水平滚动。这类图中很难使用标题。
image.png
雷达图（radar chart）
缺点在于由于名义上是独立的，所以轴表示的比例大不相同。
image.png
和弦图（chord diagram）
缺点是存在对各交叉点，很难读取。另外，图形区域占用了大量空间，组签名排列成一个圆圈。这意味着很难将标签移动到图表之外。
image.png
平行组Parallel sets（桑葚图Sankey chart）
缺点是存在重叠区域的问题，但由于用户被迫水平滚动，较长的宽度也会造成问题。
image.png
镜像条形图（radial bar chart）
缺点在于由于不同的弧度，因此尽管他们代表相同的值，外侧的长条看起来比其他长。
image.png
森波斯特图（sunburst）
具有许多按组划分的环，这些环构成扇区。缺点是在显示小标题时存在问题，易读性较弱。
image.png
晶须图（whisker plots）
缺点是复杂，难以理解
image.png
烛台图（candlestick chart）
用于交易工具来处理价格走势，衍生工具，货币，股票，债券，商品等。
image.png
矩阵热图（matric heatmap）
缺点是通过表格查找方法分析矩阵热图中的数据通常是不可行的，因为不可能以足够的精度推算出与给定颜色相对应的数值。此外，数据不是以显示趋势的方式聚类的。
image.png
3.视觉设计
a.注意：配色方案的包容性，包容正常模式、红绿色盲模式、灰度模式。色盲人士难以阅读低包容性的可视化图标
image.png
b.注意：足够多的颜色种类，至少需要六种颜色的调色板来进行设计，灵活应对图表中的复杂信息层级。
image.png
4.突出信息
a.重要的内容用颜色做区分。特殊处理包括：添加辅助线，更改颜色，线条粗线等方式，加大与其他数据的对比，来引起用户注意，表明观点。
image.png
b.把不重要的内容变为灰色
降低层级可以改变颜色对比度，通常用灰色标记未被选中的元素或背景。为重要的数据点做对比的数据。
image.png
d.添加必要的辅助说明
对图表进行特殊处理，包括做一些突出某些信息的标注
image.png
e.添加必要的辅助线
针对柱状图和折线图，当呈现变化可以添加辅助线直观体现
image.png
图标制作规则
1.通用规则
a.图标线条：有无刻度线。
当数据数值非常重要，需要使用刻度线来让用户清楚了解数据
image.png
刻度线的颜色
刻度线属于背景的一部分，显示层级要低。不要使用全黑或全白的线条，可以用灰色的点状线或虚线代替实线。
image.png
坐标线
坐标线应该比刻度线，线条更粗，颜色更深，才能让整个图表主次区分
b.选择合适的坐标上下限
下限不设置为0，可以让柱状图在视觉表现上形成强烈对比，用户将会感受到不正确的比例关系。
image.png
image.png
注意：在观察柱状图的高低趋势往往不能得出正确结论，要配合坐标轴起始位置来看。
选择合适的坐标上限，如果为了比较各个数值的数据，可以用数据的最大值作为坐标轴上限。如果需要将数据与某个最大值比较，则用此最大值作为上限。
image.png
c.刻度值
间隔均匀，如0，5，10，1，20
注意不要使用非水平和竖直的文字标注，也不要转行。数据可视化的第一要义是简单易懂，在遇到标签文字过长（国家）可以采取横向排列等方式处理。
image.png
d.数据的处理与排列
在绘制图表前对数据进行排序，而不是随机排布。这样可以在图表中展示更多信息，即某个数据在总的数据库里面的排序。
大小排序
image.png
image.png
刻意排序，把对比的数据从高到低先排序。把数据最高的和最低的项单独放置，并给与特殊颜色单独显示。把两个数据放置在最后，再次突出对比，吸引观众注意。
image.png
e.关于图例的设计
数字需要四舍五入，数字取整，让用户感受数据的概念而非具体数值。
标记图例的边界比标记图例的范围更好，多种颜色做区分，边界会提高用户的阅读效率。
image.png
水平或者竖直方向的图例。对于数字刻度，水平更容易阅读。
image.png
但是对于有类别区分的图例说，垂直图例往往效果更好，因为可以右侧放置更长的文本
image.png
可以删除内部边界，只想表达一个渐进的过程，可以尝试只标记图例的最大值和最小值。
image.png
f.图表上的文字信息，不是用来填充空白，而是强调相关信息或拓展额外的背景知识。
最好在图表中引用消息来源，放置在左下角，采用特殊字体。随时检引数据来源，增加数据的可信度。
image.png
非专业用户关注数据源。专业用户关注数据源编号。用数字辅助表达，在图表中标出数据值。通常对不太严谨的图标，我们会对数据值进行一定程度的处理。
1.小数的值四舍五入(234.19-234)、
2.在数据量非常大时，将一定位数数字取整（52,133-52,000）、
3.当所有数据的量都非常大，将一定位数的数字缩进单位中（元-亿元）、
4.Y轴刻度值尽量转换为千位分隔符，如K，M，B、
5.Y轴最大值取值要恰当，保证图标占据2/3以上
6.使用带有表格数字的字体，小数点需要对齐
image.png
g.控制字体的数量
image.png
注意：跳出定式思维，对于字体大小和粗细外，颜色和透明度同样可以区分页面层级。
2.柱状图的制作规范
image.png
注意：更宽的柱子以及窄间距会给人更有力量和保障的感觉
image.png
更窄的柱子及更宽的间距会给人更细腻和高端的感觉
image.png
b.尽量不超过7个值
数据比较，柱状图建议不超过5个数据值，条形图不超过7个数据值。
3.折线图的制作规范
image.png
注意：什么时候用折线图？
一种数据在不同时间下的数据值之间的比较，统计结果的趋势变化是有意义的时候。
image.png
有时候按照时间推进的数据并不能总用折线图来表示，需要做一些区分。比如美国大规模事件伤亡人数随时间推移的图表，因为本质没有关系，要用条形图。而按年份对伤亡人数进行统计，可以使用折线图。还是看得到的趋势有无意义
b.把锯齿状的线条变平滑。如果上下浮动过于剧烈，那么拉长时间间隔，比如把x轴天数换成周为单位。锯齿状的线条不易阅读。
c.在折线图中绘制数据点
只有特定数值特别重要的时候再标出来，不然大量的数据点会让界面混乱。
image.png
4.饼图制作规范
image.png
上图很难去比较两块内容所占比例的大小，尤其是饼图变形中，我们直觉更习惯从面积上而非角度上来判断。
但是饼图在强调构成而非比较。在强调个人与总体的比例关系方面还是有优势。
避免过度区分割饼图，否则会导致无法阅读。如果很难区分其中一块扇形是另一个的2倍大小，可以把较小类归入到更大的“其他模块”。参考最大不超过9个，超过建议用条形图来展示。
image.png
c.饼图的起始位置，一般遵循用户的阅读习惯，从12点开始制作
image.png
d.饼图的顺序，先对数据进行排序处理，一般按从大到小的数据排序。但当数据中包含一个类别“其他”时，无论其他内容占比多少，都需要放置在饼图的最后来展示。
image.png
e.切割方式：可以将同一个饼图进行拆解设计，将他们设置为同一起点，可以清晰对比出数据的大小。
image.png
5.散点图的制作规范
image.png
b.尽量为散点图添加趋势线。可以更好地让用户感受数据的变化，人们不愿意接受未处理的数据，往往倾向于接受已经被处理好的数据结果
image.png
6.面积图的制作规范
又叫区域图，与折线图很相近，都可以用来展示随时间的推移数据变化的趋势。区别在于面积图在折现于类别数据的X轴之间填充颜色或者纹理，形成一个面表示数据体积。相对于折现而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而非确切的单个数据值。
image.png
b.不要超过四个类别。面积图只适合展现少量数据
image.png
网友评论