超媒體交互設計課程成果《尋夢遼寧》H5作品設計與制作

【摘要】超媒體交互設計課程是筆者在沈陽城市學院新聞與傳播學院開設的專業必修課，課程主要講授超媒體交互平臺Mugeda的實用方法。在授課的過程中學生表現出非常濃厚的學習興趣，無論是獨立型學習者還是依賴型學習者都能夠很好的掌握技術并設計出產品。2018年11月24日，遼寧省第二屆新媒體設計大賽中，我們的作品100%中獎出線，創學校歷史最好成績。賽后，作為指導教師，我認真反思作品設計需求和設計過程，力爭作品在未來可以更加完善，我們學生可以走向更大的賽場，擁有更高的舞臺。本文主要以一等獎作品《尋夢遼寧》為例，詳細解析作品設計全過程。

【關鍵詞】超媒體交互設計 ?H5 ?一帶一路

【中圖分類號】G434 【文獻標識碼】A 【文章編號】2095-3089（2019）18-0232-01

作品內容緊緊圍繞著遼寧的一帶一路發展，講述遼寧在一帶一路的政策下如何發展，發展現狀，和發展成果。技術采用當下熱門的H5技術，用會動的文字來帶你領略遼寧發展。同時，我們增加了作品的趣味性，在作品里面添加了一些趣味游戲。

觀看作品的方法很簡單，只要通過掃描二維碼即可觀看，也可以點擊鏈接網址http：//e.u.h5mgd.com/c/gqwp/8ryu/index.html？vt=2308420180925A直接觀看，同樣可以將作品源文件放入木疙瘩觀看。制作作品的主要技術我們采用的是H5技術，通過木疙瘩平臺制作。Mugeda（木疙瘩）平臺是專業級HTML5交互動畫內容制作云平臺，擁有業界最為強大的動畫編輯能力和最為自由的創作空間。同時，木疙瘩也是H5制作的最廣泛的平臺。 在技術層面我們采用了木疙瘩，Ps，Pr等不同的軟件。我們用Ps技術獲得我們希望的圖片，用Pr技術做出我們滿意的視頻，最后用木疙瘩將我們之前準備的素材整合。

H5是當下的一款熱門技術，最大優點就是涵括的內容可以很多，可以同時將圖片，視頻，幻燈片之類的文件放進去，而且自身和Flash有一定的交集，做出來的作品就會融圖片，視頻，動畫為一身。最大的特點就是H5技術強調了和用戶的交互性。做出來的作品和用戶會有交流，可以讓用戶在屏幕前動起來，而不是直直地看著屏幕中的內容，會給用戶留下深刻的印象，也可以讓用戶更好的了解作者想要表達的意圖。以作者期望的形態留在觀眾的心中。

我們本次就是采用木疙瘩軟件，以H5的形式，來表現遼寧一帶一路的發展，介紹遼寧一帶一路概況。根據一帶一路的內容，設計多款小游戲，用游戲的方式增加交互性和趣味性。用觸發動畫的設計，宣傳遼寧省各城市的發展，特產，美景等。用靈活的動畫技術進行遼寧一帶一路的講解。增加了抽簽測試，匹配適合“你”的遼寧城市，極大的激發了受眾的興趣，利于增加傳播。此作品把交互性放在第一位，在H5的創作中強調與受眾互動的重點。用生動有趣的方式進行創作。研究了每一個城市的特點，制作了多款H5游戲，對H5動畫的要求難度要求高。并利用Pr技術進行遼寧省14個城市的快閃視頻制作。增加了抽簽測試，匹配適合“你”的遼寧城市，雖極大增加了創作的難度，卻也增加了受眾的感興趣程度，激發二次傳播的機會。 我們將作品內容分為三小節，第一小節介紹一帶一路和遼寧的關系，第二小節介紹了遼寧在一帶一路的政策下發展的政策和方針，詳細介紹了在一帶一路的發展政策下，遼寧的各方面發展，包括工業，農業。和這些方面在一帶一路的政策下，如何飛快的發展，發展成果如何。我們還設計關于遼寧的知識問答游戲，用游戲的方式來加深讀者對遼寧的理解，更生動地展示出遼寧在一代一路政策下遼寧的發展迅速。第三小節我們為了加深觀眾對我們作品的印象，我們結合游戲對觀眾進行考驗，最后也利用一個小游戲來結尾，滿足觀眾的參與心理。

為了避免枯燥和視覺疲勞，我們將視頻，圖片，文字，游戲等各種形式穿插制作。為了保持效果，我們將游戲做成不同的形式，每一個游戲都是一種新的體驗，給讀者產生一種想要讀下去的欲望。為了畫面美觀，我們整體的顏色為綠色，文字量也并不是很大，減少了文章帶來的枯燥感，安插的圖片也多數為與綠色對比比較強烈的顏色，來讓圖片顯得更加顯眼。

超媒體交互設計在網絡與新媒體專業開設以來，學生的學習熱情高漲、有越來越多的優秀作品產生，未來我們希望學生可以接觸更多的超媒體交互設計技術、多參加大賽提升技能，爭取設計出更多更優秀的作品。

參考文獻：

[1]楊靜.基于用戶情感體驗的交互動畫界面設計[J].濱州學院學報. 2017（06）

作者簡介：

吳欣怡，沈陽城市學院網絡與新媒體專業講師，主要研究方向：H5設計與開發、網站建設、Flash動畫設計、微課設計與制作、網絡課程與虛擬現實技術。