融媒體時代動畫元素在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)記語言的重大演進，其發(fā)展和演變受到諸多因素的影響。

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

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

再次，HTML5具有優(yōu)越的跨平臺功能，HTML5的設(shè)計目的是在不同平臺和設(shè)備上一致運行，使開發(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)特性，以及為增強用戶體驗、使網(wǎng)絡(luò)更加通用和易用而做出的不懈努力。

在2014年初,H5已經(jīng)開始誕生,并被廣泛應(yīng)用在市場營銷與廣告?zhèn)鞑サ阮I(lǐng)域。H5因其圖像呈現(xiàn)與翻頁互動的簡潔方便而具備強大的宣傳能力。于是,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)在需求。動畫元素同時具備高可讀性，更容易為受眾所接受,從而增強了動畫元素的信息傳遞力、影響力。而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)點,進而激活動畫的創(chuàng)造力,并作為新媒介融合的重要助推器。

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

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

（二）塑造更強互動交互效果

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

在眾多的動畫事件中,有些動畫作品必須在互動中傳播才能提高其價值。比如在2017年兩會中,主流媒體紛紛在各大新媒體平臺上發(fā)布了H5動畫,產(chǎn)生了“兩會喊你加入群聊”“2017兩會進場券”“部長請解答”等一批優(yōu)秀的H5動畫作品。在這種動畫中,用戶不但能夠加入虛擬的動畫元素中,與媒體人、記者等進行交流,還能夠借助媒體創(chuàng)造的網(wǎng)絡(luò)平臺,與全國兩會代表委員進行交談。這些通過移動網(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ù)就是從龐雜的信息中，選取重要的有價值的信息進行加工。

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

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

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

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

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

最后，不斷收集用戶反饋并分析用戶互動，以確定需要改進的地方，優(yōu)化動畫性能，確保其快速加載且不會對頁面加載時間造成負(fù)面影響。跟蹤用戶與動畫的交互情況。利用這些數(shù)據(jù)深入了解用戶參與情況，并為進一步改進做出明智決策。緊跟動畫技術(shù)和工具的最新趨勢和進步。根據(jù)行業(yè)最佳實踐和用戶期望，不斷改進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īng)該是在動畫思路中,有邏輯、有規(guī)則的運用。

四、動畫元素在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)用也幾乎是零門檻，只要擁有智能手機，通過簡單快捷的學(xué)習(xí)，便能夠在朋友圈中閱讀和轉(zhuǎn)發(fā)H5動畫。

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

三是互動性較強,貼近新興傳媒的特點。互動性是新興媒介的主要特點,在媒介融合進程中,新的傳播方式也需要運用“互動性”這一互聯(lián)網(wǎng)思想。在H5動畫中,宣傳鏈條中的各個主體都能夠輕松進行交互,從而大幅增強了宣傳效應(yīng),在傳播者、傳播對象以及動畫的主題人之間,構(gòu)筑起信息溝通的重要橋梁。也正是如此,H5才會引起廣泛的關(guān)注。毋庸置疑,在未來的發(fā)展趨勢中,H5將更加提升與動畫的交互性,從而進一步增強動畫元素的傳遞力、影響力與引導(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ù)雜的動畫。劇情單純的動畫往往能夠很方便通過視頻或圖像進行傳播，而劇情復(fù)雜的動畫則往往無法利用文本、圖像和視頻表達,這時就可以利用H5技術(shù)將復(fù)雜的內(nèi)容簡單化、形象化。而隨著H5技術(shù)的廣泛應(yīng)用，這也將是一種巨大趨勢。

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

五、結(jié)語

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