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

刘孟涵 刘旭

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

关键词：HTML5；可视化；动态交互

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

引言

进入高中，参加了学校的美术社团，接触到了有关景泰蓝的校本课程，随着学习的深入，对景泰蓝这项工艺的了解越来越深，对其中蕴含的历史更是深深着迷。景泰蓝作为一项非物质文化遗产，其保护与传承需要我们的努力，可如果让每个人都实际去制作景泰蓝是不太现实的，面对这样的情况，笔者想，是否可以借助信息技术，利用网络展示景泰蓝的制作，让大家更好地感受景泰蓝的魅力，使其对景泰蓝的认识更真切，也对文化的传承更有责任感。因此，笔者尝试利用HTML5技术设计景泰蓝传统工艺展示系统，以期对景泰蓝进行更好的展示。

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

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

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

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

笔者所采用的H5制作工具为Adobe Animate CC 2018，图片编辑软件为Adobe Photoshop。

1.搭建总体设计框架

开展H5页面各个模块架构的数据收集准备工作，主要包括信息采集、模板原型设计、构思各栏目页面架构、动画制作和语音录入、交互设计、功能实现及后期完善等。

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

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

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

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

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

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

（7）后期进行测试和完善，对不满意的地方进行修改并不断完善，以达到预期效果。

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

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

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

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

界面设计是人与机器之间传递和交换信息的媒介，为了更好地表现景泰蓝传统工艺的展示特点，所有场景页面会根据浏览设备自适应浏览而呈现出不同的展示样式，以期带给浏览者更好的视觉享受。多种页面切换表现形式，充分体现了H5跨平台的优势，PC端浏览者可通过鼠标点击引导按钮，也可通过鼠标滚轮上下滚动，移动端设备浏览者可手指滑动屏幕。Animate搭建H5场景页面的界面如上页图3、图4（自适应代码编写）所示。

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

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

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

结语

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

参考文献：

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

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

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

[4]罗伯特·J·玛扎诺.学习目标、形成性评估与高效课堂[M].北京：中国书籍出版社.2012，8.

[5]王丹丹.Arduino创客项目计算思维特征研究[D].上海：上海师范大学，2016.

后记

笔者对教育目标分类学有过一点点了解，特别是布鲁姆的教育目标分类学，是从认知加工视角，在了解、理解、应用、分析、综合、评价层次上对事实性知识、概念性知识、程序性知识、元认知知识进行精细化学习加工的过程，但在综合能力的提升上，一直从逻辑上无法说服自己在这样的过程中是如何完成的。看到李老师和尚老师的文章后，我豁然开朗，决定后面好好研究一下玛扎诺，更深入了解一下在基于问题解决的学习过程中，如何正确运用教育目标分类学。