第一部分

定义
借助视觉的表达方式,将数据用有趣、浅显、直观形式去传达给观众的一种手段。生成物是信息图标,由信息和图形组成(Inforgraphics)
最初是纸媒上刊登,目的是帮助人们理解新闻信息的视觉化内容。

分类
六大类:图解(Diagram)、图表(Chart)、表格(Table)、统计图(Graph)、地图(Map)、图形符号(Picgram)

01.图解-用插图对事物进行说明

弥补文字在信息传递中存在的匮乏和语义的问题,将无法准确或高效用语言传达的内容,以生动形象的图形解释出来。例:餐馆菜单
image.png

02.图表-用图形、线段、插图等阐述事物的相互关系,简化对大量数据之间的理解。
用户通常理解图表会比理解数据快。图解和图表的区别在于前者是用可视化的手段去传递信息,图表使阐述信息之间的关系。例:流程图

03.表格-根据特定的信息标准进行区分,设置纵轴和横轴

按照行和列对复杂数据进行特定的结构排列,用于数据分析。
image.png

04.统计图-通过数值来表现变化趋势或者进行比较。

根据统计数字,用几何图形、事物形象和地图等绘制的各种图形。用于资料整理和数据分析。例如:柱状图
image.png

05.地图-描述在特定区域和空间里的位置关系
将真实的世界转换为平面,无论在哪种信息地图,最重要的是让用户找到想到要看到的信息。
展示形式包括:将整个区域的布局或结构完整呈现的地图;将特定对象突出显示的地图。

06.图形符号-不使用文字,直接用icon传达信息
通过用易于用户理解、与人直觉相符的图形传达信息的一种形式,比如限速标识,人们会约定俗称的用一些符号来代表一些固定的意思。比如男女厕所,不要超出用户常见的理解范围。奥运会中图形符号的应用![image.png](https://upload-images.jianshu.io/upload_images/23336584-1ad3201a27b76358.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

如何制作统计图
四个步骤:明确目的、选择图标、视觉设计、突出信息
1.明确目的
明确数据可视化的目标,通过可视化展现要解决什么问题,需要探索什么内容或陈述什么事实,并选择合适的图表。拟定好的图标标题,使用户产生阅读图表的兴趣。
注意:对于静态的数据来说,标题应该是一个结论,而不是对图标展示内容的概括。
2.选择图表
Andrew Abela将所有统计图通过“你想展示什么”分成了四大类:比较、联系、分布、构成。

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.注意:足够多的颜色种类,至少需要六种颜色的调色板来进行设计,灵活应对图表中的复杂信息层级。

c.注意:难以区分的渐变配色方案以及特别鲜艳的色彩。
image.png

4.突出信息
a.重要的内容用颜色做区分。特殊处理包括:添加辅助线,更改颜色,线条粗线等方式,加大与其他数据的对比,来引起用户注意,表明观点。
image.png

b.把不重要的内容变为灰色
降低层级可以改变颜色对比度,通常用灰色标记未被选中的元素或背景。为重要的数据点做对比的数据。

c.数据可视化的精髓在于你去用视觉元素去帮助用户做筛选,全部标注等于没有标注
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.控制字体的数量

字体数量以及字体大小的种类加起来不超过3种。通常把注释和坐标轴标签设置为两种字体样式。
image.png

注意:跳出定式思维,对于字体大小和粗细外,颜色和透明度同样可以区分页面层级。

2.柱状图的制作规范

a.柱宽不要过宽或过窄,标准的柱子宽度为“柱与柱间距”的2倍
image.png

注意:更宽的柱子以及窄间距会给人更有力量和保障的感觉
image.png

更窄的柱子及更宽的间距会给人更细腻和高端的感觉


image.png

b.尽量不超过7个值
数据比较,柱状图建议不超过5个数据值,条形图不超过7个数据值。

3.折线图的制作规范

a.有层次区分的折现/曲线。对于复杂折线图,要想显示其中一条数据,最好的方式是强化它与其他元素的对比,从而提高重要性层级。(其他数据变为灰色,将强调曲线置于顶层)
image.png

注意:什么时候用折线图?

一种数据在不同时间下的数据值之间的比较,统计结果的趋势变化是有意义的时候。
image.png

有时候按照时间推进的数据并不能总用折线图来表示,需要做一些区分。比如美国大规模事件伤亡人数随时间推移的图表,因为本质没有关系,要用条形图。而按年份对伤亡人数进行统计,可以使用折线图。还是看得到的趋势有无意义
b.把锯齿状的线条变平滑。如果上下浮动过于剧烈,那么拉长时间间隔,比如把x轴天数换成周为单位。锯齿状的线条不易阅读。
c.在折线图中绘制数据点
只有特定数值特别重要的时候再标出来,不然大量的数据点会让界面混乱。
image.png

4.饼图制作规范

a.饼图,圆环图是使用最频繁的图标,但应该避免使用,因为大脑很难快速理解和比较数据的相对大小
image.png

上图很难去比较两块内容所占比例的大小,尤其是饼图变形中,我们直觉更习惯从面积上而非角度上来判断。

但是饼图在强调构成而非比较。在强调个人与总体的比例关系方面还是有优势。
避免过度区分割饼图,否则会导致无法阅读。如果很难区分其中一块扇形是另一个的2倍大小,可以把较小类归入到更大的“其他模块”。参考最大不超过9个,超过建议用条形图来展示。

b.环形图也可以表示占比,差异在空心区域可以显示文本信息,空间利用率更高
image.png

c.饼图的起始位置,一般遵循用户的阅读习惯,从12点开始制作
image.png

d.饼图的顺序,先对数据进行排序处理,一般按从大到小的数据排序。但当数据中包含一个类别“其他”时,无论其他内容占比多少,都需要放置在饼图的最后来展示。
image.png

e.切割方式:可以将同一个饼图进行拆解设计,将他们设置为同一起点,可以清晰对比出数据的大小。
image.png

5.散点图的制作规范

a.散点图可以承载最多四个维度的变量。散点图本身包含2个维度的数据,出现更多维度时,通过改变散点颜色,大小,甚至形状来进行更多维度的划分。
image.png

b.尽量为散点图添加趋势线。可以更好地让用户感受数据的变化,人们不愿意接受未处理的数据,往往倾向于接受已经被处理好的数据结果
image.png

6.面积图的制作规范
又叫区域图,与折线图很相近,都可以用来展示随时间的推移数据变化的趋势。区别在于面积图在折现于类别数据的X轴之间填充颜色或者纹理,形成一个面表示数据体积。相对于折现而言,被填充的区域可以更好的引起人们对总值趋势的注意,所以面积图主要用于传达趋势的大小,而非确切的单个数据值。

a.尽量不重叠,使用透明度。当图表中药展示多组数据时,最好保证所有的数据不重叠,如果重叠应该设置颜色和透明度,是重叠区域变得更加易读。
image.png

b.不要超过四个类别。面积图只适合展现少量数据
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341