H5交互在防震減災科普宣傳中的應用研究

程寶玉 朱夢玲 吳小勝 舒鵬飛

摘 ?要：新媒體環(huán)境下，融合H5交互技術(shù)進行防震減災科普宣傳，具有個性化、趣味性和豐富性的特點，信息傳遞方式也真正實現(xiàn)由單向傳播轉(zhuǎn)變?yōu)榛觽鞑ィ瑫r借助微信平臺龐大的用戶基礎(chǔ)，達到普及面廣、效率高的科普宣傳效果。文章研究了H5交互技術(shù)在防震減災科普宣傳中的應用方法，分析了H5交互作品借助微信平臺進行科普宣傳的效果，并將其與傳統(tǒng)媒體科普教育方式進行比較，總結(jié)了運用H5交互進行防震減災科普宣傳能夠有效增強公眾防震減災意識，提升自然災害預警能力與自我保護能力。

關(guān)鍵詞：H5交互技術(shù)；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 ?引 ?言

自然災害發(fā)生時，只有做好自救措施，才能撐起安全的保護傘。人的生命在各種自然災害面前是脆弱的，所以平時更要有所防范，未雨綢繆，做好準備。地震作為一種突發(fā)性的自然災害，嚴重威脅著社會與經(jīng)濟的穩(wěn)定發(fā)展，嚴重的情況下還會造成大量人員的傷亡，面對自然災害的挑戰(zhàn)，科普宣傳已經(jīng)成為一項緊迫任務，需要全社會共同參與，同擔責任為創(chuàng)造和諧、平衡、安全、穩(wěn)定的生存環(huán)境奉獻自己的力量。傳統(tǒng)媒體采用圖文結(jié)合的紙質(zhì)宣傳方式正在逐漸淡出我們的視野，過多的文字讓我們感覺枯燥乏味；而5G、大數(shù)據(jù)人工智能、虛擬現(xiàn)實、交互應用等技術(shù)的不斷發(fā)展，也給傳統(tǒng)的防震減災科普宣傳方式帶來一定的沖擊與挑戰(zhàn)；各種實踐也證明只有充分運用順應時代發(fā)展潮流的信息載體，傳播大眾喜聞樂見的內(nèi)容和形式，并不失時機地滲透到各種社會活動與交流之中，才能起到更加深刻有意義的教育作用，被大眾所接受[1]。

1 ?防震減災科普宣傳的現(xiàn)狀分析

傳統(tǒng)的防震減災科普一般都是采用廣播、報紙、電視等媒介進行科普宣傳教育，但是由于其內(nèi)容的專業(yè)復雜性以及枯燥無味性導致許多受眾持排斥態(tài)度，且以科普書籍、科普雜志為代表的作品內(nèi)容形式單一、傳播面比較狹窄。而事實證明，只有受眾自覺主動接收的知識才能更加容易被受眾吸收、接納、傳播，所以如何使枯燥無味的科普知識變得生動有趣又容易被接受成為許多專業(yè)人士關(guān)注的問題。

近年來，防震減災教育愈來愈受到重視，也逐漸成為社區(qū)科普教育中重要的一部分，一些社區(qū)街道、企事業(yè)單位和社會公益組織時常會組織開展各類防震減災應急演練活動，幫助大眾掌握各種地震發(fā)生時的逃生方法與技巧，爭取當災害真正來臨時盡可能保證人身安全和減少經(jīng)濟損失。雖然實地演習在一定范圍內(nèi)起到了較好的普及作用，但是依舊存在實地演習成本高、參加演習人數(shù)有限、演練形式受客觀條件限制等較多不足[2]。

2 ?基于H5交互技術(shù)的防震減災科普教育

2.1 ?H5交互技術(shù)特點

H5，即HTML5，是構(gòu)建Web內(nèi)容的一種語言描述方式，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)視頻、音頻、圖像、動畫內(nèi)容以及與設備交互的一種語言方式，被認為是互聯(lián)網(wǎng)的核心技術(shù)之一[3]。H5技術(shù)自發(fā)布以來贏得了眾多網(wǎng)民的喜愛，成為當下非常有效的新媒體呈現(xiàn)形式和推廣手段，其推廣火爆的原因離不開微信這一擁有龐大用戶基數(shù)的平臺。H5最大的優(yōu)勢在于利用基于重力感應、人臉識別、地理位置、多屏互動等形式豐富的交互元素吸引用戶使用，從而把作品內(nèi)容傳播出去。H5另一個優(yōu)勢就是跨平臺，一方面開發(fā)者無需做過多的平臺適配工作，另一方面終端用戶無需下載，只要使用微信“掃一掃”功能掃描H5作品的二維碼或者在瀏覽器中打開H5作品的網(wǎng)址鏈接即可隨時隨地參與互動。

