H5交互在防震减灾科普宣传中的应用研究

程宝玉 朱梦玲 吴小胜 舒鹏飞

摘  要：新媒体环境下，融合H5交互技术进行防震减灾科普宣传，具有个性化、趣味性和丰富性的特点，信息传递方式也真正实现由单向传播转变为互动传播，同时借助微信平台庞大的用户基础，达到普及面广、效率高的科普宣传效果。文章研究了H5交互技术在防震减灾科普宣传中的应用方法，分析了H5交互作品借助微信平台进行科普宣传的效果，并将其与传统媒体科普教育方式进行比较，总结了运用H5交互进行防震减灾科普宣传能够有效增强公众防震减灾意识，提升自然灾害预警能力与自我保护能力。

关键词：H5交互技术；Mugeda；防震减灾

中图分类号：TP39     文献标识码：A   文章编号：2096-4706（2023）14-0099-05

Research on Application of H5 Interaction in the Science Publicity of

Earthquake Prevention and Disaster Reduction

CHENG Baoyu， ZHU Mengling， WU Xiaosheng， SHU Pengfei

（Chizhou University， Chizhou  247000， China）

Abstract： This paper combines H5 technology for earthquake prevention and disaster reduction science publicity under the new media environment， which has the characteristics of personalized， interesting and rich. The mode of information transmission is truly realized from one-way communication to interactive communication. With the help of the huge user base of WeChat platform， it achieves a wide range of popularization and high efficiency of science publicity effect. This paper studies the application method of H5 interactive technology in the science publicity of earthquake prevention and disaster reduction， and analyzes the effect of H5 interactive works with the help of WeChat platform. And it compares H5 technology with traditional media science education methods， summarizes that the use of H5 interaction for science publicity in earthquake prevention and disaster reduction can effectively enhance the public awareness of earthquake prevention and disaster reduction， enhance the ability of natural disaster early warning and self-protection ability.

Keywords： H5 interactive technology; Mugeda; earthquake prevention and disaster reduction

0  引  言

自然災害发生时，只有做好自救措施，才能撑起安全的保护伞。人的生命在各种自然灾害面前是脆弱的，所以平时更要有所防范，未雨绸缪，做好准备。地震作为一种突发性的自然灾害，严重威胁着社会与经济的稳定发展，严重的情况下还会造成大量人员的伤亡，面对自然灾害的挑战，科普宣传已经成为一项紧迫任务，需要全社会共同参与，同担责任为创造和谐、平衡、安全、稳定的生存环境奉献自己的力量。传统媒体采用图文结合的纸质宣传方式正在逐渐淡出我们的视野，过多的文字让我们感觉枯燥乏味；而5G、大数据人工智能、虚拟现实、交互应用等技术的不断发展，也给传统的防震减灾科普宣传方式带来一定的冲击与挑战；各种实践也证明只有充分运用顺应时代发展潮流的信息载体，传播大众喜闻乐见的内容和形式，并不失时机地渗透到各种社会活动与交流之中，才能起到更加深刻有意义的教育作用，被大众所接受[1]。

1  防震减灾科普宣传的现状分析

传统的防震减灾科普一般都是采用广播、报纸、电视等媒介进行科普宣传教育，但是由于其内容的专业复杂性以及枯燥无味性导致许多受众持排斥态度，且以科普书籍、科普杂志为代表的作品内容形式单一、传播面比较狭窄。而事实证明，只有受众自觉主动接收的知识才能更加容易被受众吸收、接纳、传播，所以如何使枯燥无味的科普知识变得生动有趣又容易被接受成为许多专业人士关注的问题。

近年来，防震减灾教育愈来愈受到重视，也逐渐成为社区科普教育中重要的一部分，一些社区街道、企事业单位和社会公益组织时常会组织开展各类防震减灾应急演练活动，帮助大众掌握各种地震发生时的逃生方法与技巧，争取当灾害真正来临时尽可能保证人身安全和减少经济损失。虽然实地演习在一定范围内起到了较好的普及作用，但是依旧存在实地演习成本高、参加演习人数有限、演练形式受客观条件限制等较多不足[2]。

2  基于H5交互技术的防震减灾科普教育

2.1  H5交互技术特点

H5，即HTML5，是构建Web内容的一种语言描述方式，是构建以及呈现互联网视频、音频、图像、动画内容以及与设备交互的一种语言方式，被认为是互联网的核心技术之一[3]。H5技术自发布以来赢得了众多网民的喜爱，成为当下非常有效的新媒体呈现形式和推广手段，其推广火爆的原因离不开微信这一拥有庞大用户基数的平台。H5最大的优势在于利用基于重力感应、人脸识别、地理位置、多屏互动等形式丰富的交互元素吸引用户使用，从而把作品内容传播出去。H5另一个优势就是跨平台，一方面开发者无需做过多的平台适配工作，另一方面终端用户无需下载，只要使用微信“扫一扫”功能扫描H5作品的二维码或者在浏览器中打开H5作品的网址链接即可随时随地参与互动。

2.2  基于H5交互技术的防震减灾科普教育的特点

