張澤宇

摘要：在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展的今天，越來(lái)越多的設(shè)計(jì)師們開(kāi)始通過(guò)H5（HTML5）交互設(shè)計(jì)技術(shù)進(jìn)行符合其宣傳需求的高效的設(shè)計(jì)，而廣西民族音樂(lè)博物館作為全區(qū)首個(gè)專題性音樂(lè)博物館，承載著弘揚(yáng)廣西民族音樂(lè)文化等任務(wù)。通過(guò)利用H5（HTML5）交互設(shè)計(jì)應(yīng)用不僅可以借助PC和移動(dòng)平臺(tái)強(qiáng)大的可塑性與傳播力，還可以結(jié)合民族元素插畫創(chuàng)意的動(dòng)態(tài)互動(dòng)表現(xiàn)方式，通過(guò)交互方式拉近大眾和廣西民族音樂(lè)博物館之間的距離，以達(dá)到多維度詮釋廣西民族音樂(lè)博物館的豐富民族理念與內(nèi)涵，使大眾融入其中達(dá)到身臨其境的感官體驗(yàn)和互動(dòng)，從而得到大眾對(duì)廣西民族音樂(lè)博物館核心價(jià)值的認(rèn)同。

關(guān)鍵詞：插畫;HTML5;設(shè)計(jì);交互設(shè)計(jì);民族元素;廣西民族音樂(lè)博物館

一、廣西民族音樂(lè)博物館H5（HTML5）設(shè)計(jì)的背景

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代到來(lái)，用戶從PC向移動(dòng)端的遷移，人和手機(jī)越來(lái)越形影不離，移動(dòng)互聯(lián)網(wǎng)逐漸取代傳統(tǒng)的報(bào)紙和雜志，成為人們獲取信息的主要來(lái)源。而H5（HTML5）交互設(shè)計(jì)作為一種新型交互傳播載體，可以使大眾融入其中達(dá)到身臨其境的用戶感官體驗(yàn)。二者相互結(jié)合，以達(dá)到多維度詮釋廣西民族音樂(lè)博物館的豐富民族理念與內(nèi)涵，通過(guò)作品展示廣西民族音樂(lè)的多樣性、獨(dú)特性、與包容性。使大眾融入其中得到身臨其境的用戶感官體驗(yàn)，從而讓大眾認(rèn)同廣西民族音樂(lè)博物館的核心價(jià)值，思考和探索插畫的動(dòng)態(tài)體現(xiàn)。同時(shí)樹(shù)立廣西民族音樂(lè)博物館的特色品牌，有助于民族文化得到傳承，并對(duì)提升民族文化自信具有一定的積極作用。

插畫藝術(shù)在如今受到時(shí)代的諸多因素的影響， 如因設(shè)計(jì)師主觀因素賦予其獨(dú)特的審美意識(shí)和角度，在近幾年由于科技發(fā)展插畫藝術(shù)也由此呈現(xiàn)出多元化的風(fēng)格面貌。在如今一味追捧模仿日韓風(fēng)格的現(xiàn)代設(shè)計(jì)潮流中，如何在借鑒外國(guó)先進(jìn)文化的同時(shí)繼承和發(fā)揚(yáng)廣西少數(shù)傳統(tǒng)民族文化，大膽嘗試加入民族內(nèi)涵及其元素，找到屬于中國(guó)的民族插畫美學(xué)風(fēng)格并體現(xiàn)出來(lái)值得深入研究。

近年來(lái)如故宮博物院一樣運(yùn)用插畫與移動(dòng)交互平臺(tái)結(jié)合進(jìn)行推廣宣傳的只有極少數(shù)地方，而在國(guó)外大多藝術(shù)館，如日本的21-21 DESIGN SIGHT、東京國(guó)立美術(shù)館等等外國(guó)場(chǎng)館都早已通過(guò)其結(jié)合推廣，效果顯著。

