比较常用的图表为:
以下为具体介绍:
又称条形统计图,条状图。是一种以长方形的长度为变量的统计图表。常用于比较两个或以上的值。柱形图常见的有以下4种:
垂直柱形图,最常见的柱形图; 水平柱形图,一般按照数值的大小排列; 簇状柱形图,用于多组数据比较,强调一组数据内部的比较; 堆叠柱形图,用于多组数据比较,和簇状柱形图不同的是,堆叠柱形图更加强调一组数据中部分与整体的关系。
以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系,饼图中各项的总和为100%,最适合表达单一主题,即部分占整体的比例。饼图的类型比较少,主要有以下三种:
基础型饼图,包括常规型饼图和环形饼图; 半圆型饼图,在某些场景中,半圆会比较方便排版,利于对齐。而且标注信息也方便呈现; 复合型饼图,当饼图的扇形数量过多时,可以将最后的若干项合并为其他类,在二级图表中表现这些项目的构成。
是通过线条的波动(上升或下降)来显示连续数据随时间或有序类别变化的图表。常用于强调数据的变化或者趋势。折线图主要可分为单条、多条、堆叠:
单条折线图,只显示一组数据波动的情况; 多条折线图,同时显示多组数据波动的情况; 多条堆叠折线图,显示多组数据波动的情况,同时表现多组数据之合的变化。多个数据叠加时(堆叠图),推荐使用面积图,不推荐使用折线图形式
由若干的行与列所构成的一种有序的组织形式,表格可以高效率的展现大量数据。表格的类型多种多样,除了单纯的文本和数字外,我们还可以往里面添加图片、操作等多种类型。表格是几种图表中最多样和特殊的类型。
基础表格,静态纯文本类的基本表格; 内容复合表格,由其他内容类型结合的较复杂的表格形式; 操作复合表格,用户的行为对表格样式或特征产生影响。
使用光滑的曲线来连接。如果数据是连贯实时的,且任意两点间的数据具有分析价值,用[曲线图] 比用[折线图] 更合适,如24小时数据。
即中心为空的饼图,用来表现进度。除了显示占比,还可用来显示进度加载,拟钟表/ 计时器设计
常用在基于地理位置,对一段时间的数据(常常是离散量)累积量进行分布统计的图表,进而可以分析数据密集区域/稀疏区域。这是一种展示效果较好的表达方式。
[雷达图] 在比较多个类别数据序列以及查看整体情况很有用,既可以查看自身整体发展的均衡情况,也可以对比两个序列整体的优劣势。这也是一种展示效果不错的数据表达方式,在展示整体综合信息上很直观。
列表是一种常见的表达方式,通常我们见到的列表往往是如下最右的Spendee的界面,但也有一些APP做了可视化尝试,在列表中通过对数据可视化做一些分区,详见如下左和中Elevate的界面。
面积图强调的是数据随着时间变化的程度。
是将两种或多种图表类型显示在同一图表,主要是实现将不同角度的数据放到同一图表中,以便发现数据之间的关联性。
散点图常用于显示两组数据之间的相关性,可展示数据的分布情况。例如,下图展示了全年每个订单的产品数量分别情况。
用于显示三组数据之间的关系,其中一组数据作为横坐标,一组数据作为纵坐标,另一组数据表示气泡的大小。
深色底上的图表通常为了营造一种氛围,展示数据信息一般较少,此时可以选用鲜亮的色彩,这样图表信息容易从深色中跳出来。
如果需要清晰展示大量的数据信息,建议选用浅色底,数据信息在浅色底上的识别度相对较高。但需要注意的是:如果数据信息量太小,浅色底上会显得页面太空,这会让用户觉得你的平台没有内容或者热度。当然,这可以通过图形质感、颜色等优化。
有时,为了让页面更加生动,可以将数据信息展示在大面积色块上。
商务类APP可采用用蓝色、绿色系作为底色。
运动类APP可选用的色彩自由度更高,偏活力的色彩,如橙色、黄色、橘色等都可以。
为了让数据阅读更加轻松,可采用图片底。在一些天气类APP中,这种使用方式比较常见,图片内容与数据信息产生关联,提升可读性。
原则 :以设计师为准
行长度 :每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽,那是很吓人的,难以阅读。同理,每行文字太短也不行,会给读者的眼睛带来压力,造成混乱。
行距 :每行文字间的间距也同样重要。看看这篇文章,如果每行文字都与上下两行粘在一起,你就无法理解这些句子。
字体样式 :字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的,而那些华丽的手书和新奇字体则最难破译。
外边距和内边距 :和行距一样,元素周边和之间的空隙也影响着用户阅读文字本身。
颜色与对比度 :文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字,就难以阅读了。设计师选择浅色字深色背景,或是深色字浅色背景,都是有原因的。对比使得字符容易阅读。
数据产品的图表强调数据的准确性,通常零基线是不可或缺的,为了强调起始位置,颜色上要比其他的网格线深。考虑到用户不同显示设备的差异,建议至少取94的灰度值才可以保证清楚的辨识,颜色太浅在一些设备上无法显示清楚。
柱子的宽度为D,则柱子之间的间距建议在1/2D与D之间,簇形柱形图两个柱子之间的间距建议为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性,又不会过密-保障数据之间的独立性和舒适阅读。
饼图一般我们采用的绘制方法是,按照用户的阅读习惯,从上到下,以时钟的12点为起点,顺时针排布扇。
但这种绘制方法存在一点不足,在用户视线的焦点——饼图的上半部,不重要的最小数据项和最大数据项一起占据了视觉焦点。为了解决这个问题,我们在这个基础上做了一些优化,同样以时钟的12点为起点,先逆时针绘制最大切片,再回到12点,顺时针绘制出第二大切片,其余切片依次绘制(图2-17)。这种方法使得用户视线的焦点——饼图的上半部放置的都是最重要的数据。但这种绘制方法也有一点小小的不足:在有多个饼图时,每个饼图的起始位置都不相同(图中问号所标出的位置)。大家可以根据不同的使用场景选择不同的饼图绘制方法。
折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。坐标轴的数值设定的太高,则折线变化过于平缓,掩盖现实无法清晰的表现折线的变化。反之,如果坐标轴设定的太低,又会让折线变化过于陡峭,过于夸张夸大了折线变化的趋势。
如何提升图表的易读性
数据产品中往往充满了大量的数字和图表,用户容易淹没在数据的海洋中,除了精准表达这些数据以外,提升图表的易读性也是数据产品中图表设计的一个显著特点。图表中文字部分通常为具体的数值和数值的含义解释。通过对这些文本进行合理排版,可以使用户快速理解图表,从而达到高效阅读的目的。
坐标轴的标签使用水平排列,不建议垂直排列或者倾斜排列,字数多的时候不易阅读。柱形图中部分标签的使用方法也适用于折线图。
柱形图的标签排列 水平柱形图一般会简化坐标,数据值跟随在柱形图后方,增加数据墨水比率。
水平柱形图 当坐标轴标签过长时,垂直柱形图无法将所有坐标轴标签全部显示,有以下几种解决方案:
可采用水平柱形图增加标签的显示空间。
显示主刻度,其余数据省略,通过交互动作来显示。比如显示2010年/2011年,而年里面的具体的月份隐藏,hover时出现。如图2-22中的横坐标。 高位数的数值可以转化单位。比如500,000显示为50万,更符合中文的阅读习惯,且节省空间。如图2-22中的纵坐标。
在饼图内与百分比数值一起显示。
信息连贯视觉集中,理论上最合适的位置。但受限于饼图本身的形状和大小,文字过多时容易溢出。
使用引导线,在饼图周围合适位置显示。
引导线可以将切片与标签有效的关联,可以显示更多的字符数。引导线较多时,可以进行变形规整。在数据产品中通常是活动数据,数值大小经常在变化,标签和引导线的位置不固定,排版上难以掌控。
数值和标签分离显示。
标签字符数不受局限,但标签与饼图分离,需要对照阅读。
配合交互动作切换标签在环形圆饼空白处显示。
空白部分不受切片大小影响,标签和数值可一起显示。适用于强调当个切片数值。标签与切片对应关系需要带交互操作说明,数据展示较隐藏。
文字信息纵向列对比能够很好的形成视觉引导线,符合格式塔心理学中相近原则。不同的数据类型有不同的对齐方式。一般来说文本采用左对齐,数据右对齐,方便通过数字位数的长短对比数据的量级和大小。
表示状态的文字,通常只有固定几种类型(如已完成、待支付等),则可以采用居中对齐。关系紧密的字段可以靠近成组排列,加强数据之间的关联性,同时减少了数据组的量,也可以方便用户快速定位信息。
首先必须要记住:图表的任何一个元素都不可以任意摆放
为什么很多人崇尚 商业图表 原因就是 图表的任何一个元素都不是任意摆放的
设计围绕的主要是以下四项基本原则:
1.亲密性
亲密性原则指的是:将相关项组织在一起。因为在一个图表上,物理上的接近就意味着它们之前存在意义上的关联。
2.对齐
对齐原则是指:任何元素都不能在图表上随意安放,每一项都应该与图表上某个内容存在某种视觉联系。
3.重复
重复原则是指:设计中的某些方面要在整个作品中重复。
4.对比
对比原则是指:如果两项不完全相同,那么就应当使之不同,而且应当是截然不同。
B1 摆正你的元素关系[亲密性详解]
观察附件图片:
第一张图表标题和图例看起来有并列关系,但实际上,并不存在并列关系。
这样的图表让人看起来会觉得没有重点,所以图表标题根本没人会多看一眼,
受众会很茫然这是什么图?
请记住:图表元素里 图表标题 的意义是告诉受众这个图要表达什么
第二张把标题和图例通过空间和大小分成两组,这样就变得好得多
受众看到图表标题比较大的字后,受众马上会明白你要通过图表表达什么了。
B2 专业精神 [对齐详解]
你我实际已经在Excel应用中不知不觉的使用了这一原则,而且很多情况下,你我用到的都可能是居中对齐。
尤其是Excel 图表的标题 默认 是这样的
但你应该知道,左右对齐给人的视觉效果更为强烈。
文字边缘与图表核心偏远对齐往往有更好的效果
这里有两个概念要讲:
软:
居中对齐的边界是中心线 而这个中心线在人的视觉中的概念是模糊的 其两侧 大量的留空 会使人感到安全 但反应了你的怯懦
硬:
无论你愿意或不愿意 图表的 坐标和边框 总给人 生硬的感觉 与这些对齐 就会使图面显示出硬朗的感觉 让人信服
下面的例子中,NO.3明显要比其它好很多,最糟糕就是NO.1了。
B3 不要让你的图表失去统一性[重复原则详解]
要有整体性,你甚至可以在自己的多个图表中都沿用某一种重复,这样别人看到这个重复的时候就能知道这个图表是你的作品。
在图表设计中,重复性原则有两种应用。
第一种就是 颜色,使用颜色之前你必须清楚,颜色的大面积 尤其是图表区背景
使用会减少图表核心诉求的表达面积,降低图表的表现力。
看看 图示№ 1
第二种重复是在元素中相同的格式,这会让受众很清楚的明白各元素间的层次关系。
重复原则可以让你的图表看起来简化一些,而且更具可读性。
比如字体的大小 字体的类别
请尽量在图表中不要超过一种字体 和 两种字体大小 这个限制 因为字体是形状
看看 图示№ 2
无论如何:图表中的字符千万不要太多。坐标轴上的字符是图表字符相对集中的区域,请慎重处理坐标轴
图表重点体现的是: 势 / 差异 / 趋向 这是体现你目标诉求的表现方式
如果体现信息过多 势 / 差异 / 趋向 就不明显了 其它的信息干扰了图表的目标诉求表现
不要认为图表上的某些元素圣神不可侵犯 大胆去掉它 比如坐标轴 网格线 绘图区背景及边框
看看 图示№ 3
记住一个原则:所有字符和信息必须少到3秒钟可以理解你的图表。
B4 强烈的去表达你的诉求[对比使用详解]
你的目的是什么:你准备使用图表来说明什么问题?要说明这个问题 请大胆使用 对比
它将有力的帮助你完成这样的表达
对比一定要强烈,千万不要畏缩和偷懒。不管是有意无意,一般人很少用到对比原则,反而常常在这个问题上犯下错误。
需要注意:如果对比不强烈(比如三号字体和四号字体),就不能算作是对比,而会成为冲突,在观众看来,这种设计更像是一个失误。
在图表设计中,对比可以通过很多方法实现:如字号、字体 颜色 形状[点 线 面] 等。
通常,我们需要使用以上多种方式来实现对比。
最好的对比切入点是:颜色 和 大小或面积
如果你的图表上的颜色不多:比如只有白色 和 黑色 ,你只要将其中一个元素改为 红色 这个对比效果将完全不同
但关于字体的使用要注意:同一图表中应用了对比的元素,该元素的对比效果不能出现两次[比如字体的类别 和 颜色]。
永远记住:请保持整个图表的布局有焦点,且焦点是唯一的
附图右侧的图表明确向受众传递了如下信息:
使用了较大的字体来这个图是做什么的,使用了红色这个强烈的颜色来说明当前的进度如何
注意:
色彩的使用 在这里红色将受众的视线集中在了当前的进度,他就成了关注焦点 因为它太强烈了
图表标题的大字使用 在这里成了辅助说明当前进度的必要信息
左侧的表现就相应差很多