对于防震减灾科普教育来说，基于微信H5的自然灾害模拟应急演练交互作品的运用，不仅是针对实地演练不足之处所采用的较好的技术补充手段，而且其制作便捷，推广效果好，能达到有效普及的目的。

1）H5支持呈现文本、图像、视频、动画、交互等各种形式的媒体内容，页面设计简约精致、内容短小精悍，将枯燥无味的科普知识利用动画、小游戏等形式呈现出来，不仅提升了受众的学习兴趣，达到“寓教于樂”的目的；而且使用户通过自然灾害常识的学习与设身处地的逃脱防护演练，在视觉、听觉、触觉等多种感官上产生强烈的共鸣，不断拓宽视野，增强自我保护意识，提高灾害应急的能力，传播效果逐渐增强，在一定程度上也增加了平台与用户之间的黏性。

2）信息技术支持下的教育、学习不再表现为单一的行为，而是多元变化的情境创设过程，每个学习者都是教育活动的主体，自发主动地参与教学活动，构建丰富多元的学习情境，探索未知的学习领域，唤起好奇心和乐趣，激发灵感和想象力[4]。将H5技术与防震减灾科普教育相结合，利用这种新型传播方式传播科普文化，不仅可以让用户利用碎片化学习的时间，通过一点一滴信息获取、知识积累和交流思考，达到熟悉情况、扩充知识、提高技能，走在时代前沿的目的；而且可以利用可循环演习的特点，节省人力、物力、财力，增加互动趣味性。

3  防震减灾H5交互动画创作

通过H5交互动画创作将自然灾害防护知识与模拟演练相结合，帮助受众掌握灾难发生时的紧急救援知识、紧急应对本领、自救互救能力等，传递科学文化，提高自我保护意识。

3.1  创作思路

1）收集、整理防震减灾相关资料和素材，包括各种自然灾害的形成、特征、主要影响等，以及遇到自然灾害时，人们需要掌握的紧急救援知识、紧急应对本领、自救互救能力等，并根据需要绘制相关图像素材。

2）制作H5交互动画，首先将各种自然灾害的形成、特征、主要影响等知识内容以“科普小课堂”的形式生动形象地呈现出来，然后通过设置测试题提供用户自主检测掌握知识的程度。

3）设计H5交互小游戏，模拟自然灾害应急演练，演示灾害发生时的一些征兆，然后允许用户通过选择灾害应急方式、逃脱路线等系列操作，完成模拟灾害应急演练。

4）系统化所有H5作品，主要包括两个方面：一是以自然灾害的类别为主线，以每种灾害的科普和模拟应急演练为从线，编制作品的目录结构，设计作品的主题界面，形成树状结构的系统应用，如图1所示。二是将所有自然灾害模拟应急演练的作品按照游戏难度的顺序，从易到难构成完整的线性结构游戏关卡，并设计手游APP程序外壳，提供用户系统、完整的应用体验。

3.2  主要创作步骤

3.2.1  总体设计

作品先通过丰富多彩的动画展示，向用户科普自然灾害基本知识，再通过小游戏的方式邀请用户参与挑战，既可以激发用户的学习兴趣，更好地达到寓教于乐的目的[5，6]，又可以顺应时代的发展，利用新兴技术传递科学文化知识，助力科学文化的繁荣发展。

3.2.2  动画设计

H5互动作品中的动画具有两个作用，一是给予用户生动活泼的直观感受，从而吸引用户的兴趣和关注；二是与交互相结合，构成H5小游戏中的动画表现形式。

1）预置动画设计。“Mugeda”H5交互动画设计平台提供“预置动画”功能，包括“缓入”“移入”等数十种类型的动画效果，操作便捷。预置动画是“Mugeda”针对精细程度和交互要求不高的二维动画设计需求，在平台内部框架中预置的动画效果，这些动画效果也可使用关键帧动画来实现，但二者不可同时出现。首先选中舞台上的“卡通人物”素材，然后点击其右边的“添加预置动画”按钮，如图2所

示；然后，在弹出的“添加预置动画”设置面板中选择“进入”“浮入”，表示该素材进入舞台时的动画呈现形式为“浮入”，如图3所示；最后，需要注意的是，当为同一个关键帧中的不同素材使用预置动画时，这几个素材的动画是同时出现的，所以，对于这种情况要调整各个预置动画的出现时间和持续时长，使其有先后顺序，设置方法如图4所示。

2）自定义动画设计。“Mugeda”H5交互动画设计平台针对二维动画更多复杂的设计需要，集成了“关键帧动画”“路径动画”“进度动画”“变形动画”等功能分类非常清晰的交互动画设计功能，通过这些自定义动画设计，可以实现效果丰富、交互性强的动画效果。

此外，“Mugeda”还提供了元件动画功能，元件作为一个整体在舞台上展现的同时，其内部的动画也可以同时播放。并且每一个元件都是一个独立的完整动画，在舞台上可以重复使用。

