基于微信平台H5 的传统文化主题设计与实践

杨洋 郭永志

随着国内互联网和智能手机的快速发展，互联网公司腾讯开发的微信平台已经成为当下最为流行的移动社交平台，移动互联网社交平台广受青睐，基于微信平台的移动交互式广告也呈现繁荣趋势。从用户使用角度来说，微信互动广告可以离线浏览，成本低、跨平台、即时响应、互动性强，无须像其他一般手机端应用一样下载安装。这种广告更加自由快捷，并且交互形式丰富多样。

微信平台的互动式广告是基于H5 技术的一种高级网页技术而实现的，全称为HTML5。目前我们在移动端看到的动态广告、游戏、邀请函都是利用H5 技术实现的。H5 之所以发展如此迅猛，最大的优势在于它适用于人们当下最为依赖的社交工具移动手机。与应用软件的设计制作相比，它几乎不用考虑用户的机型和适配性问题，无须准备两套适配程序来适用于用户手机。它可以直接在网页上进行调试和修改，用户可以直接浏览体验无须下载储存。更重要的是，它具备的核心功能所带来的感官体验效果和互动效果，更是有过之而无不及。借助微信平台这一社交媒体H5 互动广告的传播更加迅速。这种广告方式更适用于企业营销。[1]

1.微信平台的H5 设计类型和传播特征

微信平台的H5 设计与以往的网站、移动应用APP 相比，在传播路径上更为个体和自发。以移动端作为主要传播载体，人们利用手机作为信息发布平台，能更好地适应当下快节奏的工作和生活，在内容和方式上呈现出内容简短、大众参与性强、技术要求低、传播性快的特点。

当下主要的微信平台的H5 设计类型有幻灯播放型H5 广告。通过静态图片简单的翻页效果、背景音效等传播内容，如邀请函、活动推广等常用这种方式。平面广告的设计和有气氛渲染的背景音乐选择是打动浏览者的主要方式。

交互动画及场景体验型H5 页面。场景体验型H5广告的主要任务是“唤醒”与“点燃”。H5 广告利用交互技术营造沉浸式的交互体验场景，让消费者置身于虚拟场景中体验产品功能。在这个过程中，消费者不是被动地接受信息，而是在场景体验中直观地了解产品，完成对产品功能和品牌的认知。此类型的H5 广告营销目的为宣传品牌形象，提升品牌知名度。H5 广告中融入场景能让用户借助熟悉的场景、经验和行为来理解和接受信息进而主动传播信息，这也是激励受众转发、传播信息的重要手段。[2]

交互趣味游戏H5 广告，重点在于游戏互动的趣味设计。这种类型的广告能自发地让用户对游戏产生兴趣，乐于参与，主动分享社交圈，游戏环节的参与设计尤其重要。这类广告交互形式丰富多样，游戏环节设置的趣味性能使用户在参与的过程中产生乐趣，从而能够接受产品的概念和信息。

图1

图2

2.传统文化主题在微信平台上的设计与实践

微信平台的重要优势之一是具有庞大稳定的用户群体，兼具社交、传播、互动等各种功能，信息投放精准，时效性强。目前，由于技术的实现比较容易，因此微信平台的各种小游戏、小程序在设计制作方面也是良莠不齐，文化主题的设计内容更是少之又少。党的十九大报告指出：“深入挖掘中华优秀传统文化蕴含的思想观念、人文精神、道德规范，结合时代要求继承创新，让中华文化展现出永久魅力和时代风采。”弘扬传统文化要靠创新的传播形式和适合大众的传播平台。微信平台作为目前中国市场占有率最大的社交平台，以其传播方式数字化、交互性强、传播速度时效性等优势，能够对传统文化进行有效激活。

北京历史悠久，是一座有着三千年历史的世界名城。北京的文化也承载多年，有着自己独特的文化元素，城市建筑、皇家文化、民俗风情都独具特色。以下通过基于微信平台的“北京方言”的交互设计实践进行分析和总结。

2.1“北京方言”文化主题的设计定位和目的

基于H5 技术的北京方言主题设计取名为“京腔京韵”。该作品是关于北京方言的微信互动广告，设计的目的是利用互联网社交平台传播北京方言及其所承载的北京文化，强化北京方言文化的实用功能和情感交流功能。此设计用于人们当下最为依赖的社交工具移动手机，基于H5 技术的微信互动广告，采用方言擂主争霸赛的形式，可以扫二维码，朋友圈分享进行挑战，并参与排位。大部分的微信朋友圈使用者都会参与进来，受众群主要针对北京人以及对北京话感兴趣的用户。

“京腔京韵”作品主要内容包括“北京方言”的基本信息介绍、互动参与模仿等交互环节。内容和视觉画面设计力图幽默诙谐，重点是利用动画、互动游戏吸引参与者的注意力，有效地避免了受众对于一般性文化主题知识的教科书式的信息传输方式。通过在微信朋友圈的分享，与朋友间进行挑战，可以从中获得满足感和成就感，增加了用户和朋友间的黏度。尤其是对于土生土长的北京人来说，会感觉更加亲切，同时也可以帮助更多的广大受众了解北京的方言文化以及北京话含义。

