許 娟 張 凱

一、H5的發(fā)展及其對(duì)動(dòng)畫元素的作用

（一）H5的發(fā)展沿革

H5（Hyper Text Markup Language 5）是指HTML的第五個(gè)版本信息，作為科技蓬勃發(fā)展的最新階段產(chǎn)物，其另一層含義是指利用H5語言生產(chǎn)和制造的數(shù)字化產(chǎn)品。［1］H5代表了作為萬維網(wǎng)結(jié)構(gòu)基礎(chǔ)的標(biāo)記語言的重大演進(jìn)，其發(fā)展和演變受到諸多因素的影響。

首先，HTML5的發(fā)展需要更豐富的多媒體支持。HTML5的設(shè)計(jì)初衷是解決HTML早期版本的局限性，特別是在處理音頻、視頻和交互式圖形等多媒體元素時(shí)，無需依賴Flash等第三方插件。HTML5引入了新的語義元素，允許開發(fā)人員更準(zhǔn)確地描述網(wǎng)頁(yè)結(jié)構(gòu)。這為使用輔助技術(shù)的用戶提高了可訪問性。

其次，隨著智能手機(jī)和平板電腦的興起，HTML5通過提供響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)功能，旨在改善移動(dòng)設(shè)備的使用體驗(yàn)，規(guī)范網(wǎng)頁(yè)瀏覽器行為，從而在不同尺寸的屏幕上實(shí)現(xiàn)無損性能，確保用戶在任意設(shè)備上獲得一致的體驗(yàn)。

再次，HTML5具有優(yōu)越的跨平臺(tái)功能，HTML5的設(shè)計(jì)目的是在不同平臺(tái)和設(shè)備上一致運(yùn)行，使開發(fā)人員更容易為廣大受眾創(chuàng)建應(yīng)用程序和內(nèi)容。HTML5引入了Web-Sockets和WebRTC等功能，可直接在瀏覽器中實(shí)現(xiàn)實(shí)時(shí)通信和協(xié)作。HTML5的發(fā)展為創(chuàng)建現(xiàn)代化、交互式和多媒體豐富的網(wǎng)絡(luò)應(yīng)用程序提供了一個(gè)全面且功能豐富的平臺(tái)，從而改變了網(wǎng)絡(luò)開發(fā)。HTML5的不斷發(fā)展和更新反映了網(wǎng)絡(luò)的動(dòng)態(tài)特性，以及為增強(qiáng)用戶體驗(yàn)、使網(wǎng)絡(luò)更加通用和易用而做出的不懈努力。

在2014年初,H5已經(jīng)開始誕生,并被廣泛應(yīng)用在市場(chǎng)營(yíng)銷與廣告?zhèn)鞑サ阮I(lǐng)域。H5因其圖像呈現(xiàn)與翻頁(yè)互動(dòng)的簡(jiǎn)潔方便而具備強(qiáng)大的宣傳能力。于是,H5就憑借其無需下載、即點(diǎn)即用的特點(diǎn)快速占領(lǐng)市場(chǎng),成為公司移動(dòng)宣傳、游戲宣傳和會(huì)議消息宣傳的新方法。

如今,H5正在微信與朋友圈廣泛傳播,不論是在品牌發(fā)布會(huì)、新品推廣、歷史展覽,還是展會(huì)信息、游戲、動(dòng)畫元素等,都能夠發(fā)現(xiàn)H5的影子。它已經(jīng)成為展會(huì)邀請(qǐng)、組織招聘、商品上架、品牌圖文宣傳等商業(yè)活動(dòng)策劃和廣告?zhèn)鞑サ氖走x方法。

（二）H5對(duì)動(dòng)畫的技術(shù)賦能

H5通過引入新的特性和技術(shù)，使得在網(wǎng)頁(yè)中創(chuàng)建、控制和展示動(dòng)畫變得更加簡(jiǎn)單、靈活和高效，其對(duì)動(dòng)畫的影響突出體現(xiàn)在網(wǎng)頁(yè)和移動(dòng)應(yīng)用開發(fā)中。

