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

2015-01-07刘胜男

中国传媒科技 2015年6期

关键词：财新可读性诺贝尔

本刊记者｜刘胜男

本刊记者｜刘胜男

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

财新数据可视化实验室

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

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

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

一、数据分析

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

（1）该年各奖项获奖比例；

（2）该年各国各奖项获奖比例；

（3）该年各国按获奖年龄分布的获奖人，获奖人的数据包含：照片，名字，英文名，性别，获奖年龄，国家，奖项类别。

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

（1）获奖年龄：位置；

（2）国家：位置；

（3）奖项类别：颜色；

（4）其他的数据信息：边栏。

图1

图2

图3

二、视觉结构设计

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

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

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

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

图4

图5

图6

图7

图8

图9

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

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

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

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