首页 时政 国际 港澳 台湾 财经 法治 社会 纪检 体育 科技 军事 文娱 图片 视频 论坛 博客 微博
新华网 > > 正文

财新数据可视化实验室:诺贝尔奖可视化数据新闻设计总结

2015年08月17日 15:14:14 来源: 《中国传媒科技》杂志

    记者|刘胜男

    媒介融合当道,编辑记者们要掌握的不再仅是笔头功夫,能用用户体验最好的方式做新闻才是增强自己竞争力的砝码。这个时代需要复合型人才,虽不要求每个人都成为技术流,但跟上可视化设计师的思路实属必要。

    2012年,莫言获得诺贝尔文学奖,他是有史以来首位获得诺贝尔文学奖的中国籍作家。2013年12月诺贝尔颁奖典礼前后,财新数据可视化实验室推出数据新闻,向一百年来的七百多位获奖者致敬。

    如今,越来越多的中国媒体和中国人关注诺贝尔,而要了解诺贝尔的历史,财新网的这张《百年诺奖》数据可视化动态图一目了然。而且在此专题出品一年后,细心地加上了2014诺贝尔奖的信息。可视化设计师任远说,这个专题会常年更新下去。

    这个项目从数据分析——视觉通道——视觉结构——视觉设计,经过多次迭代的方式,最终得到较满意的设计。跟着可视化设计师任远的思路,图解设计过程:

    一、数据分析

    在分析了诺贝尔的原始数据以后,决定以时间线为导向,分别展示各年份的数据:

    (1)该年各奖项获奖比例;

    (2)该年各国各奖项获奖比例;

    (3)该年各国按获奖年龄分布的获奖人,获奖人的数据包含:照片,名字,英文名,性别,获奖年龄,国家,奖项类别。

    为获奖人的属性分配可视化的“视觉通道”:

    (1)获奖年龄:位置;

    (2)国家:位置;

    (3)奖项类别:颜色;

    (4)其他的数据信息:边栏。

    二、视觉结构设计

    由获奖年龄、国家、奖项类别的视觉通道:位置、颜色,可以确定用散点图的结构会比较直观。由于国家的列表项有40多个,用横向和纵向的散点图会超出界面边界,所以把散点图折成了圆形来表现。半径表示获奖年龄,对应圆心的角度表示国家,颜色表示奖项类别。再加一层时间轴就构成了基本的数据图(见图1)。

    可以看到用圆形表示散点图,越靠近圆心等分的面积越小,比较受限制,可读性和视觉效果也不佳。所以将圆形变成了环形的散点图(见图2)。

    三、权衡视觉设计、交互设计、用户体验

    这样一来,数据图不论是在视觉和可读性上,都有了提高。可是问题又出现了,时间轴放在最里面,用户操作起来很不方便。因为还需要一个可以精确点选到从1900-2013年的某一年的功能。于是在接下来的几天尝试了另外几种解决方案。

    根据之前的数据图,拓扑出来了6个方案(见图3),但都有各自的优缺点,始终不能达到权衡视觉设计、交互设计、用户体验的最完美状态。最后选择了两个比较接近的设计,第一个和第五个。然后,加入“各国各奖项获奖比例”继续往下设计。

    最终选择了“图4”中的第二个方案。

    四、环形文字的可读性处理

    前面的图中文字在环形排列时会有反转的情况,可读性不高。在尝试左右反转的方式后,最终又改为另一种方式:将环形用“X”分为上下左右4个部分,上下用竖排文字,左右用横排文字,文字的排列遵循从左到右和从上到下。这种方式很适合中文字体,因为中文字体基本上都是显方形的,在元素细节构图上会比较好看。如果是英文字体的话可能不太美观,英文字体大多为长方形,所以竖排的文字会显的扁一些(见图5)。

    五、真实的数据往往会有“缺陷”

    诺贝尔的数据在“1900”和“1940-1942”两个年份段有空缺,时间在变化的时候,数据图右侧会出现两次人物列表空白。而两个年代,第一次是在开始时间1900年,第二次是在二战期间1940-1942年。

    为了画面元素平衡,开始时,使用诺贝尔头像和文字标题替代右侧的空白处;二战期间,用坦克和文字标题替代右侧的空白处;都用插画风格来表现,和左侧的环形数据图相应和。插画用少面积的蓝色填充,达到画面色彩平衡。

    六、整体和局部展示

    整个诺贝尔可视化的过程都是展示单个年份,没有一个整体呈现的过程。所以在一开始的时候加了一个整体概况分布。

    对于数据可视化设计,数据分析、视觉结构、交互设计、视觉设计的耦合度很高,所以在设计时要全面的、整体的考虑,权衡它们之间的影响和关系。此可视化设计的动态效果可在财新网“数字说”频道查看。

[责任编辑: 高海英 ]
新华炫闻客户端下载
010020111200000000000000011199861345259881