以作品中人物角色下楼梯元件的关键帧动画设计为例，如图5所示，首先在时间轴人物角色动画层的第一帧插入人物角色素材，此时第一帧的标识由白色圆点变成黑色圆点；然后在第一帧上点击鼠标右键，在弹出菜单中选择“插入关键帧动画”，此时以时间轴所有层中最多的帧数为参照，在人物角色动画层的最后一帧自动插入一个关键帧，该帧以红色菱形标识；接着使用鼠标将最后一个关键帧拖到第五帧；最后定位到第五帧，在舞台上调整人物角色的位置，直到两个关键帧之间人物角色的运动自然流畅。按同样的方法设置后续的关键帧及其相应人物角色的舞台位置，直到人物角色从楼梯自上而下一级级走下来，完成整个关键帧动画的设计。

3.2.3  场景交互设计

场景交互设计模拟各种灾害现场，通过人机交互，使用户以第一人称的视角融入灾害场景中学习自救互救知识等。系统选择多种具有代表性地理环境的现场，主要包括厨房、卧室、电影院、高楼、电梯等场景。用户以第一人称视角融入灾害场景时，必须在系统提供的多种自救互救方案或逃生路线中，每次都能选择正确的选项，才能“安全逃脱”。

以地震灾害模拟演练为例，设计灾害应急演练主要场景交互设计步骤如下：

1）以教室为场景、黑板为背景，使用动画展示地震逃生小技巧，用户可通过交互操作反复查看该内容。

2）教室场景发生震动，用户以第一人称视角融入场景，在系统提供的多条路线中，用户必须每次都能选择正确的逃生路线，才能“安全逃脱”。用户“逃生”过程中，系统结合房间、楼梯、家具、道路等场景不同特征，设置相应障碍或道具，干扰或辅助用户进行选择，从而使用户最终掌握科学、有效的地震逃生能力。

交互设计中为舞台或元件中的一个素材添加交互时，首先选中舞台上素材，然后点击其右边的“添加/编辑行为”按钮，如图6所示；然后，在弹出的

“编辑行为”设置面板的左边“行为”列表中选择需要的交互类型，如图7所示；最后，在弹出的交互“参数”设置面板中根据需要设置该交互的系列参数，如图8所示是“跳转到帧并播放”交互类型的参数设置。

4  作品推广

4.1  推广方式

1）通过各种渠道对制作好的H5作品进行推广，包括微信群、微信朋友圈发布信息，设计微信公众号辅助推广。在推广的过程中不断地发现作品存在的问题，结合用户意见完成作品的修改完善工作。

2）將最终的H5展示动画利用录屏的方式制作演示视频，投放于各种新媒体平台，增加浏览量，提高受众面的广度与作品的宣传力度，扩大影响力。

4.2  推广效果

1）通过生动形象的H5场景设计、动画设计模拟自然灾害的产生、危害以及灾害发生的现实场景，达到科普常识、预防预警的目的。

2）通过形式丰富的H5交互设计，提升自然灾害模拟应急演练的趣味性、互动性，人们利用一部手机或一台电脑即可方便快捷地参与，使防灾减灾教育的受众更丰富，应急演练教育的实践更全面。

3）利用微信平台进行传播，受众面广，一方面使人们增强自我保护意识，提升灾害应急能力；另一方面达到增强人们应对自然灾害的心理素质、辅助调节受灾群众灾后心理创伤恢复的目的。

5  结  论

随着时代的发展以及科技的不断创新，科普宣传方式也在不断创新融合与发展，尤其是新媒体环境下利用大众喜闻乐见的方式进行传播，不仅在传播范围、传播形式等方面优于传统科普，而且在利用效率、受众喜爱程度、与受众之间保持互动性等方面都得到了很大的提升。将科普内容以图片、文字、声音、视频、动画等形式生动形象地呈现出来，同时结合虚拟现实技术、H5交互技术增强立体感，为社会公众呈现出更为全面丰富、更具有深度研究价值、更加简单易懂的信息内容，这不仅可以大大提高科普宣传工作的质量与效率，而且对于新时代科技创新的发展也是非常有益的，也是新媒体时代科普宣传工作快速发展的一种潮流与趋势。

参考文献：

[1] 卫露媛.太原市防震减灾科普宣传现状及改进对策 [J].山西地震，2021（1）：54-56.

[2] 李霞，张方浩，杜浩国，等.云南省地震局防震减灾科普宣传进社区实践探索 [J].四川地震，2022（2）：44-47.

[3] 黄家昶.HTML5广告设计及5G技术下未来趋势研究 [J].传播力研究，2019，3（30）：166-167.

[4] 李桂霞.信息技术支持下的“寓教于乐” [J].清风，2021（8）：2.

[5] 李梦媛，吴国业，林志峰，等.基于H5技术的交互课件设计与实现 [J].无线互联科技，2020，17（17）：92-93+113.

[6] 陈颖娣.新媒体环境下如何提升科普宣传的有效性 [J].中国报业，2021（16）：30-31.

作者简介：程宝玉（1999.09—），女，汉族，安徽六安人，本科，研究方向：网络与新媒体；通讯作者：吴小胜（1979.10—），男，汉族，安徽池州人，高级实验师，硕士，研究方向：新媒体技术及应用。