传递数据背后的故事——图表设计

7大洲中最高的山峰:
南极洲,文森峰,16050呎 4892米
南美洲,阿空加瓜山,22841呎 6962米
非洲,乞力马扎罗山,19340呎 5892米
亚洲,珠穆朗玛峰,29035呎 8848米
欧洲,厄尔布鲁士山18510呎 5642米
北美洲,麦金利山20320呎 6194米
大洋洲,卡斯滕土山16024呎 4884米

传递数据背后的故事——图表设计

一、图表的目的和价值

图表设计是数据可视化的一个分支领域,是对数据进行二次加工,用统计图表的方式进行呈现。数据是事实或观察的结果,是对客观事物的逻辑归纳,通常一个具体的数字比一个模糊的说法更加具有可信度和说服力。但单纯的数字本身并不能提供足够的影响力,假设一个淘宝女装卖家3月份的成交金额是50万,这个数据本身并不能说明什么问题,但是当你加上4月份60万,5月份的成交金额70万等多个月的数据,通过折线图的方式呈现,可以判断出成交金额是上升趋势,再结合去年同时段的销售曲线进行对比和其他维度信息的补充(图1-1),可能推断出是因为换季所带来得销量增长,店铺可以考虑加大夏季款的上新。所以我们说图表是解读数字的一种强有力的手段。

传递数据背后的故事——图表设计

图1-1 店铺成交金额

相对于单纯的文本来说,大脑处理图形化的内容会更加省力。每一个汉字都可以看作是一个图形符号,在阅读文本时,大脑首先对其一一进行解码,将这些形状和头脑中储存的记忆进行匹配,从而理解它的含义。一段文本中,汉字的解码过程是线性依次进行的,而图表是作为一个完整的图形同步进行解码,所以比文本要快的多(图1-2)。根据相关研究,一个高质量的信息图理解度比纯文字高30倍。

传递数据背后的故事——图表设计

图1-2 女装金额占比

可用性专家Jakob Nielsen的一项研究表明,一般人阅读网页平均只会读到20%左右的文字。人们的注意力越来越碎片化,大量的文字让人很容易产生阅读疲劳,图表能够比较好的抓住人们的注意力。在微博、微信等渠道营销传播上,将数据用图表的形式展现比纯文字会获得更高的点击、收藏等数值,也更容易被人记住,从而制造话题,营造口碑营销。试想下面的文字和图表(图1-3),你更愿意去分享哪个?

7大洲中最高的山峰:

南极洲,文森峰,16050呎 4892米

南美洲,阿空加瓜山,22841呎 6962米

非洲,乞力马扎罗山,19340呎 5892米

亚洲,珠穆朗玛峰,29035呎 8848米

欧洲,厄尔布鲁士山18510呎 5642米

北美洲,麦金利山20320呎 6194米

大洋洲,卡斯滕土山16024呎 4884米

传递数据背后的故事——图表设计

图1-3 7大洲中最高的山峰

二、数据产品中的图表设计原则和方法

大数据是近些年非常热门的一个词,马云曾说过阿里巴巴未来十年的战略目标是建立DT数据时代中国商业发展的基础设施。生意参谋就是在这个大环境下孵化的一款数据产品,旨在为中小卖家提供数据化运营的思路,通过监控店铺日常经营和活动情况,帮助卖家对店铺运营进行调整。有幸参与这个产品从建立到成长的全过程。数据产品最离不开的其实就是图表设计,既要保证图表本身数据清晰准确、直观易懂,又要在找准用户关注的核心内容进行适当的突显,帮助用户通过数据进行决策。生意参谋这种数据产品就是将数据化运营的思路融入设计中,引导用户通过数据得出有效的结论,辅助店铺经营。除此以外,具有一定设计感的、打动人心的图表设计也可以创造更多的商业传播价值,提升品牌形象。

如何精准表达图表中的数据

数据产品中用户主要是利用数据来进行分析和决策,所以十分强调数据的精准性。那么如何通过图表来准确的传达数据呢,首先我们要明确每种图表的定义和使用范围。其次要使用正确的方式将图表绘制出来,不能在表达上有所偏差。

选择合适的图表

明确每种图表的定义和使用场景有助于我们对数据进行加工和二次传达。柱形图、饼图、折线图、表格是四种最常使用的图表,但往往容易被混乱使用,让我们一起来仔细研究这四种基础图表的定义和类型,找寻其中的差异。

A.柱形图

又称条形统计图,条状图。是一种以长方形的长度为变量的统计图表。常用于比较两个或以上的值。柱形图常见的有以下4种:

垂直柱形图,最常见的柱形图; 水平柱形图,一般按照数值的大小排列; 簇状柱形图,用于多组数据比较,强调一组数据内部的比较; 堆叠柱形图,用于多组数据比较,和簇状柱形图不同的是,堆叠柱形图更加强调一组数据中部分与整体的关系。

B.饼图

以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系,饼图中各项的总和为100%,最适合表达单一主题,即部分占整体的比例。饼图的类型比较少,主要有以下三种:

基础型饼图,包括常规型饼图和环形饼图; 半圆型饼图,在某些场景中,半圆会比较方便排版,利于对齐。而且标注信息也方便呈现; 复合型饼图,当饼图的扇形数量过多时,可以将最后的若干项合并为其他类,在二级图表中表现这些项目的构成。

c. 折线图

是通过线条的波动(上升或下降)来显示连续数据随时间或有序类别变化的图表。常用于强调数据的变化或者趋势。折线图主要可分为单条、多条、堆叠:

单条折线图,只显示一组数据波动的情况; 多条折线图,同时显示多组数据波动的情况; 多条堆叠折线图,显示多组数据波动的情况,同时表现多组数据之合的变化。多个数据叠加时(堆叠图),推荐使用面积图,不推荐使用折线图形式

D. 表格

由若干的行与列所构成的一种有序的组织形式,表格可以高效率的展现大量数据。表格的类型多种多样,除了单纯的文本和数字外,我们还可以往里面添加图片、操作等多种类型。表格是几种图表中最多样和特殊的类型。

基础表格,静态纯文本类的基本表格; 内容复合表格,由其他内容类型结合的较复杂的表格形式; 操作复合表格,用户的行为对表格样式或特征产生影响。

正确的绘制图表

了解了四种的图表后,通过选择适合的图表类型我们完成了精准表达数据的第一步,那么第二步就是将图表正确的绘制出来。错误的坐标轴选择,或者关键元素的缺失,会导致图表的准确性下降,表意不明。

A.柱形图

数据产品的图表强调数据的准确性,通常零基线是不可或缺的,为了强调起始位置,颜色上要比其他的网格线深。考虑到用户不同显示设备的差异,建议至少取94的灰度值才可以保证清楚的辨识,颜色太浅在一些设备上无法显示清楚。

传递数据背后的故事——图表设计

图2-14 柱形图中的零基线

柱子的宽度为D,则柱子之间的间距建议在1/2D与D之间,簇形柱形图两个柱子之间的间距建议为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性,又不会过密-保障数据之间的独立性和舒适阅读。

传递数据背后的故事——图表设计

图2-15 柱形之间的间距

B. 饼图

饼图一般我们采用的绘制方法是,按照用户的阅读习惯,从上到下,以时钟的12点为起点,顺时针排布扇形(图2-16)。

传递数据背后的故事——图表设计

图2-16 饼图的绘制方法

但这种绘制方法存在一点不足,在用户视线的焦点——饼图的上半部,不重要的最小数据项和最大数据项一起占据了视觉焦点。为了解决这个问题,我们在这个基础上做了一些优化,同样以时钟的12点为起点,先逆时针绘制最大切片,再回到12点,顺时针绘制出第二大切片,其余切片依次绘制(图2-17)。这种方法使得用户视线的焦点——饼图的上半部放置的都是最重要的数据。但这种绘制方法也有一点小小的不足:在有多个饼图时,每个饼图的起始位置都不相同(图中问号所标出的位置)。大家可以根据不同的使用场景选择不同的饼图绘制方法。

传递数据背后的故事——图表设计

图2-17 饼图的绘制方法

C. 折线图

折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。坐标轴的数值设定的太高,则折线变化过于平缓,掩盖现实无法清晰的表现折线的变化。反之,如果坐标轴设定的太低,又会让折线变化过于陡峭,过于夸张夸大了折线变化的趋势。

传递数据背后的故事——图表设计

图2-18 折线的绘制方法

如何提升图表的易读性

数据产品中往往充满了大量的数字和图表,用户容易淹没在数据的海洋中,除了精准表达这些数据以外,提升图表的易读性也是数据产品中图表设计的一个显著特点。图表中文字部分通常为具体的数值和数值的含义解释。通过对这些文本进行合理排版,可以使用户快速理解图表,从而达到高效阅读的目的。

A. 柱形图

坐标轴的标签使用水平排列,不建议垂直排列或者倾斜排列,字数多的时候不易阅读。柱形图中部分标签的使用方法也适用于折线图。

传递数据背后的故事——图表设计

图2-19 柱形图的标签排列 水平柱形图一般会简化坐标,数据值跟随在柱形图后方,增加数据墨水比率。

传递数据背后的故事——图表设计

图2-20 水平柱形图 当坐标轴标签过长时,垂直柱形图无法将所有坐标轴标签全部显示,有以下几种解决方案:

可采用水平柱形图增加标签的显示空间。

传递数据背后的故事——图表设计

图2-21 水平柱形图

显示主刻度,其余数据省略,通过交互动作来显示。比如显示2010年/2011年,而年里面的具体的月份隐藏,hover时出现。如图2-22中的横坐标。 高位数的数值可以转化单位。比如500,000显示为50万,更符合中文的阅读习惯,且节省空间。如图2-22中的纵坐标。

传递数据背后的故事——图表设计

图2-22 柱形图的刻度值

B.饼图

在饼图内与百分比数值一起显示

信息连贯视觉集中,理论上最合适的位置。但受限于饼图本身的形状和大小,文字过多时容易溢出。

传递数据背后的故事——图表设计

图2-23 饼图的标签

使用引导线,在饼图周围合适位置显示