所以現(xiàn)在各大高校相繼適應(yīng)社會(huì)潮流，近兩年都開(kāi)設(shè)插畫專業(yè)。與插畫技法、插畫創(chuàng)意、插畫表現(xiàn)相關(guān)的研究和論述井噴式的增長(zhǎng)，優(yōu)秀的插畫作品更是數(shù)不勝數(shù)。由于在學(xué)習(xí)插畫設(shè)計(jì)過(guò)程中側(cè)重于傳統(tǒng)平面插畫表現(xiàn)技法，如果再結(jié)合H5（HTML5）設(shè)計(jì)交互應(yīng)用，利用其多維化的推廣方式與移動(dòng)交互平臺(tái)，以滿足對(duì)品牌多維形象的宣傳需要。

二、廣西民族音樂(lè)博物館H5（HTML5）設(shè)計(jì)的可行性

廣西民族音樂(lè)博物館在此之前與其相關(guān)的介紹設(shè)計(jì)、品牌推廣較少，宣傳力度較小。基于其落地于歷史悠久的八桂大地上，具有鮮明獨(dú)特的民族特色個(gè)性，并有著民族音樂(lè)作為背景，利用民族視覺(jué)元素體現(xiàn)民族音樂(lè)特色，并把廣西少數(shù)民族精神融入其中，同時(shí)結(jié)合當(dāng)代核心價(jià)值觀探索變革與發(fā)展，取其精華，去其糟粕，并尋求插畫創(chuàng)意與交互設(shè)計(jì)的各種可行性，從而得以讓中國(guó)少數(shù)民族音樂(lè)博物館融入現(xiàn)代插畫創(chuàng)意設(shè)計(jì)語(yǔ)言，以新的H5（HTML5）交互推廣方式為載體， 較之于其他推廣方式更加具有傳播力與感官體驗(yàn)，也更能夠通過(guò)以插畫創(chuàng)意的方式加深大眾對(duì)廣西民族音樂(lè)博物館的品牌認(rèn)知，在潛移默化中了解廣西少數(shù)民族音樂(lè)，體會(huì)當(dāng)今廣西少數(shù)民族精神。因此在H5（HTML5）交互設(shè)計(jì)的插畫中將其民族特色提取加工，通過(guò)民族視覺(jué)元素結(jié)合音樂(lè)博物館的特點(diǎn)，將創(chuàng)作插畫與交互結(jié)合，最大限度地傳播廣西民族音樂(lè)博物館的豐富民族理念與內(nèi)涵。

在利用H5（HTML5）進(jìn)行推廣時(shí)，推廣成本方面有著不可小覷的優(yōu)勢(shì)，由于近年來(lái)流媒體以及社交軟件的發(fā)展，用戶基數(shù)也隨之增加， 在社交平臺(tái)上的轉(zhuǎn)發(fā)亦或是流媒體的投放，都會(huì)迅速增加對(duì)其H5（HTML5）關(guān)注點(diǎn)擊量，以相對(duì)較低之成本，獲得較大的受眾關(guān)注。

三、插畫場(chǎng)景主題的提煉

首先應(yīng)要明確的是H5（HTML5）交互設(shè)計(jì)的作用是在于其快速?gòu)V泛的傳播途徑以及加深傳播過(guò)程中對(duì)宣傳目標(biāo)潛移默化的信息傳導(dǎo)，受眾可以獲得相對(duì)完整的沉浸式體驗(yàn)。因此從對(duì)于廣西民族音樂(lè)博物館H5（HTML5）插畫場(chǎng)景主題深入探究時(shí)，需要明確廣西民族音樂(lè)博物館H5（HTML5）宣傳主旨，是以傳播廣西傳統(tǒng)音樂(lè)文化，輻射東南亞音樂(lè)文化圈為目的，觀察其收集提取素材，結(jié)合主旨對(duì)其探析后可發(fā)現(xiàn)在對(duì)于提取民族元素素材后進(jìn)行的插畫創(chuàng)作具有一定的連貫性，在一定程度上合理連接了廣西民族音樂(lè)博物館H5（HTML5）各個(gè)單元的邏輯性與故事性，利用提取廣西民族音樂(lè)元素創(chuàng)作的場(chǎng)景主題插畫與H5（HTML5）交互設(shè)計(jì)結(jié)合，在傳播過(guò)程中可使受眾對(duì)民族傳統(tǒng)元素情懷升溫。在一定程度上明確了H5（HTML5）交互設(shè)計(jì)中的人和物質(zhì)、文化、歷史、音樂(lè)之間的對(duì)話邏輯。由此可見(jiàn)廣西民族音樂(lè)博物館H5（HTML5）作者在進(jìn)行初期演示時(shí)，不僅做好了用戶場(chǎng)景模擬預(yù)測(cè)，而且進(jìn)行分析了其是否準(zhǔn)確表達(dá)廣西民族音樂(lè)博物館內(nèi)在含義與其呈現(xiàn)效果之間的關(guān)系，最終確立了行之有效的方案 。

