楊雨洲

摘要：H5標準的頁面規(guī)范且穩(wěn)定，新的語法特征支持視頻、音頻和canvas標記以及其他新標準，這為在線的多媒體創(chuàng)作方式帶來了巨大變革。目前H5不僅支持用戶與編輯文檔之間的直接交互，還包含針對移動設備和PC端平臺自適應性支持。更重要的是，從簡易的操性到豐富的延展性，H5可以滿足多層面的多媒體創(chuàng)作需要，這也是H5興起并廣泛傳播的重要原因。

關鍵詞：H5；多媒體；創(chuàng)作；傳播

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）04-0195-02

HTML5（簡稱H5）是網(wǎng)頁制作互動效果的一系列技術集合，2014年W3C （World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）與 WHATWG（Web Hypertext Application Technology Working Group，頁面超文本應用技術工作組）將他們這一合作的成果正式推動成為新的行業(yè)標準規(guī)范。伴隨智能移動終端全球范圍內(nèi)的大規(guī)模普及使用，H5優(yōu)秀的特性帶來了更多良好的多媒體用戶體驗。H5標準的頁面規(guī)范且穩(wěn)定，更重要的是，新的語法特征支持視頻、音頻和canvas 標記以及更多新標準，這些對在線多媒體的創(chuàng)作帶來了巨大變革。

1 基于在線平臺的創(chuàng)作

目前，已經(jīng)有非常多的在線平臺可以提供便利的基于H5的多媒體創(chuàng)作，例如：WPS秀堂、易企秀、Epub360、兔展等等。這些在線平臺不僅提供多媒體創(chuàng)作的頁面圖形素材、也提聲音素材、翻頁動畫、鏈接視頻以及填交表單等功能，還可以提供簡易傻瓜式的流程操作。這些在線平臺已經(jīng)將技術化繁為簡，只要用戶按照設計的固定制作流程操作，在無數(shù)的“模板”中選擇使用即可。假如用戶不希望使用模板，也可以在創(chuàng)作流程中根據(jù)需要重新組合各級元素，略加修改頁面和文本內(nèi)容，也可以完成一次“原創(chuàng)”多媒體創(chuàng)作。在線平臺都支持一鍵生成H5并發(fā)布分享，通過QQ、微信、微博等APP快速實現(xiàn)在線傳播，也可以生成二維碼供掃碼傳播。這就將在線多媒體創(chuàng)作的“設計——生產(chǎn)——發(fā)布”的技術難度降到了最低。

在相關在線平臺進行H5創(chuàng)作只需要注冊賬號，便可以直接進入創(chuàng)作頁面。免費用戶和付費用戶在選擇內(nèi)容的權限方面有所區(qū)別，選擇素材庫提供的頁面類型有所差異。用戶根據(jù)自己的需要確定頁面類型之后，開始修改頁面元素、文本內(nèi)容、頁面切換動畫以及背景音樂。最后還可以選擇是否需要表單頁，便于紀錄瀏覽者提交的信息。以上簡單概括了最簡易的使用H5進行多媒體的流程，這種方式完成的H5類似于PPT。最常見的是朋友的喜帖、活動請柬或者會議邀請函等方式，多是由在線平臺提供的創(chuàng)作模板修改完成。

毫無疑問，使用在線平臺進行H5創(chuàng)作的優(yōu)勢是門檻降低、經(jīng)濟實惠、效率頗高。只要愿意，人人都可以創(chuàng)作H5。但如果想要實現(xiàn)自由、獨立、生動有趣的H5創(chuàng)作，就必須跳脫出創(chuàng)作的固定“套路”，僅僅靠在線平臺提供的創(chuàng)作模塊根本無法滿足更高層次的創(chuàng)作需要。

2 基于前端技術的創(chuàng)作

掌握更多關于H5的新特性以及頁面前端的技術支持，是H5標準下進行自由自主創(chuàng)作的前提。H5標準下多媒體創(chuàng)作的優(yōu)勢基于其新特性，例如基于HTML、CSS、DOM以及JavaScript，減少對外部插件的需求（比如 Flash），H5標準有更出色的錯誤處理能力，也更多取代腳本的標記。此外，H5標準獨立于設備，可在線開發(fā)并且開發(fā)進程對公眾透明等等。這些特性不僅使得H5比H4（HTML4）更優(yōu)秀，還可以使H5自身不斷進行迭代完善。

