5月27日，是G20杭州峰会倒计时100天的日子。这场今年中国最为瞩目的国际会议，从年初就成为热门话题。东道主杭州，从国际知名的旅游度假目的地，一跃成为中国和世界对话的舞台。

作为浙江本地政经新闻第一移动平台，这个节点怎么展示杭州？浙江新闻客户端不想沿袭旧有的套路，而是借鉴当下最潮流的全景交互、VR等概念，用第一视角的视觉震撼和别有情趣的故事表达，精心打造了两款创意H5产品《敲开一道门 爱上一座城》、《再过100天 欢迎来我家》。 

来自浙江新闻客户端的记者们，讲述了他们制作这两款交互产品背后的故事。 

剧本：看风景，也在讲故事

如果不是G20杭州峰会，2016年5月27日就是个普通日子。再过四天，六一儿童节。

所以，我们想到了孩子。

作品的策划团队认为，对于VR技术，技术的酷炫是一种层次，更重要的是，呈现的是第一人称视角的世界。目前很多VR作品其实是初级的，真正能带来沉浸感的好东西，应该是有情节的，可交互的。

所以浙江新闻客户端制作《再过100天 欢迎来我家》作品，最开始着手的就是剧本。新媒体报道，每一个起点都源于内容层面，故事的设定会成为产品调性的基础。G20杭州峰会倒计时100天交互动画片的主角，就是一个杭州小姑娘儿。

“小女孩看到的，都是最美好最真实的。”

我们以一个地道杭州小伢儿的视角，去听到，去看到杭州因为G20所发生的变化。我们设计了人物形象。一位30岁的年轻爸爸和一位4岁的杭州女娃，以及他们的交通工具，是一辆极具杭州特色的红色公共自行车。

故事从清晨走出家门开始。

行程开始了，父亲骑上公共自行车。宽大的背影在前，可爱的女儿在后。一天24小时，从日出到日落，走遍杭州6个地方：钱塘江边最美城市跑道、白墙黛瓦的传统社区、城市中心武林广场、杭州最繁华商业街延安路、最美西湖景区道中、以及曾在试启用当天万人围观的西湖音乐喷泉。

之所以选定这些地点，一是他们是杭州在G20筹备期城市形象蝶变的重要座标，二是他们本身在视觉感上就相对丰富。比如开场就视觉绚烂的城市跑道，这个无比美丽的镜头背后，是我们一个身强力壮的摄影师，单手骑着自行车，另一只手高举设备，往返了无数个来回，几乎手残。 

所以这也是值得一提的，很多视频产品，都是固定机位静止记录，而这部作品，从头至尾都在运动中记录。这样观看者在体验上，会有一种跟着一起游走的感觉。

故事设定里最重要的一环是，自始自终，用小女孩的独白，从第一人称的视角看世界。用户跟着一个软萌的声音，沿着她的足迹发现杭州。

通过反复对比，我们选择了动画合成方案，爸爸骑公共自行车带着女儿的这一组漫画形象，出现在各个场景里。六个场景实景拍摄与爸爸女儿的这组动画，相得益彰，使得整个动画有趣灵动。

动画组在分镜头的基础上，采用传统动画的方式绘制镜头。首先原画组按照平均每秒4-5张动画稿的频率在3天内赶出了原画稿，使这对杭州父女在画面中活灵活现的动了起来。 

分镜头草图

处女座的创作团队，甚至注意到了一个细节，开场时小女孩出场，摄像机有仰拍的画面，就是降低到儿童的视角。 

交互：向前冲，也能歇歇走

本来如果一切追求简单，一段长视频就可以解决全部，但是用户看一个作品，可交互可探索的体验就没有了。浙江新闻客户端的制作团队认定，这一点不可或缺——只有指尖的参与，思维才能跟着走。

我们要的，就是这种代入感，场景气氛的营造对作品来说相当关键。作品的导演组，逼迫程序猿把很多有趣的体验付诸现实—— 

在拍摄过程中，我们考虑了2套方案，1套是请真实的爸爸骑车，我们在后面一路跟拍，制造类似女儿坐在自行车后座看世界的感觉；2套是以小女孩的第一人称视角进行拍摄，最后在后期，用动画合成人物和背景。

《再过100天 欢迎来我家》里，用户按下“时间继续走”，故事向前叙述。但此时画面中，会跳出“松手，让爸爸歇一歇”的提示。用户松开手指，三个萌版的交互动画让用户选择体验：喝水水、吃冰冰、擦汗汗。

这个思路来源于很多游戏，在场景与场景之间，会用轻松的交互动画进行间隔。我们的设计更多是想加入一点人文的东西，把父女间的亲情表达出来。而游戏化本身，是希望做到一些场景物品的互动，来实现整个新闻叙事结构的创新，丰富叙述的全过程。

这里面还有很多技术细节：从人机交互来讲，在按住播放视频的这一段中，由于视频的播放需要用户持续按住播放按钮来推动，我们需要考虑视频的时长不宜过久，并需要在视频中体现提示用户播放进度的元素。

配音和拍摄几乎同时进行：我们找了同事4岁半的女儿来配音，一个地道的杭州小伢儿。

平翘舌音不分，略带沙哑的嗓音，满口嗲嗲的杭普话……事先没经过任何培训，孩子带来的，是最真实的声音。因为宝宝太小，既不认字也记不住长文，配音过程费了不少周折。

