景泰蓝工艺文化传播微信小程序的设计与开发

吴帆　张文怡　刘畅　方子仪

摘要：自主设计开发了一个微信小程序《匠器——景泰蓝》，该小程序具有传播景泰蓝工艺文化知识、推广景泰蓝工坊、体验景泰蓝工艺等功能。希望依托微信小程序独有的传播优势，吸引更多的人关注和了解景泰蓝传统工艺，促进景泰蓝工艺文化的传播和传统工艺行业的发展。文中对小程序的功能与界面设计、开发实现技术进行了详细的介绍，并展示了小程序成品效果。该小程序达到了综合性、趣味性和互动性的设计目标，实现了移动互联网+传统工艺的探索与实践。

关键词：景泰蓝工艺文化;微信小程序;功能设计;界面设计;软件开发

中图分类号：TP311.1;J526.2      文献标识码：A

文章编号：1009-3044（2021）12-0001-03

1 背景

景泰蓝是北京代表性工艺美术品种“燕京八绝”之一，其制作工艺入选国家非物质文化遗产名录。在移动互联网时代，手机无疑是信息传播最有效的方式之一，而微信小程序相较于App又具有体量轻、访问方便、开发成本低等特点，因此本文开发了一个微信小程序《匠器——景泰蓝》，希望能够吸引更多的人关注和了解景泰蓝传统工艺，促进景泰蓝工艺文化的传播和传统工艺行业的发展。

自微信推出小程序以来，国内对小程序进行开发的研究不少[1-3]，但以传统工艺文化为题材的小程序并不多见。手工艺类的App包括有东家守艺人、手工客、老字号、手艺、在艺、每日故宫、拾翠、艺匠等约二十几款[4]，而许多近年来已经停用或停止更新。北京工业大学在2017年开发了一款App《工艺大师——景泰蓝》，将景泰蓝的纹样设计和烧制过程做成一个款小游戏，设计较为独特，但仅在苹果应用商店可以下载，而且在2018年后就没有更新[5]。腾讯支持的Tag Design公司在2014年和2017年分别开发了两款功能游戏——《折扇》和《榫卯》，以游戏的形式科普传统工艺，建模制作精良，界面设计简洁，但是功能较为单调，可玩性较低[6]。以上几款应用虽然都对传统工艺的普及起到了一定的作用，但均为App形式，占用空间较大，不易传播。而目前以景泰蓝为主题的微信小程序多以售卖景泰蓝制品为主，例如《京景景泰蓝》《国礼景泰蓝》。

本文开发的微信小程序——《匠器——景泰蓝》希望可以填补景泰蓝工艺文化传播小程序的空白。用户可以通过小程序这一简单的方式，了解景泰蓝工艺并欣赏景泰蓝大师的作品，快速找到景泰蓝工艺品的销售平台，同时进行景泰蓝纹样设计的工艺体验。希望通过本平台传播景泰蓝文化，吸引更多的人参与景泰蓝工艺的传承，让景泰蓝这一传统工艺焕发新的活力。

2 小程序功能模块与界面设计

《匠器——景泰蓝》小程序共分为4个功能模块，分别为介绍、工坊、游戏和我的，每个模块下还设有子模块，功能结构图如图1所示。小程序的所有界面均为原创设计，界面风格统一，体现中国传统文化的特色。以下对每个模块的功能和界面设计进行详细介绍。

2.1 介绍模块

介绍模块分为两个部分，一个是工艺模块，另一个是名家名作模块。工艺模块是通过图片、视频和文字相结合的方式，介绍景泰蓝的六步工艺流程——制胎、掐丝、点蓝、烧蓝、磨光、镀金。在此模块中，用户可根据自己的兴趣，通过左右划屏的方式选择任意一个景泰蓝工艺环节，浏览该环节的图片和文字性描述（如图2），同时每个工艺环节还有相应的视频内容（图3）。

在名家名作模块中，用户可以通过左侧边栏滑动选择景泰蓝工艺名家的姓名，右边部分即可对应显示名家及其作品的图片和文字介绍内容。点击某一作品图片或名称，即可浏览作品的详细说明。此界面同时设置收藏功能，如果点击收藏，用户可以在“我的”模块查看收藏的作品信息。

2.2 工坊模块

工坊模块主要提供与景泰蓝相关售卖工坊的小程序跳转链接，在这一模块中链接了一些景泰蓝线上商城小程序（如图6），用户可以跳转至不同的线上商城（如图7），直接完成线上购买。

2.3 游戏模块

在游戏模块中，用户可以通过互动游戏的方式对景泰蓝的纹样设计环节进行体验，通过选择不同的胎型、底纹和主纹，从而得到不同的景泰蓝成品。该模块的流程如图8所示。