2.2 突出主题的视觉形象设计和界面设计

优秀的设计作品需要符合主题的视觉形象。作品“京腔京韵”主视觉是一套以“老北京”人物形象为依据的人物形象设计。以往北京人物形象设计的案例有很多，但人物造型设计大都是手绘的形式，缺少趣味性和创新性。“京腔京韵”在设计中根据人物特点及其方言的含义进行设计，在处理人物形象时，参考了老北京人物的性格特点，着装特点，通过查阅大量资料汇总了相应的人物信息，进行了一系列整合设计。以“老炮儿”为例：“老炮儿”是指提笼遛鸟，无所事事的老混混，所以要表现“老炮儿”，就想到了鸟笼。在老北京胡同里悠闲的遛鸟的这种状态，结合老北京人的着装特点，用简洁的几何形设计出人物形象动态。在扁平化设计的基础上，根据方言含义及特点，给每个人物拟定了情境并加入了动画效果，使人物形象更加生动，更加有趣味，更加吸引用户，最终创作了多个“老北京”人物形象设计，如图1。

在H5 用户界面设计中，同时加入了北京建筑特点、京扇子等视觉元素。色彩设计方面运用到了北京城的城墙红，瓦片黄，还有黑三个颜色，增强了整体的北京韵味。独具特色的北京人物形象和场景的有效呼应，反映了老北京人的生活背景和文化特色。在整体视觉界面设计中，突出主体形象和主要色彩。

2.3 利用视听多媒体效果渲染文化气氛

“京腔京韵”交互作品在创作的过程中，只在视觉设计方面做文章还是远远不够的，想要有较好的情境代入感，要让用户有沉浸式体验，就要利用视听多媒体效果，增强气氛渲染。在声音设计方面，选用了《爱在老北京》音乐伴奏来做背景音乐，贯穿于整个交互作品，声音特效方面收录了闹市的叫卖声、嘈杂声。在虚拟VR 场景、擂主争霸赛的界面中用到了《老北京器乐曲》并穿插了一些老北京胡同熙熙攘攘的声音特效，来提升和渲染整个场景化氛围。营造强烈的带入感就要结合作品主题和分析用户参与过程中的心理预期，营造出身临其境的画面感，实现良好的用户体验效果。

2.4 交互游戏激励用户参与游戏，增加用户黏度

微信平台的H5 广告设计的优势就是可以更快捷地传播、分享、参与互动，并且可以互相评论、讨论。真正能让用户更好地理解“北京方言文化”的方法是让用户参与进来深入感知，可以结合本身的特性激励用户进行参与机制的设置。参与环节的设置就是为了加深用户对“北京方言文化”的理解。

作品“京腔京韵”在参与机制的创新主要体现在语音交互争霸赛。只靠视觉表现方言形式单一，方言最重要的是要说出来，要全面地表现方言的趣味性，就要让用户学说方言。所以作品除了以往的交互形式外，结合方言特点加入了语音交互。这得益于语音交互技术自然语言处理能力发展迅猛，程序能够处理各种不同类型的语音指令。作品整体是擂主争霸赛的形式，采用先学习后挑战的顺序。学习主要是通过视频和虚拟场景，先了解熟悉每个方言的含义和发音，然后进入争霸赛。争霸赛一共分成两个赛场，新手场和大师场。新手场用户可以选择自己喜欢的方言进行挑战，有标准音标提示，没有时间限制；而大师场则是一次性挑战10 个方言，每个限时10 秒，没有标准音标。二者相同的是在挑战完成后程序会根据用户的发音与标准音进行对比分析，根据用户的发音标准程度进行评分并排名。前十名可上排行榜，第一名则称为霸主。如果分数不满意可以重新挑战或进入课堂重新学习再战。如果上榜的话可以向别人发起挑战，如图2。

通过参与设置测试或挑战记录分享以满足用户成就感、有趣的游戏或通过参与完成的作品等。有效地参与环节可增强对于文化的深入认同感和情境感，形成对北京传统文化的情感认知。

3.结语

传统文化需要利用借助新媒体数字平台进行展示和广泛传播。H5 技术的发展以及微信平台的开放，为实现和承载优秀传统文化交互作品提供了新的平台。设计师有责任考虑作品的质量呈现。前期要考虑用户的心理，做好设计的构思。设计过程中要注重创新性，从作品的情感性表现、多媒体视听感官感受、吸引广大用户参与游戏、提高社交功能等多角度考虑作品的呈现效果。优秀的H5 技术的微信交互式广告可以使用户产生惊喜，乐于分享，主动传播。随着技术的不断更新迭代，只有在设计创新上给予用户更完善的互动体验才能提升交互广告的艺术价值，给用户带来新鲜感和满足感。

注释：

[1]胡晓林等：《基于H5 技术的微信交互式广告在交互设计方面的“优势整合”创新思考》，《包装工程》2016 年第24 期。

[2]谭坤等：《基于微信平台的H5 广告设计策略分析》，《包装工程》2016 年第20 期。