從整體出發(fā)，進(jìn)行全面深入探析后，得知其廣西民族音樂(lè)博物館H5（HTML5）分為三個(gè)單元：古器之聲、八桂音韻、東南亞音樂(lè)文化。在第一單元古器之聲之中強(qiáng)調(diào)“和集百越，同其風(fēng)俗”駱越文化下蒼勁渾厚鼓聲與青銅文化底蘊(yùn)，如會(huì)鼓、煙墩大鼓（由牛皮、鎖扣等等制作而成）、大型青銅樂(lè)器羊角鈕鐘、銅鼓。 而在第二單元，八桂音韻中強(qiáng)調(diào)了從駱越文化至今的璀璨的少數(shù)民族民歌如壯族民歌、毛南族民歌、仫佬族民歌、以及戲曲演出中的弦鳴樂(lè)器（角胡）、擦弦樂(lè)器（七弦琴）、氣鳴樂(lè)器（蘆笙）、休鳴樂(lè)器（棒棒）膜鳴樂(lè)器（皮鼓）、各類面具、形態(tài)各異的提線人偶等等。最后第三單元強(qiáng)調(diào)東南亞音樂(lè)文化，例如印尼西亞爪哇“得貢甘美蘭”樂(lè)器的構(gòu)成等等。

可見(jiàn)創(chuàng)作者在各個(gè)單元中著重提取各個(gè)單元中具有鮮明特色的民族元素進(jìn)行廣西民族音樂(lè)博物館H5（HTML5）插畫場(chǎng)景主題創(chuàng)作，例如第一單元中羊角鈕鐘、銅鼓、第二單元中提線人偶、鳴樂(lè)器（角胡）、以及第三單元之中的具有東南亞特色的“得貢甘美蘭”樂(lè)器群 的元素提取。不僅在設(shè)計(jì)語(yǔ)言上言簡(jiǎn)意賅，更是科學(xué)合理的照應(yīng)廣西民族音樂(lè)博物館場(chǎng)館具體布置。

四、動(dòng)態(tài)交互場(chǎng)景腳本的設(shè)計(jì)

首先應(yīng)要明確的是H5（HTML5）交互設(shè)計(jì)的作用是在于其快速?gòu)V泛的傳播途徑以及加深傳播過(guò)程中對(duì)宣傳目標(biāo)潛移默化的信息傳導(dǎo)，受眾可以獲得相對(duì)完整的沉浸式體驗(yàn)。因此從對(duì)于廣西民族音樂(lè)博物館H5（HTML5）插畫場(chǎng)景主題深入探究時(shí)，需要明確廣西民族音樂(lè)博物館H5（HTML5）宣傳主旨，是以傳播廣西傳統(tǒng)音樂(lè)文化，輻射東南亞音樂(lè)文化圈為目的，觀察其收集提取素材，結(jié)合主旨對(duì)其探析后可發(fā)現(xiàn)在對(duì)于提取民族元素素材后進(jìn)行的插畫創(chuàng)作具有一定的連貫性，在一定程度上合理連接了廣西民族音樂(lè)博物館H5（HTML5）各個(gè)單元的邏輯性與故事性，利用提取廣西民族音樂(lè)元素創(chuàng)作的場(chǎng)景主題插畫與H5（HTML5）交互設(shè)計(jì)結(jié)合，在傳播過(guò)程中可使受眾對(duì)民族傳統(tǒng)元素情懷升溫。在一定程度上明確了H5（HTML5）交互設(shè)計(jì)中的人和物質(zhì)、文化、歷史、音樂(lè)之間的對(duì)話邏輯。由此可見(jiàn)廣西民族音樂(lè)博物館H5（HTML5）作者在進(jìn)行初期演示時(shí)，不僅做好了用戶場(chǎng)景模擬預(yù)測(cè)，而且進(jìn)行分析了其是否準(zhǔn)確表達(dá)廣西民族音樂(lè)博物館內(nèi)在含義與其呈現(xiàn)效果之間的關(guān)系，最終確立了行之有效的方案 。

