融媒体时代动画元素在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技术会越来越完备和成熟，将有力促进中国媒介融合与动画事业的蓬勃发展。