所有配音，都是妈妈念一句，妞妞跟一句，反复念，反复跟，口齿不清的地方还得委屈宝宝不断反复；次数多了，宝宝自然就有小脾气了，没办法，继续用母爱解决问题。

经过无数遍的反复，我们终于采集到了需要的素材，接下去会在后期中，去掉妈妈的声音，把零散的短句，剪辑整合成为一体。

另外，全程骑车的镜头里，车铃铛声，路面的嘈杂声，夜晚的闪光灯，都用逼真的音效和动效来表现。 

完成：要自然，也要有力量

一部好的作品，人们体验到的不仅仅是图文的流转，更应该有更多击中人心的东西。

而《再过100天 欢迎来我家》这部作品的台词设计，精妙了穿插了杭州这座城市的历史、风俗、文化，最纯正的市民体验。

早上7点，滨江最美跑道。

蓝红相间的滨江最美跑道，太阳升起，脚下踩着阳光，大人跑步，小孩走路。

爸爸骑着车载着女儿，在骑行道上前行，左边是钱塘江，右边是樱花树。

如此惬意的跑道，也只在杭州了。

片中有一个场景，中午12点，武林广场。台词是这样写的：杭州人喜欢叫武林广场“红太阳”，是爸爸妈妈小时候最喜欢拍照的地方。

下午1点，场景切换到延安路。全长3.3公里的延安路，是杭城南北向的交通要道，也是杭州目前规模最大的商业街。而在孩子眼里，，马路上走着很多漂亮的阿姨，这里是妈妈的天堂。

下午3点，场景切换到南山路。如果说北山路留下的民国范是相对静态的风景，南山路则更像是一席流动的盛宴。骑车经过，孩子说，马路两边的大树，像雨伞一样，帮我挡住太阳。

家庭、亲情，浓郁的生活气息，让整个H5生动丰富起来。

“这座城市像我的爸爸一样，给我安全感，让我很温暖。”这样的话语在结尾部分，用小女孩软萌的声音说出来，让人动容，却又十分自然。它比任何一部宣传片，都有力量。

这种精妙的结合，离不开技术的完美配合。

从技术的角度来说，这部H5最精华的部分，也在于一天5个时间点的视频呈现，过程需要用户配合持续按住播放按钮来推动，画面更是集视、听于一体。那么这个过程是如何实现的呢？

我们专门找了浙江新闻的技术大咖解答。大咖就是大咖，下面能看懂的都是编辑妹纸们膜拜的对象：

“从技术角度分析，整个作品特点在于将视频置于H5框架内，难点在于基于h5的canvas技术实现对视频进行实时处理以及对视频播放进行控制，此外，视频中所呈现的滤镜效果叠加都是在H5中实现。为了避免视频全屏，并且能够定制视频播放，我们使用了canvas读取视频帧，并用requestAnimationFrame控制读取视频图像，最后渲染到canvas，使用这种方式，可以针对视频图像进行滤镜渲染操作。另外，由于读取帧的方式会导致音频文件的失效，我们要在加载视频的同时，同步播放声音文件，并且同步视频帧和音频帧。”

怎样？实实在在地上了一课吧。 

新技术，也是新可能

接着，我们再复盘一下浙江新闻客户端为G20杭州峰会倒时计100天打造的另一部作品：《敲开一道门 爱上一座城》。这是一个相对纯粹的硬VR作品。但这种上帝视角感的视觉体验，也让很多网友大呼过瘾。

这是基于H5，并利用VR虚拟现实技术聚合而成一个全景体验作品。在制作H5之前，我们做了大量案头工作，搜集整理杭州入城口整治规划数据，最终将十二个重点整治的入城口作为典型，通过12道门认知杭州的悄悄变化，表达“敲开一道门，爱上一座城”的设计初衷。

作品首页包含了泼墨山水画元素、随风摆动的杨柳和鸟儿欢快的鸣叫等，无一不体现出杭州这座城市柔美的性格。这里还有一个巧妙的交互设计，把开启一扇门作为整个H5作品的开启按钮，过渡平滑自然，因为我们都知道古时城门等同于现在的入城口。

作品第二页则把一条延绵不断的道路作为主背景，道路两旁是杭州的一些特色建筑。这个也是特定的设计语言。道路代表杭州快速发展的速度，也可以把它视为欢迎八方来客的红地毯，而两边的建筑则是对杭州众多地标建筑的集中展示。

最酷炫的地方就是作品的核心——入城口的介绍，这里我们采用了VR虚拟现实技术。

事先将各个入城口，通过360°摄像机进行拍摄，并通过VR技术进行处理。在不借助外设的情况下，用户可以根据自己喜好，点击屏幕上的小飞机图标来切换观看视角和场景，将简单互动的感觉做出来。如果佩戴VR眼镜，那就立马会有一种“上帝视角”的感觉，可以转动头部，看你想看的地方。这最大程度的增强用户代入感，给予身临其境之感。 

入城口展示的背景我们采用卫星地图视角，增强真实感和科技感。此处设计理念是将人们使用导航软件的感受移植过来，改变以往H5那种死板翻页展现的形式，从而可以达到缩减用户的心理阅读时长的效果。

不管是视频，还是VR，它不仅是一门技术，更是一种全新的报道方式。它让沉浸式的新闻体验成为了可能，也让新闻策划的边界，又延展到了一个新的天地。

来源：全媒派 

分享让更多人看到