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，它不僅是一門技術，更是一種全新的報道方式。它讓沉浸式的新聞體驗成為了可能，也讓新聞策劃的邊界，又延展到了一個新的天地。

來源：全媒派 

分享讓更多人看到