簡單認識一下前端層面，用于繪畫的 canvas 元素可以帶來更多互動色彩，比如手寫效果、涂抹效果等。在用于媒介回放的video（視頻）元素和audio（音頻）音頻元素，對本地離線存儲的更好的支持，不僅可以使得讀取速度更快，對音視頻播放的停頓、續(xù)播、跳轉都可以完成。新的特殊內(nèi)容元素，比如 article、footer、header、nav、section，新的表單控件，比如 calendar、date、time、email、url、search，大量的元素都可以廣泛支持。支持的瀏覽器以Chrome和Firefox、Opera擴展性最好，MAC系統(tǒng)中默認瀏覽器Safari也是可以支持，默認IE以及其內(nèi)核瀏覽器并不是H5的最佳選擇。

許多原創(chuàng)性的H5都是有前端開發(fā)才能實現(xiàn)，依靠編寫代碼完成交互性是前端開發(fā)最大的特點。以麥當勞推出宣傳造勢的吳亦凡邀請用戶《一起享受嘻哈小食光》 H5為例，以雙屏或多屏的互動形式觀看視頻，用戶選擇進入觀看視頻，通過重力感應，搖晃手機看視頻的完整版。觸摸屏幕時背景會由原本黑白變?yōu)椴噬?。視頻播放過程點擊時的顏色變換是由代碼實現(xiàn)。除了多屏互動之外還增加了可觸摸的動畫互動增加H5的互動。整段視頻被分為三屏播放，把視頻轉換成圖片，再由序列幀實現(xiàn)連續(xù)播放的畫面，得以隨心所欲實現(xiàn)多屏播放效果。點擊屏幕則出現(xiàn)的色彩光圈，也是由代碼實現(xiàn)完成的。黑白效果圖為視頻導出序列幀圖畫，再用傳送到播放頁面，播放頁面由代碼處理成黑白。

還有視頻音樂合成類H5，例如《天貓幻響電音節(jié)》，進入首頁后是一個音樂節(jié)畫面，背景設計以藍紫色調(diào)為主，渲染出了一種狂歡的氣氛。彈出“想要做DJ嗎”界面，再以新手教程提示可創(chuàng)作出的15秒電音曲目，分別有“旋律”、“節(jié)奏”和“人聲”三個環(huán)節(jié)。用戶選擇并輕松實現(xiàn)創(chuàng)作，沒有代碼編寫是無法實現(xiàn)的。結尾用戶可以選擇”閉目聆聽“自己的作品，得到深度體驗。伴隨嘻哈風盛行，用戶將成果輸出并分享傳播，穿透性極強。

擁有前端支持的多媒體創(chuàng)作里，代碼編寫是建構H5互動效果的必要條件，互動方式的設計常常是別出心裁，充滿趣味。創(chuàng)作設計獨特的H5不僅傳播力強，穿透性好，帶來的口碑與參與效應也有獨特的品牌價值和情感體驗。

3 基于設計理念的創(chuàng)作

設計不僅僅對于原創(chuàng)H5至關重要，通過在線網(wǎng)站創(chuàng)作H5也需要一定的設計思維，才能創(chuàng)作出美觀的H5。豐富的視聽元素、交互動畫使得H5在近兩年迅速成為了移動互聯(lián)網(wǎng)多媒體營銷的主要形式。除了程序員之外，設計師們的加入使得目前H5多媒體創(chuàng)作呈現(xiàn)層出不窮的新穎創(chuàng)意。當下H5的主要設計類型有展示類、互動類以及傳感類。展示類H5，這一類設計主要以創(chuàng)意視頻、動畫、圖片的展示內(nèi)容為主。展示類設計的主要特點是不需要掌握代碼以及其他前端技術，許多在線平臺即可支持展示。互動類H5，這類設計以創(chuàng)作單屏滾動、手勢操作、多屏互動等方式進行互動內(nèi)容設計，需要比較靈活地掌握前端技術，編寫代碼以及優(yōu)化測試。傳感類H5的設計不同于前兩種，這類設計依靠手機的傳感器實現(xiàn)，包括陀螺儀、GPS、攝像頭、麥克風以及重力感應等，這類H5非常具有利用移動終端進行個性化傳播特點。傳感類H5需要前端開發(fā)能識別讀取用戶設備的數(shù)據(jù)，經(jīng)過綜合數(shù)據(jù)處理得到用戶個性化的H5效果，用戶再將這類個性化H5進行分享，呈現(xiàn)幾何倍的傳播效果。2017年建軍節(jié)8億人刷爆的《快看吶！這是我的軍裝照》H5便屬于此類。