用户首先可以选择制作的胎型，有盤子、碗、瓶三类（具体界面如图9），然后可以选择底纹，提供了三种底纹——缠枝纹、祥云纹和回纹（界面如图10）。最后选择主纹，也有三种可以选择——莲花、牡丹、鹤（界面如图11）。每一步的胎体均为三维建模，贴图质感自然。用户可以根据个人的喜好设计出不同的景泰蓝成品，以此体会景泰蓝纹样设计的方法。

2.4 “我的”模块

我的模块即为用户的个人中心，具体又分为游戏记录、收藏、意见和帮助三个模块。游戏记录可以记录每一次游戏后的成品，收藏模块可以查看自己对名家名作内容的收藏，还可以查看本小程序的帮助文档帮助解决使用小程序中出现的问题，用户对本小程序的意见也可在此反馈。在意见和帮助页面用户可以联系到生产商以及开发者，反馈意见和在体验小程序时遇到的问题。

3 微信小程序的开发

小程序的开发是在微信提供的“普通小程序开发工具”中完成的。小程序开发工具运用的是一种云开发技术，云开发是云端一体化的一种后端云服务，免去了移动应用构建中烦琐的服务器搭建和运维，无须创建下载安装与卸载的环境，降低了小程序开发的门槛。

本小程序开发框架如图15所示，分为云函数、项目文件、配置文件三部分。

云函数（cloudfunctions）是在服务端运行的函数，可以获取项目ID和用户ID。本小程序中涉及的收藏功能，就是运用云函数获取微信用户的唯一标识openid。

项目文件（miniprogram）是小程序开发主体，其中主要包括图片文件夹、页面文件夹和全局配置文件。图片文件夹是存储小程序用到的所有图片，但由于本小程序中使用的大量图片由于超过了小程序项目要求的2M的限制，所以将图片分类上传至云存储服务器中。 pages文件夹是处理小程序中所有页面文件，也是本次开发主要开发的部分。每一个页面单独一个文件夹，其中包含与页面相同名称的四个文件，后缀分别为.wxml、.wxss、.js、.json。其中.wxml后缀文件是页面的布局文件，相当于网页的html文件，负责页面结构。.wxss文件是此页面的样式文件，相当于网页的css文件，布局加上样式文件便可以完美复刻出小程序页面设计师画的原型。.js文件为页面逻辑文件，json文件为页面配置文件。

微信小程序主体部分由app.js、app.json、app.wxss 这三个文件组成。其中app.wxss负责整个项目的公共样式，每个页面可通过组件属性调用样式规则，不同页面的样式共同的部分可利用公共样式布局，从而简化项目代码使样式布局更加清晰[7]。app.js文件是小程序脚本代码，负责整个项目的公共事件逻辑处理、全局变量定义、公共方法封装等，此页面中组件的交互事件和功能实现都在js文件中的每一个函数中实现;app.json文件是主要负责全局配置、项目页面组成、窗口表现、页面切换及tab 栏表现，一般用于修改页面标题、确定页面大小等。

配置文件（project.config.json）一般为系统自动生成，主要是对小程序的id、路径设置、语言检索进行设置。

4 结束语

《匠器——景泰蓝》微信小程序初步实现了用微信小程序对景泰蓝工艺文化知识传播的探索与实践。本小程序将景泰蓝文化知识的传播、景泰蓝工坊的推广，互动小游戏融为一体，初步构建了综合性、趣味性、互动性于一体景泰蓝工艺文化传播平台。目前小程序还存在诸多不足，后续将持续开发建设，不断充实内容，提高用户交互体验感，希望能够为景泰蓝文化的传播与传承贡献微薄之力。

5 致谢

感谢北京联合大学艺术学院吴思琪、靳钰秋、周雨穆、司朝飞、穆维森等同学对本小程序所作出的贡献。

参考文献：

[1] 韦玉辉，苏兆伟，潘梦诗.基于微信小程序的服装个性化定制系统设计与实现[J].服装学报，2019，4（5）：460-464.

[2] 吴志攀，袁裕镇，赵金烽，等.基于微信小程序的DIY服装软件开发[J].现代计算机，2020（26）：94-98，104.

[3] 司蕾，杨刚磊，刘旭，等.基于微信小程序的心语心愿系统设计[J].软件，2020，41（9）：81-83.

[4] 汤汪艳.基于用户体验的手工艺微信小程序设计研究[D].杭州：中国美术学院，2018.

[5] 中国网.《工艺大师App——景泰蓝》荣获讲好中国故事创意传播国际大赛一等奖.（2017-11-27）[2020-08-25].http：//news.china.com.cn/2017-11/27/content_41950325.htm.

[6] 新民网.《榫卯》《折扇》科普传统工艺.（2018-03-02）[2020-08-25].http：//xmwb.xinmin.cn/html/2018-03/02/content_15_3.htm.

[7] 李哲，周靈.微信小程序的架构与开发浅析[J].福建电脑，2019，35（12）：66-69.

【通联编辑：谢媛媛】