融媒體時代動畫元素在H5交互設(shè)計中的應(yīng)用研究

許 娟 張 凱

一、H5的發(fā)展及其對動畫元素的作用

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

H5（Hyper Text Markup Language 5）是指HTML的第五個版本信息，作為科技蓬勃發(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è)計初衷是解決HTML早期版本的局限性，特別是在處理音頻、視頻和交互式圖形等多媒體元素時，無需依賴Flash等第三方插件。HTML5引入了新的語義元素，允許開發(fā)人員更準(zhǔn)確地描述網(wǎng)頁結(jié)構(gòu)。這為使用輔助技術(shù)的用戶提高了可訪問性。

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

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

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

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

（二）H5對動畫的技術(shù)賦能

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

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

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

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

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

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

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

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

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

（一）書寫新的動畫敘事方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)語

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