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

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

相关推荐

  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 基于数据的可用性研究

    小编语:这是一篇关于交互设计与可用性研究的古老的文章,今天小编翻出来给新交互师们看一下~ Thomas Baekdal在The Battle Between Usability and User-Experience中提到,可用性较高的产品并不一定带来好的用户体…

    2015-01-24
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • 工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • 想做动效,可是你的需求写清楚了么?

    精美的动画对于提升产品体验有很大帮助,如促进用户理解功能,缓解用户情绪,调动用户积极心理,为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了,不少人已经开始越来越重视动效在产品中的应用了,还没有看过的同学不用急,谷歌官方的动效指南讲解得很详细,建议只看这个就够了,配合一些动画理解起来更容易。说明:

    1.优化直播间分享面板,增加特效

    2.当用户点击分享按钮时(*包括传统直播间主播面板的分享按钮和上方分享按钮,手机直播间的分享按钮*),从下方弹出分享面板,逐个弹出分享icon,并淡入显示分享奖励。

    3.用户关闭分享面板时,分享icon从右到左依次下落淡化消失
    相关参数:

    1.分享面板减速弹出,运动时间225ms
    2.分享icon从左到右依次弹出,运动时间225ms。带有奖励图标的,当对应分享icon弹出后,分享图标淡入显示(时间225ms),第二个图标比第一个迟100ms开始运动

    eg:如图第一个为qq图标,当用户点击分享按钮,分享面板弹出后,qq图标开始弹出(时间225ms),100ms后第二个图标(qq空间)弹出,当qq图标完全弹出时,淡入显示分享奖励图标,时间225ms。
    3.分享icon从右往左依次收回,分享面板收回,所有运动的时间减少30毫秒,如分享面板收回时间195ms,分享icon收回时间195ms。

    andorid端动画曲线采用系统自带:AccelerateDecelerateInterpolator(在动画开始与结束的地方速率改变比较慢,在中间的时候加速)

    iOS端动画采用系统自带:kCAMediaTimingFunctionEaseInEaseOut (在动画开始和结束的时候速度稍慢些)
    具体效果可参考附件视频

    2017-05-08
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 帮你梳理微交互的五个基本要素

    微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过100次之后让人觉得厌烦?它是否清晰可见,或者完全无法引人注意?小贴士:用充满情感和人的姿态来同用户交流,这是让你的UI和交互变得更加温暖的最快的方式。小贴士:应当在你的设计中保持KISS原则(KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”),不要让那个你的微交互成为一个宏交互。

    2017-05-14
  • 怎样做出引人入胜的用户体验

    发布者: mobileui 设计师 Irene Pereyra 总结了10大技巧帮助你实现令人惊叹的交互式用户体验。 近来,设计一款能够吸引并留住用户的web和App越来越成为一门学问。 由于很多人对于计算机数字领域不是很很了解,我会…

    2015-04-20
  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08