從整體出發(fā)，進(jìn)行全面深入探析后，得知其廣西民族音樂(lè)博物館H5（HTML5）分為三個(gè)單元：古器之聲、八桂音韻、東南亞音樂(lè)文化。在第一單元古器之聲之中強(qiáng)調(diào)“和集百越，同其風(fēng)俗”駱越文化下蒼勁渾厚鼓聲與青銅文化底蘊(yùn)，如會(huì)鼓、煙墩大鼓（由牛皮、鎖扣等等制作而成）、大型青銅樂(lè)器羊角鈕鐘、銅鼓。 而在第二單元，八桂音韻中強(qiáng)調(diào)了從駱越文化至今的璀璨的少數(shù)民族民歌如壯族民歌、毛南族民歌、仫佬族民歌、以及戲曲演出中的弦鳴樂(lè)器（角胡）、擦弦樂(lè)器（七弦琴）、氣鳴樂(lè)器（蘆笙）、休鳴樂(lè)器（棒棒）膜鳴樂(lè)器（皮鼓）、各類面具、形態(tài)各異的提線人偶等等。最后第三單元強(qiáng)調(diào)東南亞音樂(lè)文化，例如印尼西亞爪哇“得貢甘美蘭”樂(lè)器的構(gòu)成等等。

可見(jiàn)創(chuàng)作者在各個(gè)單元中著重提取各個(gè)單元中具有鮮明特色的民族元素進(jìn)行廣西民族音樂(lè)博物館H5（HTML5）插畫場(chǎng)景主題創(chuàng)作，例如第一單元中羊角鈕鐘、銅鼓、第二單元中提線人偶、鳴樂(lè)器（角胡）、以及第三單元之中的具有東南亞特色的“得貢甘美蘭”樂(lè)器群 的元素提取。不僅在設(shè)計(jì)語(yǔ)言上言簡(jiǎn)意賅，更是科學(xué)合理的照應(yīng)廣西民族音樂(lè)博物館場(chǎng)館具體布置。

結(jié)束語(yǔ)

至此，在通過(guò)對(duì)廣西民族音樂(lè)博物館H5（HTML5）探析中的不難看出在提取民族元素，利用插畫的表現(xiàn)形式，并在交互設(shè)計(jì)中利用H5（HTML5）平臺(tái)，不僅可以快速流暢的在線上體驗(yàn)廣西民族音樂(lè)博物館中屬于廣西本土乃至東南亞的民族音樂(lè)知識(shí)，還可以的使大眾在此H5（HTML5）潛移默化當(dāng)中加深對(duì)民族音樂(lè)的了解，實(shí)現(xiàn)了在大眾傳播當(dāng)中的雅俗共賞。

參考文獻(xiàn)

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

[2] 胡曉林，馬振龍.基于H5技術(shù)的微信交互式廣告在交互設(shè)計(jì)方面的“優(yōu)勢(shì)整合”創(chuàng)新思考[J].包裝工程，2016，37（24）

[3] H5廣告的傳播價(jià)值及效果有限性的反思[J]. 張玲.?青年記者. 2017（32）

[4] 郭暉，王歡.新媒體時(shí)代下的H5廣告創(chuàng)意與營(yíng)銷分析——以“淘寶造物節(jié)”為例[J].納稅，2017，（34）

基金項(xiàng)目：2019年度國(guó)家級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃《民族元素插畫創(chuàng)意在交互設(shè)計(jì)中的表現(xiàn)與應(yīng)用-以廣西民族音樂(lè)博物館H5交互設(shè)計(jì)為例》;項(xiàng)目編號(hào)：201910607010。