人民日報聯(lián)合騰訊天天P圖推出的軍裝照H5，設計初衷是慶祝中國人民解放軍建軍90周年，未曾料想實現(xiàn)了刷屏現(xiàn)象級H5。照片合成類H5讓用戶使用微信上傳圖片接口，由微信SDK接口識別是否人臉，再反饋回用戶使用人臉配軍裝。在互動中展現(xiàn)傳遞軍民一家的情感、傳播了軍裝知識。軍裝照的項目沒有采用特別復雜的生成樣式，基本上是按照年份劃分的，分為了男女照片版，每個版本有11個生成樣式，一共22個樣式。頁面背景用JPG圖片；滾動條由代碼控制。這次的H5借助天天P圖在人臉美化方面的圖像處理技術優(yōu)勢，做出圖片美化效果。

H5的設計除了我們眼前所見的部分之外，更多的是基于整個創(chuàng)作流程中對于各個環(huán)節(jié)的思考。一個出色H5的誕生，需要經(jīng)歷創(chuàng)作前期的設計策劃、執(zhí)行開發(fā)、數(shù)據(jù)分析三個階段。首先，結合實際需求進行頭腦風暴，結合H5的效用目標來思考甚至發(fā)散思維，確立創(chuàng)意的同時結合前端技術考慮如何落地實現(xiàn)。然后進入執(zhí)行開發(fā)階段，確立符合主題的視覺風格、配樂聲效作。同時，程序員需要進行代碼編寫或者借助第三方平臺進行后臺編輯。完成編輯之后，測試上線基本標志至此H5創(chuàng)作已經(jīng)完成。但對于創(chuàng)作H5的初衷來說，數(shù)據(jù)分析是構建H5完整價值的最后也是最重要的組成部分，通過后臺數(shù)據(jù)顯示的用戶點擊數(shù)、停留時間、轉發(fā)率等等，都是構成一個完整H5的重要部分。

4 場景化、視頻化的創(chuàng)作發(fā)展趨勢

伴隨著學習成本和前端開發(fā)成本的降低，在積累了不少經(jīng)驗的基礎上，程序員、設計師、媒體人對H5的掌握日益靈活，H5創(chuàng)作已經(jīng)開始出現(xiàn)一些新趨勢。首先，場景化的趨勢是借助H5的方式與日常生活接入，最有代表性的是人們?nèi)請笸瞥鰰r政新聞性非常強的H5，如《你有一份來自總理的神秘快遞》，將收快遞這樣的生活場景用H5的方式呈現(xiàn)，用戶感受到非常親切，內(nèi)容方式接地氣也就增加了轉載和互動。場景化的進一步深化，目前有模擬AR融入場景，摳像合成技術，模擬沉浸式體驗，此類比較具有代表性的是《王小藝的朋友圈》，將真實人物錄制并摳像合成到朋友圈圖像背景上，設計互動動作，將新聞記者、新聞播報整個場景再現(xiàn)，直接帶領用戶進入場景化體驗。場景化H5的參與度得到了極大的提升，用戶愿意停留的時間更長，互動性也增強。

伴隨短視頻的興起，拍客、直播、抖音等視頻元素成為影像的新潮流，也為H5創(chuàng)作帶來了生動豐富的用戶體驗。短視頻聲光化電的炫彩效果可以彌補H5制作的短板，也可以為H5數(shù)據(jù)瘦身，提高H5的流暢性和讀取效率。盡管短視頻的互動性看似較差，但彈幕、送花等視頻互動方式一直有充足的人氣，植入H5創(chuàng)作也僅是時間問題。豎屏方式的短視頻已經(jīng)和傳統(tǒng)影像形成了最大的外觀差異，移動終端效果躍然眼前，即時性、真實感、互動性的視頻元素為H5場景化帶來新的創(chuàng)作空間。為騰訊動漫APP宣傳推出的《薛之謙史上最瘋狂的廣告》H5中下圖像拉觸下拉打開視頻播放，采用豎屏播放隱藏進度條，通過摳像合成的豎屏視頻始終保持移動終端的體驗，個人表演融合動漫角色場景融合?？旃?jié)奏的情節(jié)設計讓用戶不至于在播放完之前終止觀看，最終達到目標宣傳頁面，實現(xiàn)傳播目的。

視頻化、場景化作為H5創(chuàng)作發(fā)展的趨勢，為H5的創(chuàng)作提供了新的思路和方向。視頻內(nèi)容與場景有創(chuàng)意地融合表達，人們熟悉又倍感新鮮的方式更容易引發(fā)觀眾的共鳴和反饋，而立體化視頻與交互方式的建立是延續(xù)觀眾興趣以及提升視頻場景的關鍵，立體技術、前端代碼、藝術設計，H5多媒體創(chuàng)作的探索依然還在繼續(xù)進行。