王幸 王歡

H5是第5代HTML的縮寫，即用H5語言制作數(shù)字產(chǎn)品。目前，大部分網(wǎng)頁都是HTML做的，它不是什么新興技術(shù)，但是由于功能豐富加上各大瀏覽器都可以支持所以相比于以前的HTML4就得到了廣泛應(yīng)用。也就是說大家所看到的網(wǎng)頁其實(shí)都是HTML代碼所呈現(xiàn)出的效果。而使用H5制作適合在手機(jī)等移動端呈現(xiàn)的新媒體產(chǎn)品，也早已成為各媒體的基本技能。而在新聞類H5作品中，如何讓讀者能迅速地了解到新聞事件全貌，并且可以身臨其境地感受新聞場景，就成為了作品質(zhì)量高低的關(guān)鍵之一。筆者以2020年四川省新聞獎一等獎作品《出警！川|A7536警向暴雨中心駛?cè)ァ窞榘咐?，分析了H5作品中的沉浸傳播手法。

作品生產(chǎn)過程

2019年8月20日凌晨，成都市大邑縣西嶺鎮(zhèn)云華村山洪暴發(fā)，有群眾被困，急需救援。西嶺派出所副所長李科，輔警周正良、羅永紅立即駕駛川A7536警出發(fā)，不幸遇險。李科、周正良犧牲，羅永紅當(dāng)時失聯(lián)（后確認(rèn)犧牲）。8月26日上午9點(diǎn)，李科、周正良兩位英雄的遺體告別儀式舉行。為了送英雄最后一程，成都日報錦觀編輯部立即制作并推出H5作品《出警！川|A7536警向暴雨中心駛?cè)ァ?/p>

作品邏輯遞進(jìn)

H5講述了一個真實(shí)發(fā)生的新聞故事。整個作品以黑白色為主基調(diào)，畫面從片喧嘩的雨聲中開始，緊接著畫面中響起了緊急的鈴聲，“雨勢很大，出現(xiàn)山洪，有群眾滯留，需要救援！”電話那頭打給派出所的緊急呼救，附上當(dāng)事者最后的電話錄音，仿佛身臨其境。緊接著，畫面中出現(xiàn)了警車徘徊在山路間，漆黑的夜里有飛石落下，山邊的河水不斷上漲的場景，這些場景將當(dāng)時環(huán)境的危險性真實(shí)地體現(xiàn)了出來。在表現(xiàn)警察到達(dá)遇險群眾聚集的地方進(jìn)行緊急疏散的場景時，畫面采用了4格漫畫的形式，將快速的對話進(jìn)行了緊湊的分割。

新聞的高潮在于第二次真實(shí)的通話錄音。當(dāng)三位英雄與指揮中心的通話突然中斷時，觀眾能感受到電話突然斷掉后的未知恐懼，并為出警警察的生命安全擔(dān)憂。

手繪部分結(jié)束后，緊接著呈現(xiàn)的是真實(shí)的照片，對英勇犧牲的警察進(jìn)行身份介紹，并突出了事件的真實(shí)性。新聞的最后是村民、同事、親人想要對犧牲英雄們說的話，新聞的真實(shí)與現(xiàn)實(shí)的結(jié)果，不用刻意渲染就能感染讀者，自然而然就對這幾位英勇犧牲的人民警察產(chǎn)生深深的敬意。

作品交互特點(diǎn)

《出警！川A7536警向暴雨中心駛?cè)ァ饭?jié)奏緊張，在線性敘事的過程中實(shí)現(xiàn)了精準(zhǔn)剪輯和重點(diǎn)表達(dá)。作品采用“滑動+點(diǎn)擊”這種最簡單最直接的操作方式，讓讀者以最小的操作成本就可以獲取到“畫面+聲音+動效+時間軸播放”的沉浸式互動體驗(yàn)。在制作過程中，作者巧妙地將SVG（可縮放矢量圖形）與canvas等多項(xiàng)技術(shù)結(jié)合運(yùn)用，既保障了作品體驗(yàn)的順暢感，又在整體時間軸的重要節(jié)點(diǎn)上用慢放等形式強(qiáng)調(diào)細(xì)節(jié)，使作品的層次感突出，感情表達(dá)強(qiáng)烈有力。