由此可見，H5為開發(fā)者提供了多種方式來實(shí)現(xiàn)動(dòng)畫效果，從簡(jiǎn)單的過渡到復(fù)雜的繪圖和動(dòng)畫序列均提供了多樣、充分的技術(shù)支持和保障，這些特性使得網(wǎng)頁(yè)和移動(dòng)應(yīng)用能夠呈現(xiàn)出更豐富、更吸引人的動(dòng)畫體驗(yàn)。

二、融媒體時(shí)代動(dòng)畫元素在H5交互設(shè)計(jì)中的應(yīng)用

第一,推動(dòng)動(dòng)畫元素模式的多樣化。傳統(tǒng)動(dòng)畫元素從其表現(xiàn)形式出發(fā),通常由文本、圖像、視頻等元素所組成,并借助報(bào)紙、電視節(jié)目以及互聯(lián)網(wǎng)頁(yè)面展示。由于移動(dòng)網(wǎng)絡(luò)和傳播技術(shù)的迅速發(fā)展,傳統(tǒng)新聞報(bào)道模式有時(shí)和新媒介平臺(tái)之間產(chǎn)生了間隔,受眾也在新媒介環(huán)境下逐步形成了新的閱讀習(xí)慣,但傳統(tǒng)新聞報(bào)道方式已無法充分滿足新媒介環(huán)境下的新受眾閱讀習(xí)慣。而H5的誕生,為動(dòng)畫元素帶來了一個(gè)全新的發(fā)展模式,是新媒體時(shí)代動(dòng)畫元素模式多樣化的一個(gè)主要表現(xiàn)。

第二,推動(dòng)融合動(dòng)畫深入發(fā)展。新媒體的迅速發(fā)展給傳統(tǒng)媒體造成了很大沖擊，媒介融合已經(jīng)成為媒介革新和發(fā)展的必然趨勢(shì)。作為媒介融合時(shí)代的重點(diǎn)產(chǎn)業(yè)之一,融合動(dòng)畫也日益引起重視。H5的表現(xiàn)形式符合了融媒時(shí)代對(duì)動(dòng)畫元素的全新要求,它集文本、音樂、圖像、視頻、動(dòng)畫等元素為一身的動(dòng)態(tài)表現(xiàn),使得動(dòng)畫元素越來越適應(yīng)了新興媒介的閱讀模式。［2］而這種新報(bào)道模式也對(duì)于推動(dòng)融合動(dòng)畫的探索發(fā)展,產(chǎn)生了重要示范性意義。

第三,提高動(dòng)畫元素的可讀性。對(duì)于所有動(dòng)畫元素來說,可讀性一直是動(dòng)畫工作者追求的效果所在,同時(shí)也是受眾對(duì)動(dòng)畫媒體的內(nèi)在需求。動(dòng)畫元素同時(shí)具備高可讀性，更容易為受眾所接受,從而增強(qiáng)了動(dòng)畫元素的信息傳遞力、影響力。而H5的呈現(xiàn)方式多樣化,內(nèi)容簡(jiǎn)明扼要等特點(diǎn),使得動(dòng)畫元素的可讀性明顯提高,這也是融媒時(shí)代動(dòng)畫元素模式創(chuàng)新的內(nèi)在需求與趨勢(shì)。

總之，在融媒體時(shí)代，交互設(shè)計(jì)中動(dòng)畫元素的應(yīng)用在提升用戶體驗(yàn)和參與度方面發(fā)揮著至關(guān)重要的作用。動(dòng)畫已成為傳遞信息、引導(dǎo)用戶和創(chuàng)建具有視覺吸引力的界面的有力工具。H5交互設(shè)計(jì)中的動(dòng)畫元素已經(jīng)發(fā)展成為提高用戶參與度、提供反饋、引導(dǎo)導(dǎo)航、可視化數(shù)據(jù)和創(chuàng)造引人入勝的故事體驗(yàn)的有效工具。

三、動(dòng)畫元素在H5交互設(shè)計(jì)中的應(yīng)用路徑

H5技術(shù)可在可視化動(dòng)畫、互動(dòng)性動(dòng)畫以及解讀性動(dòng)畫等領(lǐng)域得到廣泛應(yīng)用，充分發(fā)揮其技術(shù)優(yōu)點(diǎn),進(jìn)而激活動(dòng)畫的創(chuàng)造力,并作為新媒介融合的重要助推器。

（一）書寫新的動(dòng)畫敘事方式

