民族元素插画在交互设计应用的研究方法探析

张泽宇

摘要：在移动互联网飞速发展的今天，越来越多的设计师们开始通过H5（HTML5）交互设计技术进行符合其宣传需求的高效的设计，而广西民族音乐博物馆作为全区首个专题性音乐博物馆，承载着弘扬广西民族音乐文化等任务。通过利用H5（HTML5）交互设计应用不仅可以借助PC和移动平台强大的可塑性与传播力，还可以结合民族元素插画创意的动态互动表现方式，通过交互方式拉近大众和广西民族音乐博物馆之间的距离，以达到多维度诠释广西民族音乐博物馆的丰富民族理念与内涵，使大众融入其中达到身临其境的感官体验和互动，从而得到大众对广西民族音乐博物馆核心价值的认同。

关键词：插画;HTML5;设计;交互设计;民族元素;广西民族音乐博物馆

一、广西民族音乐博物馆H5（HTML5）设计的背景

随着移动互联网时代到来，用户从PC向移动端的迁移，人和手机越来越形影不离，移动互联网逐渐取代传统的报纸和杂志，成为人们获取信息的主要来源。而H5（HTML5）交互设计作为一种新型交互传播载体，可以使大众融入其中达到身临其境的用户感官体验。二者相互结合，以达到多维度诠释广西民族音乐博物馆的丰富民族理念与内涵，通过作品展示广西民族音乐的多样性、独特性、与包容性。使大众融入其中得到身临其境的用户感官体验，从而让大众认同广西民族音乐博物馆的核心价值，思考和探索插画的动态体现。同时树立广西民族音乐博物馆的特色品牌，有助于民族文化得到传承，并对提升民族文化自信具有一定的积极作用。

插画艺术在如今受到时代的诸多因素的影响， 如因设计师主观因素赋予其独特的审美意识和角度，在近几年由于科技发展插画艺术也由此呈现出多元化的风格面貌。在如今一味追捧模仿日韩风格的现代设计潮流中，如何在借鉴外国先进文化的同时继承和发扬广西少数传统民族文化，大胆尝试加入民族内涵及其元素，找到属于中国的民族插画美学风格并体现出来值得深入研究。

近年来如故宫博物院一样运用插画与移动交互平台结合进行推广宣传的只有极少数地方，而在国外大多艺术馆，如日本的21-21 DESIGN SIGHT、东京国立美术馆等等外国场馆都早已通过其结合推广，效果显著。

所以现在各大高校相继适应社会潮流，近两年都开设插画专业。与插画技法、插画创意、插画表现相关的研究和论述井喷式的增长，优秀的插画作品更是数不胜数。由于在学习插画设计过程中侧重于传统平面插画表现技法，如果再结合H5（HTML5）设计交互应用，利用其多维化的推广方式与移动交互平台，以满足对品牌多维形象的宣传需要。

二、广西民族音乐博物馆H5（HTML5）设计的可行性

广西民族音乐博物馆在此之前与其相关的介绍设计、品牌推广较少，宣传力度较小。基于其落地于历史悠久的八桂大地上，具有鲜明独特的民族特色个性，并有着民族音乐作为背景，利用民族视觉元素体现民族音乐特色，并把广西少数民族精神融入其中，同时结合当代核心价值观探索变革与发展，取其精华，去其糟粕，并寻求插画创意与交互设计的各种可行性，从而得以让中国少数民族音乐博物馆融入现代插画创意设计语言，以新的H5（HTML5）交互推广方式为载体， 较之于其他推广方式更加具有传播力与感官体验，也更能够通过以插画创意的方式加深大众对广西民族音乐博物馆的品牌认知，在潜移默化中了解广西少数民族音乐，体会当今广西少数民族精神。因此在H5（HTML5）交互设计的插画中将其民族特色提取加工，通过民族视觉元素结合音乐博物馆的特点，将创作插画与交互结合，最大限度地传播广西民族音乐博物馆的丰富民族理念与内涵。

在利用H5（HTML5）进行推广时，推广成本方面有着不可小觑的优势，由于近年来流媒体以及社交软件的发展，用户基数也随之增加， 在社交平台上的转发亦或是流媒体的投放，都会迅速增加对其H5（HTML5）关注点击量，以相对较低之成本，获得较大的受众关注。

三、插画场景主题的提炼

首先应要明确的是H5（HTML5）交互设计的作用是在于其快速广泛的传播途径以及加深传播过程中对宣传目标潜移默化的信息传导，受众可以获得相对完整的沉浸式体验。因此从对于广西民族音乐博物馆H5（HTML5）插画场景主题深入探究时，需要明确广西民族音乐博物馆H5（HTML5）宣传主旨，是以传播广西传统音乐文化，辐射东南亚音乐文化圈为目的，观察其收集提取素材，结合主旨对其探析后可发现在对于提取民族元素素材后进行的插画创作具有一定的连贯性，在一定程度上合理连接了广西民族音乐博物馆H5（HTML5）各个单元的逻辑性与故事性，利用提取广西民族音乐元素创作的场景主题插画与H5（HTML5）交互设计结合，在传播过程中可使受众对民族传统元素情怀升温。在一定程度上明确了H5（HTML5）交互设计中的人和物质、文化、历史、音乐之间的对话逻辑。由此可见广西民族音乐博物馆H5（HTML5）作者在进行初期演示时，不仅做好了用户场景模拟预测，而且进行分析了其是否准确表达广西民族音乐博物馆内在含义与其呈现效果之间的关系，最终确立了行之有效的方案 。