2.2 ?基于H5交互技術(shù)的防震減災科普教育的特點

對于防震減災科普教育來說，基于微信H5的自然災害模擬應急演練交互作品的運用，不僅是針對實地演練不足之處所采用的較好的技術(shù)補充手段，而且其制作便捷，推廣效果好，能達到有效普及的目的。

1）H5支持呈現(xiàn)文本、圖像、視頻、動畫、交互等各種形式的媒體內(nèi)容，頁面設計簡約精致、內(nèi)容短小精悍，將枯燥無味的科普知識利用動畫、小游戲等形式呈現(xiàn)出來，不僅提升了受眾的學習興趣，達到“寓教于樂”的目的；而且使用戶通過自然災害常識的學習與設身處地的逃脫防護演練，在視覺、聽覺、觸覺等多種感官上產(chǎn)生強烈的共鳴，不斷拓寬視野，增強自我保護意識，提高災害應急的能力，傳播效果逐漸增強，在一定程度上也增加了平臺與用戶之間的黏性。

2）信息技術(shù)支持下的教育、學習不再表現(xiàn)為單一的行為，而是多元變化的情境創(chuàng)設過程，每個學習者都是教育活動的主體，自發(fā)主動地參與教學活動，構(gòu)建豐富多元的學習情境，探索未知的學習領(lǐng)域，喚起好奇心和樂趣，激發(fā)靈感和想象力[4]。將H5技術(shù)與防震減災科普教育相結(jié)合，利用這種新型傳播方式傳播科普文化，不僅可以讓用戶利用碎片化學習的時間，通過一點一滴信息獲取、知識積累和交流思考，達到熟悉情況、擴充知識、提高技能，走在時代前沿的目的；而且可以利用可循環(huán)演習的特點，節(jié)省人力、物力、財力，增加互動趣味性。

3 ?防震減災H5交互動畫創(chuàng)作

通過H5交互動畫創(chuàng)作將自然災害防護知識與模擬演練相結(jié)合，幫助受眾掌握災難發(fā)生時的緊急救援知識、緊急應對本領(lǐng)、自救互救能力等，傳遞科學文化，提高自我保護意識。

3.1 ?創(chuàng)作思路

1）收集、整理防震減災相關(guān)資料和素材，包括各種自然災害的形成、特征、主要影響等，以及遇到自然災害時，人們需要掌握的緊急救援知識、緊急應對本領(lǐng)、自救互救能力等，并根據(jù)需要繪制相關(guān)圖像素材。

2）制作H5交互動畫，首先將各種自然災害的形成、特征、主要影響等知識內(nèi)容以“科普小課堂”的形式生動形象地呈現(xiàn)出來，然后通過設置測試題提供用戶自主檢測掌握知識的程度。

3）設計H5交互小游戲，模擬自然災害應急演練，演示災害發(fā)生時的一些征兆，然后允許用戶通過選擇災害應急方式、逃脫路線等系列操作，完成模擬災害應急演練。

4）系統(tǒng)化所有H5作品，主要包括兩個方面：一是以自然災害的類別為主線，以每種災害的科普和模擬應急演練為從線，編制作品的目錄結(jié)構(gòu)，設計作品的主題界面，形成樹狀結(jié)構(gòu)的系統(tǒng)應用，如圖1所示。二是將所有自然災害模擬應急演練的作品按照游戲難度的順序，從易到難構(gòu)成完整的線性結(jié)構(gòu)游戲關(guān)卡，并設計手游APP程序外殼，提供用戶系統(tǒng)、完整的應用體驗。

3.2 ?主要創(chuàng)作步驟

3.2.1 ?總體設計

作品先通過豐富多彩的動畫展示，向用戶科普自然災害基本知識，再通過小游戲的方式邀請用戶參與挑戰(zhàn)，既可以激發(fā)用戶的學習興趣，更好地達到寓教于樂的目的[5，6]，又可以順應時代的發(fā)展，利用新興技術(shù)傳遞科學文化知識，助力科學文化的繁榮發(fā)展。

