融媒體時代動畫元素在H5交互設計中的應用研究

許 娟 張 凱

一、H5的發展及其對動畫元素的作用

（一）H5的發展沿革

H5（Hyper Text Markup Language 5）是指HTML的第五個版本信息，作為科技蓬勃發展的最新階段產物，其另一層含義是指利用H5語言生產和制造的數字化產品。［1］H5代表了作為萬維網結構基礎的標記語言的重大演進，其發展和演變受到諸多因素的影響。

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

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

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

在2014年初,H5已經開始誕生,并被廣泛應用在市場營銷與廣告傳播等領域。H5因其圖像呈現與翻頁互動的簡潔方便而具備強大的宣傳能力。于是,H5就憑借其無需下載、即點即用的特點快速占領市場,成為公司移動宣傳、游戲宣傳和會議消息宣傳的新方法。

如今,H5正在微信與朋友圈廣泛傳播,不論是在品牌發布會、新品推廣、歷史展覽,還是展會信息、游戲、動畫元素等,都能夠發現H5的影子。它已經成為展會邀請、組織招聘、商品上架、品牌圖文宣傳等商業活動策劃和廣告傳播的首選方法。

（二）H5對動畫的技術賦能

H5通過引入新的特性和技術，使得在網頁中創建、控制和展示動畫變得更加簡單、靈活和高效，其對動畫的影響突出體現在網頁和移動應用開發中。

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

二、融媒體時代動畫元素在H5交互設計中的應用

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

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

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

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

三、動畫元素在H5交互設計中的應用路徑

H5技術可在可視化動畫、互動性動畫以及解讀性動畫等領域得到廣泛應用，充分發揮其技術優點,進而激活動畫的創造力,并作為新媒介融合的重要助推器。

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

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

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

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

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

（三)構建全面闡釋解讀方式

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

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

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

首先要了解想要創建的用戶體驗目標。確定希望通過動畫喚起用戶的哪些情感、行動或反應。開展用戶研究，了解目標受眾的偏好、行為以及對界面動畫的期望。

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

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

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

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

四、動畫元素在H5交互設計中的優勢與應用前景

（一）突出優勢

動畫元素在H5交互設計中已經被更多的媒體所關注,而隨著媒介融合的深入，H5也將憑借其技術優勢在動畫元素領域中發揮更大的作用。

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

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

三是互動性較強,貼近新興傳媒的特點。互動性是新興媒介的主要特點,在媒介融合進程中,新的傳播方式也需要運用“互動性”這一互聯網思想。在H5動畫中,宣傳鏈條中的各個主體都能夠輕松進行交互,從而大幅增強了宣傳效應,在傳播者、傳播對象以及動畫的主題人之間,構筑起信息溝通的重要橋梁。也正是如此,H5才會引起廣泛的關注。毋庸置疑,在未來的發展趨勢中,H5將更加提升與動畫的交互性,從而進一步增強動畫元素的傳遞力、影響力與引導力，給內容創意帶來更多的想象空間。［3］

（二）應用前景

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

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

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

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

五、結語

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