引导线可以将切片与标签有效的关联,可以显示更多的字符数。引导线较多时,可以进行变形规整。在数据产品中通常是活动数据,数值大小经常在变化,标签和引导线的位置不固定,排版上难以掌控。

传递数据背后的故事——图表设计

图2-24 使用引导线的饼图

数值和标签分离显示

标签字符数不受局限,但标签与饼图分离,需要对照阅读。

传递数据背后的故事——图表设计

图2-25 数值和标签分离显示

配合交互动作切换标签在环形圆饼空白处显示

空白部分不受切片大小影响,标签和数值可一起显示。适用于强调当个切片数值。标签与切片对应关系需要带交互操作说明,数据展示较隐藏。

传递数据背后的故事——图表设计

图2-26 带交互的标签

C. 表格

文字信息纵向列对比能够很好的形成视觉引导线,符合格式塔心理学中相近原则。不同的数据类型有不同的对齐方式。一般来说文本采用左对齐,数据右对齐,方便通过数字位数的长短对比数据的量级和大小。

传递数据背后的故事——图表设计

图2-27 表格的对齐

表示状态的文字,通常只有固定几种类型(如已完成、待支付等),则可以采用居中对齐。关系紧密的字段可以靠近成组排列,加强数据之间的关联性,同时减少了数据组的量,也可以方便用户快速定位信息。

传递数据背后的故事——图表设计

图2-28 表格的对齐

接下来,我们继续看看如何突出图表中的重点信息、如何使图表更易于传播,以及数据可视化的趋势和未来…

 

作者:刘颖

来源:阿里巴巴(中国站)用户体验设计部博客

原文地址:http://www.aliued.cn/2015/04/30/liuying.html

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32176/

(0)
CatherineCatherine
上一篇 2017-06-04 06:04
下一篇 2017-06-04 08:26

相关推荐

  • 用Axure写PRD:虎扑app产品需求文档(附下载链接)

    需求文档是产品经理的基本功,产品小白入门的必经之路,但对于小白来说,没经历过一个完整的项目,自然也没有产品可以写,所以倒推产品是一个练手的好方法。Axure也是产品经理的基本功,画原型图的利器,但axure不止是能画原型,还可以用来写prd,正如臻龙大神说的做这样一个一体化产品需求文档出于的目的就是传统的方式产生的文件过多,过于杂乱,不易整理和回溯。如果把每个版本的内容都整理在一个html中,这样无论是团队协作还是文档回溯都能大大提高效...

    2018-03-15
  • 好的设计:存在于无形当中

    东东导读:对于社交类产品来说,优秀的设计,应该是不争强好胜般凸显在用户面前的,而电商类和社交类产品很不一样,电商类的产品经理想的首先是GMV(成交金额),一切是为着GMV转的举例:用户刚购买了眼镜,那么给用户推荐眼镜盒,而不是推荐洗脚盆;用户刚订了周六上午的话剧,那么给用户推荐话剧院旁边的餐厅,而不是继续推荐其他的话剧;当用户刚购买了一张飞往巴黎的机票,那么给用户推荐机场的接送机,而不是一股脑的推荐旅游产品。举例:用户明天飞往曼谷,提前一天发短信提醒用户航班信息,告知用户曼谷明天的天气,若有紧急新闻事件也可一并告知(比如曼谷突然发生恐怖爆炸事件,只要跟用户切身相关的,请第一时间告知用户)。然后顺带可以推荐接送机服务。

    2017-06-03
  • 【干货知识】最全面的交互设计原则和理论汇总(下)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无...

    2018-04-11
  • 五一福利大放送,再不收藏就没有了哦

    老板阿西太抠,说了好久才同意五一送福利,今天小编就放血,给大家送点福利,机会不是天天有该出手时就出手。 图标和字体想怎么用就怎么就,让设计不再孤单,要的就是这个范儿。 字体下载地址:http://pan.baidu.co…

    2015-05-01
  • 全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 【交互设计排名】SKD独家 | 美国交互设计排名

    Alias工业设计点击关注 和工业设计做朋友关注数模师  JACKAlias建模学习ALias建模咨询加好友你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及...

    2018-04-08
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 从交互设计的角度,看iOS11的5点不足

    提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。

    2017-08-04
  • 与潘通CEO对话:合理的色彩运用,才能设计吸引人的产品包装

    年度流行色从何而来?潘通如何决定每年的流行色?你知道小黄人的颜色是潘通挑选的吗?以上问题在这篇对话中一一为你揭秘。“基于 Pantone 公司的核心业务,色卡销售,色彩咨询,以及色彩授权,中国目前是 Pantone 继美国后的全球第二大市场。按照中国的国际化趋势,不久后就有可能超越美国成为 Pantone 在全球的第一大市场。尤其,中国市场目前愈发突显了对设计的追求和重视。”Color defines our world. ——  Laurie Pressman  Vice-President of the Pantone Color Institute“For me it has always been such a calm color. Grey is like your favorite T- Shirt.” —— Jason Wu

    2017-05-11
  • 网易云音乐交互设计:如何让用户感知到个性化推荐

    一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

    2016-10-25