3.2.2 ?動畫設計

H5互動作品中的動畫具有兩個作用，一是給予用戶生動活潑的直觀感受，從而吸引用戶的興趣和關(guān)注；二是與交互相結(jié)合，構(gòu)成H5小游戲中的動畫表現(xiàn)形式。

1）預置動畫設計。“Mugeda”H5交互動畫設計平臺提供“預置動畫”功能，包括“緩入”“移入”等數(shù)十種類型的動畫效果，操作便捷。預置動畫是“Mugeda”針對精細程度和交互要求不高的二維動畫設計需求，在平臺內(nèi)部框架中預置的動畫效果，這些動畫效果也可使用關(guān)鍵幀動畫來實現(xiàn)，但二者不可同時出現(xiàn)。首先選中舞臺上的“卡通人物”素材，然后點擊其右邊的“添加預置動畫”按鈕，如圖2所

示；然后，在彈出的“添加預置動畫”設置面板中選擇“進入”“浮入”，表示該素材進入舞臺時的動畫呈現(xiàn)形式為“浮入”，如圖3所示；最后，需要注意的是，當為同一個關(guān)鍵幀中的不同素材使用預置動畫時，這幾個素材的動畫是同時出現(xiàn)的，所以，對于這種情況要調(diào)整各個預置動畫的出現(xiàn)時間和持續(xù)時長，使其有先后順序，設置方法如圖4所示。

2）自定義動畫設計。“Mugeda”H5交互動畫設計平臺針對二維動畫更多復雜的設計需要，集成了“關(guān)鍵幀動畫”“路徑動畫”“進度動畫”“變形動畫”等功能分類非常清晰的交互動畫設計功能，通過這些自定義動畫設計，可以實現(xiàn)效果豐富、交互性強的動畫效果。

此外，“Mugeda”還提供了元件動畫功能，元件作為一個整體在舞臺上展現(xiàn)的同時，其內(nèi)部的動畫也可以同時播放。并且每一個元件都是一個獨立的完整動畫，在舞臺上可以重復使用。

以作品中人物角色下樓梯元件的關(guān)鍵幀動畫設計為例，如圖5所示，首先在時間軸人物角色動畫層的第一幀插入人物角色素材，此時第一幀的標識由白色圓點變成黑色圓點；然后在第一幀上點擊鼠標右鍵，在彈出菜單中選擇“插入關(guān)鍵幀動畫”，此時以時間軸所有層中最多的幀數(shù)為參照，在人物角色動畫層的最后一幀自動插入一個關(guān)鍵幀，該幀以紅色菱形標識；接著使用鼠標將最后一個關(guān)鍵幀拖到第五幀；最后定位到第五幀，在舞臺上調(diào)整人物角色的位置，直到兩個關(guān)鍵幀之間人物角色的運動自然流暢。按同樣的方法設置后續(xù)的關(guān)鍵幀及其相應人物角色的舞臺位置，直到人物角色從樓梯自上而下一級級走下來，完成整個關(guān)鍵幀動畫的設計。

3.2.3 ?場景交互設計

場景交互設計模擬各種災害現(xiàn)場，通過人機交互，使用戶以第一人稱的視角融入災害場景中學習自救互救知識等。系統(tǒng)選擇多種具有代表性地理環(huán)境的現(xiàn)場，主要包括廚房、臥室、電影院、高樓、電梯等場景。用戶以第一人稱視角融入災害場景時，必須在系統(tǒng)提供的多種自救互救方案或逃生路線中，每次都能選擇正確的選項，才能“安全逃脫”。

以地震災害模擬演練為例，設計災害應急演練主要場景交互設計步驟如下：

1）以教室為場景、黑板為背景，使用動畫展示地震逃生小技巧，用戶可通過交互操作反復查看該內(nèi)容。

2）教室場景發(fā)生震動，用戶以第一人稱視角融入場景，在系統(tǒng)提供的多條路線中，用戶必須每次都能選擇正確的逃生路線，才能“安全逃脫”。用戶“逃生”過程中，系統(tǒng)結(jié)合房間、樓梯、家具、道路等場景不同特征，設置相應障礙或道具，干擾或輔助用戶進行選擇，從而使用戶最終掌握科學、有效的地震逃生能力。