作為一個(gè)全新的內(nèi)容呈現(xiàn)方式,H5的使用在一定程度上改變了中國(guó)傳統(tǒng)動(dòng)畫片的故事敘述方式。在H5動(dòng)畫元素中,通過圖解、數(shù)據(jù)分析等形式,能夠讓動(dòng)畫更直觀、更形象、更易讀。因此,在運(yùn)用H5技術(shù)后,動(dòng)畫可以實(shí)現(xiàn)可視化、形象化的效果，從而使事件的發(fā)展成為時(shí)光軸,讓原有的“文字+圖片”方式變得更加直觀。如2015年,天津大爆炸事件爆發(fā)后,搜狐網(wǎng)的H5動(dòng)畫《津門“爆”劫》直觀地報(bào)道并反映了這一事件,詳細(xì)還原了整個(gè)爆炸的細(xì)節(jié)和發(fā)展態(tài)勢(shì)。

（二）塑造更強(qiáng)互動(dòng)交互效果

新型媒介的誕生,為媒介與受眾之間的交流帶來了更多機(jī)會(huì)。H5技術(shù)由于其具有的強(qiáng)互動(dòng)性特點(diǎn),為新媒體時(shí)代傳統(tǒng)動(dòng)畫元素的互動(dòng)性發(fā)展創(chuàng)造了巨大空間。就目前情況而言,將H5的互動(dòng)性與傳統(tǒng)動(dòng)畫元素融合進(jìn)行交互傳播,已成為互聯(lián)網(wǎng)時(shí)代創(chuàng)意設(shè)計(jì)H5動(dòng)畫的主要方向。

在眾多的動(dòng)畫事件中,有些動(dòng)畫作品必須在互動(dòng)中傳播才能提高其價(jià)值。比如在2017年兩會(huì)中,主流媒體紛紛在各大新媒體平臺(tái)上發(fā)布了H5動(dòng)畫,產(chǎn)生了“兩會(huì)喊你加入群聊”“2017兩會(huì)進(jìn)場(chǎng)券”“部長(zhǎng)請(qǐng)解答”等一批優(yōu)秀的H5動(dòng)畫作品。在這種動(dòng)畫中,用戶不但能夠加入虛擬的動(dòng)畫元素中,與媒體人、記者等進(jìn)行交流,還能夠借助媒體創(chuàng)造的網(wǎng)絡(luò)平臺(tái),與全國(guó)兩會(huì)代表委員進(jìn)行交談。這些通過移動(dòng)網(wǎng)絡(luò)創(chuàng)作的交互式動(dòng)畫元素,也充分體現(xiàn)了融合發(fā)展的趨勢(shì)。

（三)構(gòu)建全面闡釋解讀方式

互聯(lián)網(wǎng)在提供海量資訊的同時(shí)，也使得各類資訊泥沙俱下。一起動(dòng)畫事故出現(xiàn)后,網(wǎng)絡(luò)上就會(huì)涌現(xiàn)出各類信息,而過剩的信息又壓倒了真實(shí)的信息，讓網(wǎng)民產(chǎn)生了閱讀疲憊。這時(shí)，動(dòng)畫工作人員的另一項(xiàng)主要任務(wù)就是從龐雜的信息中，選取重要的有價(jià)值的信息進(jìn)行加工。

當(dāng)突然出現(xiàn)的事物較為復(fù)雜,僅僅使用漢字和語句無法清楚直觀解釋時(shí),就需要使用適當(dāng)?shù)姆椒ㄟM(jìn)行解釋和宣傳。在使用H5報(bào)道時(shí),可以重點(diǎn)使用圖片,使靜態(tài)圖片產(chǎn)生“推”“拉”“搖”“移”的視頻鏡頭效應(yīng)。將圖像按時(shí)間先后順序呈現(xiàn)動(dòng)畫事件過程,如此即可建立動(dòng)畫綜述;結(jié)合數(shù)據(jù)、圖表等形式有助于說明事情的前因后果、來龍去脈,從而形成深入報(bào)道;根據(jù)事件之間的相互關(guān)聯(lián),對(duì)數(shù)據(jù)和圖表進(jìn)行加工,就可以產(chǎn)生動(dòng)畫故事;將有動(dòng)畫點(diǎn)和有沖擊力的照片和視頻等挑選出來,還能夠達(dá)到軟化動(dòng)畫的功效。

