财新设计师:数据新闻可视化经验谈

分享给朋友:

作者:任远,设计师,2013年10月入职财新,参与数据新闻与可视化实验室的工作,代表作品有《中东地区的敌友关系》(入职前,基于财新数据)和《三公消费龙虎榜》(入职后)。

以下为他个人撰写的做数据新闻的一些体会,首发于财新博客,数据新闻网经授权转载。

1.自己选择传媒行业的原因

在国内互动行业我所了解的有四个行业:互动广告、互联网产品、展览展示、传媒,这些行业或多或少都受到了数据可视化的影响,并且都在以各自的特点发展这一块。

对于数据可视化,个人认为可视化作品只有具备了必要性、传播性、公开性三个要素才能最大化的影响到人们,让更多的人了解到可视化的重要性。而新闻的内容最具备这三要素,它的必要性体现在人们对于新闻都有主动需求,尤其是财经政治类的新闻,不像广告需要用户被动接受,并且是想方设法的;它的传播性就不言而寓了,报纸、杂志、互联网、电视等,而展览展示在传播性上会显得弱一些;它的公开性体现在新闻的所有内容和数据都是公开的,这句话听上去像是废话,但是对于大部分互联网公司的非公开数据,它就占据了很大的优势。所以在图形信息的时代,新闻可视化是最容易体现可视化的重要性和最有效传播它的一种形式。

另外,
作为一个数学爱好者,希望自己可以每天和统计、数据、数学逻辑打交道。
作为一个可视化设计师兼开发者,希望自己的作品可以很好的传播,让更多的人知道。
作为一个追求艺术和科学统一的人,希望每天都能尝试不同的艺术表现形式,学习更多的科学理论,不断的寻求他们之间的平衡。

数据可视化新闻是一个很好的领域,对于这样一个领域为什么会说NO!

2.关于数据新闻可视化的工具

有很多人之前问过我,数据可视化新闻到底用什么工具和技术最合适。各个工具与技术都有它个自的特点,我只能简单的说一下我做数据新闻从设计到开发所用到的工具和技术:

设计工具:Illustrator、Photoshop、Flash

Illustrator设计图表、矢量图形很方便。并且它可以直接导出Svg格式文件,这意味你在开发的时候可以直接调用它。如果你的元素都是程序动态生成的,可以通过查看Svg文件中每个元素的坐标、大小、色值来做到精确定位。这很适合设计师和程序员之间的配合方法,因为在设计师眼里能感受到一个像素的差别,而大多数程序员没有这个意识。

Flash也是一个很好的矢量绘图工具,拿它做设计最大的优势是,你可以直接在设计好的元素上添加交互动画演示,或者是添加代码来实现交互逻辑。

Photoshop位图处理软件,适合做非扁平化的复杂UI,如果你的可视化作品里的元素需要用到很多外部图像,那你可以考虑用Photoshop来设计界面,然后分层导出它们。

编程环境:ActionScript、Processing、JavaScript

由于考虑到兼容性和跨平台,一般最终发布到网页的可视化新闻都是用JavaScript来实现。

Html5支持Svg和Canvas两种绘图技术:Svg是矢量绘图模式,它包含的图形对象支持交互事件,适用于图表类型,并且交互动画大部分都是过程动画的可视化作品。Canvas是位图绘图模式,可以对位图进行像素级别的操作,适用于实时渲染、交互动画很复杂的可视化,它的元素不支持交互事件,所以对于Canvas事件框架可以用基于位图像素边界检测,配合简单的状态者设计模式来实现。

由于ActionScript、Processing对线上和跨平台支持不是很完美,所以我一般会用它们来做前期原型设计,Html5的Svg技术很像ActionScript的矢量绘制技术,ActionScript有很清晰的面向对象,并且还有很方便的可视化编辑器Flash,能够很方便的实现各种交互动画,用它来在前期做可视化设计会很方便。而Canvas技术又很像Processing的位图绘制技术,Processing很简洁,你在编码的时候不需要配置环境,写过长的头。非常适合灵感一来马上就能记录下来的编程工具,但是它简洁而不简单,你可以利用它来实现各种各样的可视化效果。虽然最终用的是JavaScript技术实现,但是在实现的过程中用到了大量的基于Flash或者Processing的设计思想和开发思想。所以如果有时间的话可以去全面了解一下各种开发模式下,常年积累下来的开发思想和设计思想。

另外想说的是有很多人再说我会这个工具,我会那个语言。我想说最终能体现你的还是你的作品,或者是你总结出的思想理论。所以工具和语言都只是实现想法的一个途径,最重要的还是思想,和能代表你思想的作品。就如莫言一样,也许他只会中文这一种语言,但是他写出了能获得诺贝尔文学奖的文章,我想一个会全世界语言的人未必能做到。而莫言轻轻松松的找这些人就可以用不同语言传递他的思想。

3.可视化设计师应具备的能力

作为一个可视化工作者和传播者,我更希望人们叫我设计师。对于可视化设计师需要具备的能力,我个人是这样认为的:

可视化设计师和传统的UI设计师、平面设计师、交互设计师有些区别。作为可视化设计师首先要学会分析数据,具有一定的数学统计思想,因为你在对数据可视化的时候你需要了解你所设计的图形图表,或者是更大的展示系统是基于什么数据结构体现的。没有清晰的理解数据结构和数据关系,你是无法设计出正确的可视化系统。你还需要有交互设计的理论,这样可以正确引导你用各种交互手段来把数据结构化到视觉框架层面,整理出用户正确理解和分析数据的逻辑。还需要一些视觉设计方法,帮助你用很美观的视觉语言来展示数据。这里的视觉设计比传统平面设计要严谨,在视觉设计的时候,应用的那些对比,平衡,韵律等设计手段都要符合数据结构和数据关系。还有就是程序知识,编程思想可以很好的帮你建立结构化的逻辑思想,有利于你前期理解数据和可视化设计,另外利用程序你还可以用生成设计的方法来做可视化设计。

所以我认为一个优秀的可视化设计师是需要同时具备数据分析、交互设计、视觉设计和程序开发的知识。这也是我一直以来寻求的目标和方向。

4.新闻是不是用可视化表述最好?

我认为可视化设计师和传统的新闻编辑都属于编辑,文字编辑用文字语言来描述新闻,可视化编辑用视觉语言来描述新闻。

我觉得二者有时可以并行,有时也可以配合。因为他们的终极目的都是表述新闻,只不过是有些新闻用文字来表述比较好,有些新闻用可视化图形来表述好,有些新闻则需要两者兼备。用什么方式完全取决于新闻内容的特点。

最后,希望即将要走在这个路上的和已经在这个路上的数据新闻工作者们,能够一起探索数据的美妙,和揭示隐藏在数据背后的更多故事。

作者简介

数据新闻网

数据新闻网以引介全球范围内最顶尖的数据新闻实践为初衷,以推动数据开放及媒体革新为宗旨,面向中国的新闻从业者、媒体管理者、新传教育者以及对传媒感兴趣的设计师、程序员,提供线上信息平台与线下交流机会。