交互設計中為舞臺或元件中的一個素材添加交互時，首先選中舞臺上素材，然后點擊其右邊的“添加/編輯行為”按鈕，如圖6所示；然后，在彈出的

“編輯行為”設置面板的左邊“行為”列表中選擇需要的交互類型，如圖7所示；最后，在彈出的交互“參數(shù)”設置面板中根據(jù)需要設置該交互的系列參數(shù)，如圖8所示是“跳轉(zhuǎn)到幀并播放”交互類型的參數(shù)設置。

4 ?作品推廣

4.1 ?推廣方式

1）通過各種渠道對制作好的H5作品進行推廣，包括微信群、微信朋友圈發(fā)布信息，設計微信公眾號輔助推廣。在推廣的過程中不斷地發(fā)現(xiàn)作品存在的問題，結(jié)合用戶意見完成作品的修改完善工作。

2）將最終的H5展示動畫利用錄屏的方式制作演示視頻，投放于各種新媒體平臺，增加瀏覽量，提高受眾面的廣度與作品的宣傳力度，擴大影響力。

4.2 ?推廣效果

1）通過生動形象的H5場景設計、動畫設計模擬自然災害的產(chǎn)生、危害以及災害發(fā)生的現(xiàn)實場景，達到科普常識、預防預警的目的。

2）通過形式豐富的H5交互設計，提升自然災害模擬應急演練的趣味性、互動性，人們利用一部手機或一臺電腦即可方便快捷地參與，使防災減災教育的受眾更豐富，應急演練教育的實踐更全面。

3）利用微信平臺進行傳播，受眾面廣，一方面使人們增強自我保護意識，提升災害應急能力；另一方面達到增強人們應對自然災害的心理素質(zhì)、輔助調(diào)節(jié)受災群眾災后心理創(chuàng)傷恢復的目的。

5 ?結(jié) ?論

隨著時代的發(fā)展以及科技的不斷創(chuàng)新，科普宣傳方式也在不斷創(chuàng)新融合與發(fā)展，尤其是新媒體環(huán)境下利用大眾喜聞樂見的方式進行傳播，不僅在傳播范圍、傳播形式等方面優(yōu)于傳統(tǒng)科普，而且在利用效率、受眾喜愛程度、與受眾之間保持互動性等方面都得到了很大的提升。將科普內(nèi)容以圖片、文字、聲音、視頻、動畫等形式生動形象地呈現(xiàn)出來，同時結(jié)合虛擬現(xiàn)實技術(shù)、H5交互技術(shù)增強立體感，為社會公眾呈現(xiàn)出更為全面豐富、更具有深度研究價值、更加簡單易懂的信息內(nèi)容，這不僅可以大大提高科普宣傳工作的質(zhì)量與效率，而且對于新時代科技創(chuàng)新的發(fā)展也是非常有益的，也是新媒體時代科普宣傳工作快速發(fā)展的一種潮流與趨勢。

參考文獻：

[1] 衛(wèi)露媛.太原市防震減災科普宣傳現(xiàn)狀及改進對策 [J].山西地震，2021（1）：54-56.

[2] 李霞，張方浩，杜浩國，等.云南省地震局防震減災科普宣傳進社區(qū)實踐探索 [J].四川地震，2022（2）：44-47.

[3] 黃家昶.HTML5廣告設計及5G技術(shù)下未來趨勢研究 [J].傳播力研究，2019，3（30）：166-167.

[4] 李桂霞.信息技術(shù)支持下的“寓教于樂” [J].清風，2021（8）：2.

[5] 李夢媛，吳國業(yè)，林志峰，等.基于H5技術(shù)的交互課件設計與實現(xiàn) [J].無線互聯(lián)科技，2020，17（17）：92-93+113.

[6] 陳穎娣.新媒體環(huán)境下如何提升科普宣傳的有效性 [J].中國報業(yè)，2021（16）：30-31.

作者簡介：程寶玉（1999.09—），女，漢族，安徽六安人，本科，研究方向：網(wǎng)絡與新媒體；通訊作者：吳小勝（1979.10—），男，漢族，安徽池州人，高級實驗師，碩士，研究方向：新媒體技術(shù)及應用。