作品定位為第三人稱視角，前半部分主要采用了手繪故事的形式，H5技術(shù)將所有畫面片段串起來的同時，也賦予了作品動效和聲效，讓定格的手繪場景動了起來、活了起來，場景表達(dá)自然且生動。作品后半部分則采用了“真實(shí)圖片+文案”的基本元素，在滑動交互.中展現(xiàn)不同角度的人物故事，將人物形象表現(xiàn)得更加豐滿。

作品的感情渲染在漫畫手繪與真實(shí)照片資料無縫切換時達(dá)到高潮，讓讀者突然發(fā)覺“漫畫”其實(shí)就是真實(shí)事件，這種“從虛擬到真實(shí)”的劇本處理方式也進(jìn)一步加深了讀者心中的情感迸發(fā)。同時作品在音效的處理渲染中巧妙結(jié)合時間軸中的關(guān)鍵節(jié)點(diǎn)，進(jìn)一步突出作品高潮和情緒爆點(diǎn)，增強(qiáng)感染力。

作品傳播效果

習(xí)近平總書記曾指出，講中國故事是時代命題，講好中國故事是時代使命。該作品基于現(xiàn)代網(wǎng)絡(luò)、智能手機(jī)等基礎(chǔ)條件，運(yùn)用H5交互設(shè)計技術(shù)創(chuàng)新講故事的方式方法，讓英雄故事深入人心、讓英雄精神直抵人心。

該作品一經(jīng)發(fā)出，就在社會各界引起廣泛傳播轉(zhuǎn)發(fā)。僅在發(fā)布后24小時內(nèi)，該H5總瀏覽量就達(dá)到了11.4萬，流量不僅覆蓋全國各地各省份，還包括紐約、東京等國外城市。截至目前，該作品全網(wǎng)瀏覽量超20萬，還得到了中央政法委官方微信公眾號“長安劍”等平臺轉(zhuǎn)發(fā)傳播。

產(chǎn)品通過最簡單的“豎向滑動+點(diǎn)擊”的互動操作，運(yùn)用SVG（可縮放矢量圖形）與canvas等多項(xiàng)技術(shù)，將文字、照片、手繪、場景聲效、人物音頻、背景音樂、漸進(jìn)式動畫等要素協(xié)調(diào)交融在模擬場景中，創(chuàng)造了一個沉浸式的體驗(yàn)環(huán)境，給人以真實(shí)的臨場感。該作品主題鮮明，集中所有形式和元素展現(xiàn)基層干警一心為民、忘我工作、不怕犧牲的精神;該作品布局完整、堅持創(chuàng)新，將三位英雄的故事從出警到犧牲的全過程一展現(xiàn);該作品高度融合技術(shù)和藝術(shù)，在運(yùn)用現(xiàn)代技術(shù)講好故事的同時，也打造出一個網(wǎng)絡(luò)平臺，讓不能到現(xiàn)場送別英雄的人能通過網(wǎng)絡(luò)和手機(jī)回顧英雄事跡、向英雄致敬。

畫面的美術(shù)表達(dá)

要想讓讀者在閱讀作品時的沉浸感更強(qiáng)，除了要控制好作品的邏輯遞進(jìn)、把握好敘事節(jié)奏外，畫面的表現(xiàn)力也將直接影響讀者的觀感體驗(yàn)。一個好的美術(shù)設(shè)計可以將作者想要表達(dá)的情感融入進(jìn)線條元素與畫面色差等美術(shù)表達(dá)中，從而使讀者通過視覺元素就能體會到作品的情感。線條元素的當(dāng)代用法

H5當(dāng)中的畫面設(shè)計運(yùn)用了傳統(tǒng)美術(shù)的點(diǎn)線面中的線為基礎(chǔ)內(nèi)容之一，不同的畫面用線條來表達(dá)，其有著完全不一樣的結(jié)果。例如直線的緊密寫實(shí)、細(xì)線的虛擬委婉、曲線的婉轉(zhuǎn)陰柔等，以及畫面中線條之間的虛實(shí)結(jié)合、輕重綬急。讓整體畫面有著抑揚(yáng)頓挫的視覺感受。場景人物畫面都用線條來表現(xiàn)，那線條會給讀者帶來怎樣的感受？以下用3個不同應(yīng)用來舉例：

