【本文着重视觉设计方法，而非辨别、提取数据的正确性】
data visualization 数据可视化是指运用视觉的方式呈现数据，有效的图表可以将繁杂的数据简化成为易于吸收的内容。这次的文章将帮助大家认识data visualization的基本观念、图表设计步骤到实际演练。 不论是学校作业，或是工作报告，图表设计可以很有趣、很有成就感，希望大家学习这些技巧后可以运用到生活中。
以下是这篇文章的架构：
1. introduction 基本介绍
1a. what is data visualization 什么是数据可视化？
1b. why is it important 为什么数据可视化很重要？
2. steps 步骤
2a. understand your goal — select the right chart 了解目的，选择有效图表
2b. organize data in a logical order 编排数据
2c. keep it simple — remove unnecessary elements 移除不必要元素
2d. try out different variations (advanced) 尝试不同变化(进阶版)
3. examples工作实例
3a. case study highlights 案例焦点
3b. product roadmap 产品时程
4. conclusions 结论
5. references 参考数据
1. introduction 基本介绍
1a. what is data visualization什么是数据可视化？
data visualization 数据可视化是指运用视觉的方式呈现数据，有效的图表可以将繁杂的数据简化成为易于吸收的内容。 透过图像化的方式，我们更容易辨别数据的规律(patterns)、趋势(trends)及关联(correlations)。
最早的数据可视化溯及17世纪时，人们绘制地图；而在18世纪初，人类发明的圆饼图(pie chart)。 数据可视化时时刻刻出现在我们的生活中，杂志文章、新闻媒体、学术报告、公共交通指示等等。
infographic 信息图表是我们常听到的另个名词，他与数据可视化有相同的目的 — 运用图像化的方式简化复杂的信息。 但infographic是较主观且质性的信息，表达创作人的观点、故事。 更着重可视化的呈现，需要较深的绘画设计技巧。
图1. data visualization v.s. infographics
以下举几个infographics的例子，让大家更可以理解infographics与data visualization不同之处：
图2. left vs. right (us), david mccandless是典型的infographics，解释了美国政府左右派的区别。 作者说明了故事，质性的数据与辅助插画。
图3. types of coffee简单的图标让人一目了然咖啡的种类，
图4. la map of attractions可爱的漫画风，这张图说明了west la的景点(名称、距离、内容)
说到infographics，不得不介绍个人非常喜欢的大师david mccandless，他曾自己为数据新闻记者(data-journalist)及信息设计师(information designer )
对data visualization有兴趣的朋友，强烈建议看他的ted talk及blog—information is beautiful，看完会振奋人心啊！
由于这次的篇幅有限，我们有机会再好好聊聊infographics：）
1b. why is it important 为什么数据可视化很重要？
数据驱动了决策，在信息爆炸的时代，有效并快速吸收信息是人们渴望的能力，不仅节省时间，并能加速学习效率。 在写文章时，我也常常在想用什么呈现方式，能够让读者更有效地吸收。
根据研究指出，
人类大脑吸收图像的速度是文字的60,000倍
90%的信息是透过视觉传达到大脑
人类能吸收80%的图像，但只能吸收20%的文字
有图像的网站比只有文字内容的网站多了94％的浏览率。
看了这些数据，是不是更想学习数据可视化的方法呢？
2. steps步骤
如何有效地传达信息，制作整齐美观的图表？ 接下来篇幅，我整理网络的信息与个人的设计流程，大家可以斟酌参考。
2a. 了解目的，选择有效图表 choose the right chart
大家可以参考这张dr. andrew abela整理非常详尽的图表，将常见的不同图表归纳出四种目的：比较(comparison), 分布(distribution), 组成(composition)及关系(relationship) 。 依照使用用途及目的，选择正确的图表，可以清楚传达讯息。
图5. chart choose diagram (dr. andrew abela ,2009)
除此之外，姐特别制作以下这张图表，让大家了解常用的英文图表名词，下次有机会遇到外国人舌头就不用担心打结啦！
图6. 一般常见图表
容易混淆的bar chart & histogram，最大差别在于划分种类的方式。 bar chart属于比较不同类别间的差异，例如不同城市的房价比较、产品家族的销售情形；而histogram可表示同一种类用数字划分的族群，例如美国人不同岁数间薪水的差异、同班考试分数的分布情形等frequency distribution。
另外，bar chart的柱状间有明显的空隙，而histogram并没有。
图7. bar chart与histogram的比较
在设计上，直方图(bar chart)有直立式及横式两种表现方式。 横式较常出现在比较排名(ranking)的形，若有较长的标题(long categoriy labels)，建议使用横式可以让画面有更多的空间。
常见的圆饼图(pie chart)近来被人诟病的原因有：
1. 无法清楚的传达数据：人类的眼睛不擅长辨别角度的大小及比例
2. 不适合多项目间的比较：用bar chart更适合
3. 占版面空间
因此，近来流行donut chart的格式，将一般的圆饼图中间挖空(cut out)，有下列优点：
1. 视觉上较清爽
2. 容易将焦点放在长度上，更专注在于项目间的比例 (与stacked bar相似)
3. 中间的空白可以有更多的发挥空间
图8. donut chart基本上是stacked bar chart的变形
图9. 制作图表时的注意事项
2b. 编排数据 organize data in a logical order
编排数据的目的即是让读者能够更易吸收信息。 在bar chart常见的排版有两种：按照字母及数据大小。 圆饼图则是运用顺时钟或是逆时钟，由比例大到小的编排。
这些原则看似简单，却容易忽略。 若是在设计时时时刻刻提醒自己注意这些小细节，不仅在视觉上更为清晰，同时默默地提升自己的设计能力。
图10. 图表的编排顺序，可以影响观看者的易读性
2c. 移除不必要元素 keep it simple — remove unnecessary elements
在设计时，尽可能用最少的元素，呈现完整的讯息。 递交最终版本前，可再三确认是否需要这些元素：
背景网格线 background lines
卷标 labels
颜色 colors
渐层色 gradient
阴影 shadows
更多例子请看：8 ways to make beautiful finance charts in excel
图11. 透过去除隔线与渐层色，观看者可以更清楚地比较信息内容
2d. 尝试不同变化(进阶版) try out different variations (advanced)
最后一步骤，我们可以在视觉上尝试不同的变化，包含颜色、质地与图标，增添画面的趣味与和谐。
颜色 colors
颜色可以表达情绪及感受。 制作图表时，可以根据你想营造的气氛、公司的品牌，决定画面的色调。 有时候我喜欢到pinterest搜寻color palette，就可以找到许多有趣的颜色组合。
图12. 根据公司的品牌、特性，决定图表的色调
质地 textures
厌倦了单一色调吗？ 同样的形状，我们可以试试看不同的质地。 在invision product design industry report 2016里有许多有趣、大胆的图表设计，不论是用线条、图案或是图片，原来图表也可以有这么多变化！
图13. invision design report 2016圆饼图利用线条表现未填满的一半，并放大强调数字；柱状图以虚线表示
图14. invision design report 2016用图片当作圆饼图背景，加上公司品牌的粉红色，大胆又强烈的设计
图标icons
简单的图标，可以引导观看者的情感与共鸣。 越复杂的图案，就会偏向infographics。 在这段落，我找到一些大家可以轻松尝试看看的变化，根据主题及目的，寻找相关连的图标，运用在图表中，就可以有放大的效果。
图15. why 2017 is the year to take snapchat seriously以snap logo代替圆饼图，更贴近主题
图16. thirsty energy以人的图标传达缺少资源的人口比例，比起冰冷的圆饼图，更让人感同身受
3. examples 工作实例
看完以上这些方法，是不是跃跃欲试呢？ 在公司里，我的职称是产品设计师，不过除了与产品开发部的工程师合作外，也会接触商业开发部门(business development)，或是收到客服人员(client success)的需求。 因此有机会接触到产品成效、业务数据等，必须以可视化的方式呈现给公司内部成员、客户或是投资人。
接下来，想跟大家分享工作实例，带大家一步步走过从原始数据到信息可视化的过程。
3a. case study highlights 案例焦点
目的：将产品成效数据呈现给客户，说明产品价值
时限：两天
格式：pdf
使用工具：sketch、计算器(计算比例)
表1. case study highlights — original spreadsheet 原始表格
没错！ 以上你看到的就是bd部门给我的google spreadsheet，亮黄色、没有对齐 。 想认识怎么设计表格的朋友，请参考上篇文章：【提升易读性 — 如何有效运用空白white space】。
身为设计师的我们，职责就是将硬邦邦的数字，让眼睛能够没有负担、舒舒服服的吸收。
step 1：了解目的
由于是要呈现产品价值，因此在表格中最重要的信息即是lift，透过我们的产品，让这些球队票务销售增加了几个百分比(%)。 以及在第二大项重点是我们在社交销售中，有多少层级的购买者。
表2. 整理过后的表格
step 2：选择有效图表 ＆ 编排数据
这步骤很重要很重要的一点是：先不要添加颜色！！！
颜色让我们的视觉分心，这步骤的主要目的是让读者能够清晰的了解图表内容，确保图表是正确的，排版是合理的，再加上颜色丰富画面。 先从理性的角度切入，再来追求美观。
下图完整呈现我初步的草稿：
在表格里，有两排不同的数据，分别代表去年及使用fevo后的销售情形。 因为目的是比较(comparison) ，我们选择bar chart，并用粗体及较大的字体强调lift的百分比。 同时尝试用横式(horizontal)的直方图，让说明文字可以延展、易于阅读，但也占了版面空间。 数据的编排上，从左至右，数字渐增，让读者不会迷失。 最后，我决定采用直式(vertiacal)，又以 v2 & v3的排版较为合理。
图17. 初步草稿
step 3：排放所有信息，移除不必要元素
接下来，加上了fevo branding的渐层色，尝试不同的颜色组合。 同时运用gestalt principles的closure，利用虚线，而非实线呈现去年的数据。
去除元素的部分，我没有把窗体的所有标题呈现出来，例如sales initiative诶event, highlight等，因为就算没有这些标题，读者也可以明白其中的关系。 在第二份数据(measurable social sharing)中，没有刻意加上图表，因为重点是单纯的数字，不需为了图表设计而设计图表。
图18. 试着加上颜色的效果
step 4：尝试不同变化
尝试用弧线的方式呈现social level增添玩味，但在视觉上稍嫌凌乱，最后我跟pm选择了右边直立的排版。
图19. 最终两种编排方式
灯灯灯灯灯～～～过程中不断的微调间距、对齐，及尝试各种的排版、颜色，最终的pdf就完成啦！ 不但与最初的目标一致，也透过可视化的技巧，让数据变得清晰易懂。
视觉上从左至右，首先会被强烈的饱和蓝吸引，再看到各球队的logo，于是注意到百分比以及说明文字。 这样的排版类似图表+表格，但由于去除了实线，视觉上清爽许多。
右排讯息强调layers of invites的数字，运用阴影，让数字跳脱背后的讯息。 与其使用文字，用实际logo更让人兴奋。 为填补上右的空白，我加上fevo的logo，延伸到信息内容，让视觉上与左边标题平衡(balance)。
图20. case study highlights 最终成果
3b. product roadmap 产品时程
目的：向投资人与公司内部说明产品时程、计划及所需人力
时限：半天
格式：ppt
使用工具：ppt、计算器(计算比例)
以下是pm给我的google doc，说明了项目、人力以及预计完成时间，是典型的product roadmap。 由于公司保密协议，我模糊了项目内容。
表3. 典型的product roadmap，说明项目、预计时程及人力
常见的甘特图(gantt chart)非常适合做product roadmap。 横轴表示时间，纵轴表示活动(项目)，线条表示在整个期间上计划和实际的活动完成情况。 它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。
图21. 市面上的gantt chart/roadmap
以下是最终成品，由于项目项目并没有很多，我是直接用ppt制作：
移除不必要的网格线
利用人头的图标表示人力
确保颜色、字体与公司品牌一致
调整间距
经过这四个步骤，就可以设计出简单利落的甘特图，也欢迎大家讨论！
图22. product roadmap的最终成果
4. conclusion 总结
非常感谢大家耐心、仔细地看完这篇长文！ 从数据可视化介绍、图表设计步骤到实际操作，希望大家能够对data visualization有近一步的认识，并且可以运用在生活中。
不论你是学生，或是上班族，图表出现在我们的生活周遭。 制作图表可以发挥创意、很有成就感，将冰冷冷的文字数字转化成有趣、美丽的图表。
希望大家喜欢这次的内容，有任何想法欢迎大家讨论！
shandy tsai product designer @ fevo, new york
5. references 参考数据
*data visualization 101: how to design charts and graphs(recommended)
*data visualization vs. infographics (recommended)
*11 design tips for visualizing survey results (recommended)
principle of data visualization
visual analysis best practices
what do you mean i’m not supposed to use pie charts?!
10 design tips to create beautiful excel charts and graphs in 2017