超媒體交互設(shè)計(jì)課程成果《尋夢遼寧》H5作品設(shè)計(jì)與制作

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

【關(guān)鍵詞】超媒體交互設(shè)計(jì) ?H5 ?一帶一路

【中圖分類號】G434 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號】2095-3089（2019）18-0232-01

作品內(nèi)容緊緊圍繞著遼寧的一帶一路發(fā)展，講述遼寧在一帶一路的政策下如何發(fā)展，發(fā)展現(xiàn)狀，和發(fā)展成果。技術(shù)采用當(dāng)下熱門的H5技術(shù)，用會(huì)動(dòng)的文字來帶你領(lǐng)略遼寧發(fā)展。同時(shí)，我們增加了作品的趣味性，在作品里面添加了一些趣味游戲。

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

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

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

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

超媒體交互設(shè)計(jì)在網(wǎng)絡(luò)與新媒體專業(yè)開設(shè)以來，學(xué)生的學(xué)習(xí)熱情高漲、有越來越多的優(yōu)秀作品產(chǎn)生，未來我們希望學(xué)生可以接觸更多的超媒體交互設(shè)計(jì)技術(shù)、多參加大賽提升技能，爭取設(shè)計(jì)出更多更優(yōu)秀的作品。

參考文獻(xiàn)：

[1]楊靜.基于用戶情感體驗(yàn)的交互動(dòng)畫界面設(shè)計(jì)[J].濱州學(xué)院學(xué)報(bào). 2017（06）

作者簡介：

吳欣怡，沈陽城市學(xué)院網(wǎng)絡(luò)與新媒體專業(yè)講師，主要研究方向：H5設(shè)計(jì)與開發(fā)、網(wǎng)站建設(shè)、Flash動(dòng)畫設(shè)計(jì)、微課設(shè)計(jì)與制作、網(wǎng)絡(luò)課程與虛擬現(xiàn)實(shí)技術(shù)。