例1：粗細(xì)線條的合理搭配

在《出警！川|A7536警向暴雨中心駛?cè)ァ返膱鼍耙焕锩嬗袀€西嶺派出所的畫面表達(dá)，用粗細(xì)結(jié)合的直線條來表達(dá)公正且莊嚴(yán)的場景，細(xì)線條和粗線條結(jié)合能使畫面更加柔和。

例2：婉轉(zhuǎn)的曲線和簡j潔線條的用法婉轉(zhuǎn)的線條勾勒能變換出不同維度的畫面，在中西式畫風(fēng)的不同分割下，線條的委婉柔和有著不同的理解，例如錢選的山水畫《浮云山居圖》用簡單的線條勾勒山石，用細(xì)筆勾勒出樹木枝干，更多的留白營造出云淡風(fēng)輕的意境。而西方的線條表達(dá)多用女性婀娜多姿的體態(tài)，來表達(dá)曼妙柔美的視覺觀感，例如西班牙畫家畢加索的《夢》用粗線條婉轉(zhuǎn)地表達(dá)了女人身體的外部輪廓，留給觀者想象空間和思維的自由性。

例3：虛實(shí)結(jié)合的線條運(yùn)用方法

虛實(shí)結(jié)合的用法廣泛運(yùn)用在了藝術(shù)表達(dá)中，我們可以在很多藝術(shù)領(lǐng)域都能看見，比如動畫電影《心靈奇旅》，動畫人物用簡單的線條勾勒卻能有豐富的表情變化和性格特征，虛實(shí)結(jié)合線條元素打破了本來單一線條局限的條件，再加上畫面背景的配合，將動畫人物勾勒出傳神的視覺感受，將一些只能用語言表達(dá)解釋的詞用視覺的方法來表達(dá)，將線條賦予生命和性格。

美術(shù)構(gòu)圖方式在H5動畫中的運(yùn)用

畫面中想要表達(dá)的主要內(nèi)容可以通過不同的構(gòu)圖布局來彰顯藝術(shù)表現(xiàn)力，處理好畫面的加減法讓主題得到更好的表達(dá)，讓情節(jié)效果得到更多強(qiáng)調(diào)，例如傳統(tǒng)中國水墨動畫《小蝌蚪找媽媽》，簡單的荷葉元素、顏色深淺不一的色塊表現(xiàn)石頭，不用過多對水的刻畫就能有活靈活現(xiàn)的小蝌蚪們在水里穿梭的畫面感。

顏色搭配在H5動畫設(shè)計中的運(yùn)用

H5動畫設(shè)計中顏色搭配主要傾向于劇情和人物性格的判斷，顏色能夠代表人物的性格特征和畫面的主要情感色彩，比如：黨政人物記事類采用深紅色最為莊重，科技展示類動畫表現(xiàn)多為藍(lán)色或深紫色，文化類故事講述采用銀色或淡金色。以澎湃H5作品《天渠》中的顏色搭配應(yīng)用為例，總基調(diào)是黑色，仿佛在遙遙無期的黑暗中尋找到了一絲光，順著微弱的光線逐步講故事。整個H5采用黑白灰金的4個簡單的色彩，并且人物從黑色逐漸過渡為白色成為畫面中心，推動著劇情的發(fā)展，畫面由暗到亮推動著H5講述時情緒的發(fā)展，而黑白的明亮對比又能營造更加真實(shí)的場景氛圍。

當(dāng)前，H5雖然是一種較為新興的網(wǎng)絡(luò)呈現(xiàn)方式，但在視覺設(shè)計中依舊滲透著傳統(tǒng)美術(shù)的表達(dá)模樣，依舊嫁接、模仿了傳統(tǒng)美術(shù)中的精髓，從而繼承其中的優(yōu)良藝術(shù)精神，既符合現(xiàn)代人的審美觀，又不失傳統(tǒng)美術(shù)的文化底蘊(yùn)。當(dāng)代的審美藝術(shù)在不斷前行、開拓創(chuàng)新，我們要不斷吸收著前人的經(jīng)驗(yàn)并創(chuàng)造出屬于自己時代的藝術(shù)作品。

（作者單位：成都日報社）