動(dòng)畫元素在H5交互設(shè)計(jì)中的應(yīng)用路徑涉及將動(dòng)畫無縫集成到用戶界面中的系統(tǒng)方法，以提高可用性、參與度和整體用戶體驗(yàn)。

首先要了解想要?jiǎng)?chuàng)建的用戶體驗(yàn)?zāi)繕?biāo)。確定希望通過動(dòng)畫喚起用戶的哪些情感、行動(dòng)或反應(yīng)。開展用戶研究，了解目標(biāo)受眾的偏好、行為以及對(duì)界面動(dòng)畫的期望。

其次，分析動(dòng)畫如何解決用戶痛點(diǎn)或增強(qiáng)用戶互動(dòng)，明確定義每個(gè)動(dòng)畫的目的，確定動(dòng)畫是為了提供反饋、引導(dǎo)導(dǎo)航、傳遞信息，還是僅僅為了增加美感，確定界面中的關(guān)鍵交互點(diǎn)。在這些交互點(diǎn)上，動(dòng)畫可以產(chǎn)生重大影響。根據(jù)確定的交互點(diǎn)和目標(biāo)選擇合適的動(dòng)畫類型。

再次，使用支持動(dòng)畫的原型工具來展示界面的行為方式以及動(dòng)畫如何增強(qiáng)交互。與設(shè)計(jì)師和開發(fā)人員合作，確保動(dòng)畫在技術(shù)上可行，符合設(shè)計(jì)理念，并能在不同設(shè)備和平臺(tái)上順利實(shí)施。與開發(fā)人員密切合作，在H5環(huán)境中實(shí)施動(dòng)畫。進(jìn)行嚴(yán)格的測(cè)試，確保動(dòng)畫按預(yù)期運(yùn)行，并在不造成任何干擾的情況下增強(qiáng)用戶體驗(yàn)。

最后，不斷收集用戶反饋并分析用戶互動(dòng)，以確定需要改進(jìn)的地方，優(yōu)化動(dòng)畫性能，確保其快速加載且不會(huì)對(duì)頁(yè)面加載時(shí)間造成負(fù)面影響。跟蹤用戶與動(dòng)畫的交互情況。利用這些數(shù)據(jù)深入了解用戶參與情況，并為進(jìn)一步改進(jìn)做出明智決策。緊跟動(dòng)畫技術(shù)和工具的最新趨勢(shì)和進(jìn)步。根據(jù)行業(yè)最佳實(shí)踐和用戶期望，不斷改進(jìn)H5中的動(dòng)畫制作方法。

遵循這一應(yīng)用路徑，設(shè)計(jì)人員和開發(fā)人員可以在H5交互設(shè)計(jì)中有效融入動(dòng)畫元素，從而創(chuàng)建引人入勝、直觀且具有視覺吸引力的網(wǎng)頁(yè)界面。值得注意的是，在使用H5解讀動(dòng)畫內(nèi)容時(shí),必須構(gòu)建邏輯架構(gòu),設(shè)計(jì)好結(jié)構(gòu)脈絡(luò),提煉出具體內(nèi)容,再輔之以圖文、動(dòng)效等技術(shù)手段。因此,圖片的運(yùn)用應(yīng)該是在動(dòng)畫思路中,有邏輯、有規(guī)則的運(yùn)用。

四、動(dòng)畫元素在H5交互設(shè)計(jì)中的優(yōu)勢(shì)與應(yīng)用前景

（一）突出優(yōu)勢(shì)

動(dòng)畫元素在H5交互設(shè)計(jì)中已經(jīng)被更多的媒體所關(guān)注,而隨著媒介融合的深入，H5也將憑借其技術(shù)優(yōu)勢(shì)在動(dòng)畫元素領(lǐng)域中發(fā)揮更大的作用。

一是應(yīng)用門檻較低，符合了大部分使用者的要求。和客戶端、網(wǎng)頁(yè)相比,H5的應(yīng)用門檻相對(duì)較低。一方面,對(duì)于媒體人來說,H5的開發(fā)成本相對(duì)低廉；另一方面,對(duì)于使用者來說，H5的應(yīng)用也幾乎是零門檻，只要擁有智能手機(jī)，通過簡(jiǎn)單快捷的學(xué)習(xí)，便能夠在朋友圈中閱讀和轉(zhuǎn)發(fā)H5動(dòng)畫。

