基于H5技术的景泰蓝传统工艺展示系统的设计与实现.docxVIP

基于H5技术的景泰蓝传统工艺展示系统的设计与实现

刘孟涵刘旭

摘要：本文使用HTLM5技术，构建了基于网络技术的景泰蓝传统工艺的展示系统，并借助文本、图片、视频、动画等多媒体技术手段，使用户通过计算机、移动设备就可以全方位、细致地了解景泰蓝传統工艺，足不出户便可领略景泰蓝的魅力。作者希望本研究能对景泰蓝传统工艺的文化传承和传播发挥一定的作用。

中图分类号：G434文献标识码：A论文编号：1674-2117（2019）01-0083-03

景泰蓝工艺展示使用H5技术的优势

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，该标准规范即为HTLM5（以下简称H5）。随着技术的不断发展，H5拥有庞大多样化特性，终端设备与技术的结合可实现绘图、音视频播放、摇一摇、重力感应、擦除、3D视图及多种互动功能，H5的跨平台使用是其最大优势。

在景泰蓝工艺的展示中利用H5技术具有以下优势：①利用H5的跨平台技术，可使不同平台的终端设备与浏览者进行交互，实现对景泰蓝工艺的多方面了解；②采用绘图和3D视图交互场景相结合的表现方式，使浏览者既能享受常规二维绘图表现，又能感受到3D技术呈现的真实感和沉浸感；③使用音视频多媒体技术，能营造更为自然和逼真的音视觉体验；④景泰蓝的介绍和制作步骤的具体介绍都配备有实时的语音解说功能，能让用户时刻都有身临其境的真实感。

H5技术在景泰蓝工艺展示中的应用

笔者所采用的H5制作工具为AdobeAnimateCC2018，图片编辑软件为AdobePhotoshop。

1.搭建总体设计框架

（1）信息采集，是以后各制作阶段的基础，通过查找相关书籍和在互联网搜集等方式获取景泰蓝工艺相关信息，如图片、文字介绍等。

（2）模板原型设计，利用第一步搜集到景泰蓝相关的各类信息，利用Photoshop进行原型设计。

（3）栏目页面架构，主要是使用第二步建立好的原型，创建完整的页面场景，包括文字、图片等，搭建过程是在Photoshop中完成，最后导入Animate中。

（4）动画制作和语音录入，使用Animate制作动画并链入场景，录入语音讲解景泰蓝的制作过程。

（5）交互设计，在Animate中实现多种形式展示页面的交互功能前端。

（6）功能实现，在第五步实现了页面交互功能的基础上，给各页面的布局文字、图片及上下左右滑动建立按钮，引导用户与页面的交互，该过程中会使用JavaScript来实现，在其中搭建JavaScript后与H5前端进行调用连接，通过手指屏幕滑动或鼠标滚轮调出相应的功能以实现用户的操作。

2.H5技术在景泰蓝工艺展示中的设计与实现

（1）使用Photoshop进行页面原型的搭建与设计。

整体架构设计需简洁大方，凸显景泰蓝传统工艺展示系统的主题，并满足横屏、竖屏自适应的两种表现形式，总体的页面架构原型设计包含五个页面：首页、基本介绍、制作工艺、名家名作、交流分享。以首页设计为例，需要将页面表现部分完整体现出来，其中包括页面背景图、LOGO、主题大图、文字导航、页面核心内容文字、导航引导按钮、当前页面所属标记，除页面的背景图、主题大图、内容文字以外的其他页面表现部分将贯穿在所有页面设计中。使用Photoshop设计完成后的效果图如图1（横版）、图2（竖版）所示。

（2）使用Animate搭建H5场景页面。

鼠标停留“扫码分享”按钮会自动弹出二维码，可以通过移动设备扫码识别后浏览景泰蓝展示系统的所有页面，如景泰蓝制作步骤的视频及语音讲解等，二维码表现的效果如图5所示。

（3）景泰蓝制作步骤的动画语音讲解。

通过音视频及文字相结合的表现形式，展示出景泰蓝制作的每一步详细的讲解，景泰蓝的制作过程大体分为七个步骤：第一步设计胎图、第二步制作（制胎）、第三步掐丝、第四步点蓝、第五步烧蓝、第六步磨光、第七步镀金。页面中点击对应的数字可观看视频讲解。图6是景泰蓝制作步骤的页面截图。

基于H5技术对景泰蓝传统工艺的展现形式是综合的，其贯穿了交互概念，增加了与浏览者的互动，各种触控滑动点击、摇一摇、重力感应、环境感应等和设计形成互补关系，给浏览者带来全新的体验。同时，利用视频贯穿景泰蓝制作的各个阶段，使得浏览者观赏感受更为丰富。笔者希望借助H5技术制作的这个展示系统能对景泰蓝传统工艺的文化传承和传播发挥一定的作用。

[1]钟启泉.打造教师的一双慧眼——谈“三维目标”教学的研究[J].上海教育研究，2010（2）：7.

[2]刘景福，钟志贤.基于项目的学习（PBL）模式研究[J].外国教育研究，2002（11）：18-22.

[3]钟启芳，史玲玲，刘家坤.Arduino开源硬件编程在初中校本课程中的教学探索与反思[J].中国校外教育，2018（4）：123.

[4]罗伯特