回首PC时代的富媒体专题—以搜狐为例

分享给朋友:

作者:张韧刚,@安静的大猫,搜狐图解财经栏目负责人,《图说身边经济学》一书作者(购买链接>>>)。

Screen Shot 2014-12-28 at 9.51.19 PM

2014年之后,互联网全面转向移动端,导致传统的门户网站专题模式显得过时,而由门户网站专题演化出来多以FLASH实现为主的的富媒体报道模式,也随之凋零。如今四大门户网站已经很少能看到类似的专题。在手机端,被广泛讹传为HTML5的手机端媒体内容产品方兴未艾。

由于移动设备的特殊性,FLASH不再被支持,以键盘鼠标为主的交互方式逐步转变为触屏和多传感器输入,老的报道形式已经逐步被淘汰。但是在这些现在看起来有些过时的门户网站专题里,我们依然可以看到很多内容产品化的思考,其中一些交互模式并不比我们现在在微信上看到的所谓“H5产品”差。在此选取一部分案例与大家分享:

1、神州7号多媒体报道:(链接>>>

2008年是搜狐的巅峰时代,作为奥运会主赞助商的搜狐财大气粗,做起富媒体报道的时候都是和水晶石合作的。

sohu1

神州7号的报道使用FLASH呈现,采用交互和视频转场穿插的形式。在交互的页面上采用FLASH进行交互,展示飞船火箭的具体细节。两个页面之间的转场用视频进行穿插。

sohu2

转场视频做的非常流畅,由于转场和交互页面用的是同一套3D模型生成的图片,所以看起来非常流畅,感觉不到切换。

sohu3

静态的展示页面:通过视频转场连接起来的静态展示页面,分步骤展示了神州7号飞行的全过程。以及每一个过程参与工作的具体部分。从时间线的角度来讲相当流畅,但是从静态展示页面到视频转场的每次切换都是通过左下角的按钮实现的。所以交互的感觉有些怪。

sohu5 sohu4

值得一提的是,水晶石利用FLASH呈现飞船舱内的3G模型,可以通过左下角的控件来旋转视角,或者通过鼠标来旋转,在08年,用这种技术来做报道可以说是相当奢侈了。唯一可惜的是没有舱内具体设备的用途的说明(没准也拿不到)。

2、数字之道2011年全国两会特别策划:(链接>>>

这个策划的亮点是用JS嵌套FLASH,将8个话题集中在同一个页面上进行展示。部分FLASH用了一些小动画引导用户阅读,和现在一些微信交互页面非常相似。整体上来看设计感十足,信息的组织也很棒。在CPI科普和分税制的讲解两块做的都颇为用心。

sohu8 sohu7 sohu6

3、日本地震前后对比图像:(链接>>>

这图应该是转载外媒的报道,通过JS实现两张图片的叠加切换,很好的展示了日本地震前后的对比。

sohu

4、十年反恐报告:后911时代的世界新格局(链接>>>

sohu9

这个报道做的非常有深度,很多内容高度精炼,表达到设计都很不错。很多图标运用的也非常的当。唯一的问题是左侧的导航做的太过于隐蔽,很多用户没有找到。

sohu10

5、反恐十年影像纪实:(链接>>>

JS结合图片打造的一个用时间轴组织的图片报道合集。其实这种设计方式如果直接平移到手机上,用触屏滚动来实现翻页应该也是可行的。美中不足的是代码上有点小瑕疵,感觉上面的搜狐标准导航条有些多余。

sohu11

6、当蓝天成为一种奢侈品:(链接>>>

sohu12

这个图在制作上有点讨巧,通过JS在一张天安门照片上叠加不同透明度的PNG雾霾照片,来表达北京当天的天气,非常直观的表达了北京空气质量的变化情况,美中不足是在准确性上有待考虑。

7、我的微博日志——几名网友的玉树地震经历:(链接>>>

这是微博时代搜狐的一个报道形式探索,通过几位网友在青海玉树的经历来给大家讲述玉树地震造成的严重后果,通过微博GPS数据和地理位置匹配做成地图。虽然想法非常前卫,但是由于技术实力所限,产品最终以FLASH形式实现,所有的微博也是通过编辑手动导入。后期可维护性较差,整个画面也缺乏美感。

Screen Shot 2014-12-28 at 9.42.29 PM

原创文章,转载请注明作者与出处。

作者简介

数据新闻网

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