二是融合性強(qiáng),能夠完全做到無障礙跨平臺(tái)傳輸。媒介融合需要促進(jìn)傳統(tǒng)媒體與新媒體在內(nèi)容、渠道、平臺(tái)、運(yùn)營(yíng)與管理等方面的深入融合。H5在平臺(tái)融合方面也有著其獨(dú)特性。H5能夠融入各種形態(tài)的藝術(shù)表現(xiàn)形式并且嵌入到各種形態(tài)的新媒體平臺(tái),可以輕松進(jìn)行跨平臺(tái)的傳播活動(dòng)。

三是互動(dòng)性較強(qiáng),貼近新興傳媒的特點(diǎn)?；?dòng)性是新興媒介的主要特點(diǎn),在媒介融合進(jìn)程中,新的傳播方式也需要運(yùn)用“互動(dòng)性”這一互聯(lián)網(wǎng)思想。在H5動(dòng)畫中,宣傳鏈條中的各個(gè)主體都能夠輕松進(jìn)行交互,從而大幅增強(qiáng)了宣傳效應(yīng),在傳播者、傳播對(duì)象以及動(dòng)畫的主題人之間,構(gòu)筑起信息溝通的重要橋梁。也正是如此,H5才會(huì)引起廣泛的關(guān)注。毋庸置疑,在未來的發(fā)展趨勢(shì)中,H5將更加提升與動(dòng)畫的交互性,從而進(jìn)一步增強(qiáng)動(dòng)畫元素的傳遞力、影響力與引導(dǎo)力，給內(nèi)容創(chuàng)意帶來更多的想象空間。［3］

（二）應(yīng)用前景

動(dòng)畫元素在H5互動(dòng)設(shè)計(jì)中有著廣闊的使用前景，尤其是在類型動(dòng)畫中,H5將被更多地應(yīng)用。

一是事實(shí)鮮明的動(dòng)畫。動(dòng)畫元素的核心任務(wù)就是報(bào)道事實(shí)。新媒體環(huán)境下,不同種類的動(dòng)畫事實(shí)要選擇不同的動(dòng)畫形式。事實(shí)清楚的動(dòng)畫更適用H5新聞,由于H5動(dòng)畫大多通過移動(dòng)網(wǎng)絡(luò)傳播,其表現(xiàn)形式也更加直觀。所以,隨著動(dòng)畫元素模式的不斷豐富、發(fā)展與細(xì)化,一些事實(shí)清楚、脈絡(luò)清晰的動(dòng)畫也會(huì)更多地通過H5實(shí)現(xiàn)。

二是劇情復(fù)雜的動(dòng)畫。劇情單純的動(dòng)畫往往能夠很方便通過視頻或圖像進(jìn)行傳播，而劇情復(fù)雜的動(dòng)畫則往往無法利用文本、圖像和視頻表達(dá),這時(shí)就可以利用H5技術(shù)將復(fù)雜的內(nèi)容簡(jiǎn)單化、形象化。而隨著H5技術(shù)的廣泛應(yīng)用，這也將是一種巨大趨勢(shì)。

三是現(xiàn)場(chǎng)感強(qiáng)烈的動(dòng)畫。H5動(dòng)畫的一個(gè)主要特征,就是其直接的藝術(shù)表現(xiàn)形式。這一特性也使H5動(dòng)畫更多地運(yùn)用到現(xiàn)場(chǎng)感較強(qiáng)烈的新聞報(bào)道中。一些帶有震撼效果的,又或者對(duì)審美效果有較高要求的動(dòng)畫場(chǎng)面,都可通過H5技術(shù)來表達(dá),使動(dòng)畫元素更為生動(dòng)。

五、結(jié)語

融媒體網(wǎng)絡(luò)時(shí)代,各類新技術(shù)層出不窮,而H5就是其中的一個(gè)重要部分，對(duì)動(dòng)畫元素的有效應(yīng)用也有很大的驅(qū)動(dòng)效果。在未來，H5技術(shù)會(huì)越來越完備和成熟，將有力促進(jìn)中國(guó)媒介融合與動(dòng)畫事業(yè)的蓬勃發(fā)展。