从整体出发，进行全面深入探析后，得知其广西民族音乐博物馆H5（HTML5）分为三个单元：古器之声、八桂音韵、东南亚音乐文化。在第一单元古器之声之中强调“和集百越，同其风俗”骆越文化下苍劲浑厚鼓声与青铜文化底蕴，如会鼓、烟墩大鼓（由牛皮、锁扣等等制作而成）、大型青铜乐器羊角钮钟、铜鼓。 而在第二单元，八桂音韵中强调了从骆越文化至今的璀璨的少数民族民歌如壮族民歌、毛南族民歌、仫佬族民歌、以及戏曲演出中的弦鸣乐器（角胡）、擦弦乐器（七弦琴）、气鸣乐器（芦笙）、休鸣乐器（棒棒）膜鸣乐器（皮鼓）、各类面具、形态各异的提线人偶等等。最后第三单元强调东南亚音乐文化，例如印尼西亚爪哇“得贡甘美兰”乐器的构成等等。

可见创作者在各个单元中着重提取各个单元中具有鲜明特色的民族元素進行广西民族音乐博物馆H5（HTML5）插画场景主题创作，例如第一单元中羊角钮钟、铜鼓、第二单元中提线人偶、鸣乐器（角胡）、以及第三单元之中的具有东南亚特色的“得贡甘美兰”乐器群 的元素提取。不仅在设计语言上言简意赅，更是科学合理的照应广西民族音乐博物馆场馆具体布置。

四、动态交互场景脚本的设计

首先应要明确的是H5（HTML5）交互设计的作用是在于其快速广泛的传播途径以及加深传播过程中对宣传目标潜移默化的信息传导，受众可以获得相对完整的沉浸式体验。因此从对于广西民族音乐博物馆H5（HTML5）插画场景主题深入探究时，需要明确广西民族音乐博物馆H5（HTML5）宣传主旨，是以传播广西传统音乐文化，辐射东南亚音乐文化圈为目的，观察其收集提取素材，结合主旨对其探析后可发现在对于提取民族元素素材后进行的插画创作具有一定的连贯性，在一定程度上合理连接了广西民族音乐博物馆H5（HTML5）各个单元的逻辑性与故事性，利用提取广西民族音乐元素创作的场景主题插画与H5（HTML5）交互设计结合，在传播过程中可使受众对民族传统元素情怀升温。在一定程度上明确了H5（HTML5）交互设计中的人和物质、文化、历史、音乐之间的对话逻辑。由此可见广西民族音乐博物馆H5（HTML5）作者在进行初期演示时，不仅做好了用户场景模拟预测，而且进行分析了其是否准确表达广西民族音乐博物馆内在含义与其呈现效果之间的关系，最终确立了行之有效的方案 。

从整体出发，进行全面深入探析后，得知其广西民族音乐博物馆H5（HTML5）分为三个单元：古器之声、八桂音韵、东南亚音乐文化。在第一单元古器之声之中强调“和集百越，同其风俗”骆越文化下苍劲浑厚鼓声与青铜文化底蕴，如会鼓、烟墩大鼓（由牛皮、锁扣等等制作而成）、大型青铜乐器羊角钮钟、铜鼓。 而在第二单元，八桂音韵中强调了从骆越文化至今的璀璨的少数民族民歌如壮族民歌、毛南族民歌、仫佬族民歌、以及戏曲演出中的弦鸣乐器（角胡）、擦弦乐器（七弦琴）、气鸣乐器（芦笙）、休鸣乐器（棒棒）膜鸣乐器（皮鼓）、各类面具、形态各异的提线人偶等等。最后第三单元强调东南亚音乐文化，例如印尼西亚爪哇“得贡甘美兰”乐器的构成等等。

可见创作者在各个单元中着重提取各个单元中具有鲜明特色的民族元素进行广西民族音乐博物馆H5（HTML5）插画场景主题创作，例如第一单元中羊角钮钟、铜鼓、第二单元中提线人偶、鸣乐器（角胡）、以及第三单元之中的具有东南亚特色的“得贡甘美兰”乐器群 的元素提取。不仅在设计语言上言简意赅，更是科学合理的照应广西民族音乐博物馆场馆具体布置。

结束语

至此，在通过对广西民族音乐博物馆H5（HTML5）探析中的不难看出在提取民族元素，利用插画的表现形式，并在交互设计中利用H5（HTML5）平台，不仅可以快速流畅的在线上体验广西民族音乐博物馆中属于广西本土乃至东南亚的民族音乐知识，还可以的使大众在此H5（HTML5）潜移默化当中加深对民族音乐的了解，实现了在大众传播当中的雅俗共赏。

参考文献

[1]基于用户情感体验的交互动画界面设计[J]. 杨静. 滨州学院学报. 2017（06）

[2] 胡晓林，马振龙.基于H5技术的微信交互式广告在交互设计方面的“优势整合”创新思考[J].包装工程，2016，37（24）

[3] H5广告的传播价值及效果有限性的反思[J]. 张玲. 青年记者. 2017（32）

[4] 郭晖，王欢.新媒体时代下的H5广告创意与营销分析——以“淘宝造物节”为例[J].纳税，2017，（34）

基金项目：2019年度國家级大学生创新创业训练计划《民族元素插画创意在交互设计中的表现与应用-以广西民族音乐博物馆H5交互设计为例》;项目编号：201910607010。