本期推荐
本栏目责任编辑：唐一东
景泰蓝工艺文化传播小程序的设计与开发
吴帆1，张文怡2，刘畅2，方子仪1
（1.北京联合大学艺术学院，北京100101；2.北京联合大学机器人学院，北京100101）
摘要：自主设计开发了一个小程序《匠器——景泰蓝》，该小程序具有传播景泰蓝工艺文化知识、推广景泰蓝工坊、体
验景泰蓝工艺等功能。希望依托小程序独有的传播优势，吸引更多的人关注和了解景泰蓝传统工艺，促进景泰蓝工艺文化的传播和传统工艺行业的发展。文中对小程序的功能与界面设计、开发实现技术进行了详细的介绍，并展示了小程序成品效果。该小程序达到了综合性、趣味性和互动性的设计目标，实现了移动互联网+传统工艺的探索与实践。关键词：景泰蓝工艺文化；小程序；功能设计；界面设计；软件开发中图分类号：TP311.1；J526.2
文献标识码：A
文章编号：1009-3044(2021)12-0001-03
开放科学（资源服务）标识码（OSID ）：
1背景
景泰蓝是北京代表性工艺美术品种“燕京八绝”之一，其制作工艺入选国家非物质文化遗产名录。在移动互联网时代，手机无疑是信息传播最有效的方式之一，而小程序相较于App 又具有体量轻、访问方便、开发成本低等特点，因此本文开发了一个小程序《匠器——景泰蓝》，希望能够吸引更多的人关注和了解景泰蓝传统工艺，促进景泰蓝工艺文化的传播和传统工艺行业的发展。
自推出小程序以来，国内对小程序进行开发的研究不少[1-3]，但以传统工艺文化为题材的小程序并不多见。手工艺类的App 包括有东家守艺人、手工客、老字号、手艺、在艺、每日故宫、拾翠、艺匠等约二十几款[4]，而许多近年来已经停用或停止更新。北京工业大学在2017年开发了一款App 《工艺大师——景泰蓝》，将景泰蓝的纹样设计和烧制过程做成一个款小游戏，设计较为独特，但仅在苹果应用商店可以下载，而且在2018年
后就没有更新[5]
。腾讯支持的Tag Design 公司在2014年和2017年分别开发了两款功能游戏——《折扇》和《榫卯》，以游戏的形式科普传统工艺，建模制作精良，界面设计简洁，但是功能较为单调，可玩性较低[6]。以上几款应用虽然都对传统工艺的普及起到了一定的作用，但均为App 形式，占用空间较大，不易传播。而目前以景泰蓝为主题的小程序多以售卖景泰蓝制品为主，例如《京景景泰蓝》《
国礼景泰蓝》。
本文开发的小程序——《匠器——景泰蓝》希望可以填补景泰蓝工艺文化传播小程序的空白。用户可以通过小程序这一简单的方式，了解景泰蓝工艺并欣赏景泰蓝大师的作品，快速到景泰蓝工艺品的
销售平台，同时进行景泰蓝纹样设计的工艺体验。希望通过本平台传播景泰蓝文化，吸引更多
的人参与景泰蓝工艺的传承，让景泰蓝这一传统工艺焕发新的
活力。
2小程序功能模块与界面设计
《匠器——景泰蓝》小程序共分为4个功能模块，分别为介绍、工坊、游戏和我的，每个模块下还设有子模块，功能结构图如图1所示。小程序的所有界面均为原创设计，界面风格统一，体现中国传统文化的特。以下对每个模块的功能和界面设计进行详细介绍。
图1小程序功能结构图
2.1介绍模块
介绍模块分为两个部分，一个是工艺模块，另一个是名家名作模块。工艺模块是通过图片、视频和文字相结合的方式，介绍景泰蓝的六步工艺流程——制胎、掐丝、点蓝、烧蓝、磨光、镀金。在此模块中，用户可根据自己的兴趣，通过左右划屏的方式选择任意一个景泰蓝工艺环节，浏览该环节的图片和文字性描述（如图2），同时每个工艺环节还有相应的视频内
收稿日期：2020-12-26
基金项目：2019北京市高等学校高水平人才交叉培养“实培计划”毕业设计（创业类）项目（项目编号：京教函〔2019〕485号）；2020年
北京联合大学“启明星”大学生科技创新创业项目（项目编号：202011417007）
作者简介：吴帆（1980—），女，浙江宁波人，副教授，博士，研究方向为数字媒体艺术与技术；张文怡（1999—），女，北京人，本科在读；
刘畅（1978—），女，河南安阳人，副教授，博士，研究方向为软件工程；方子仪（1999—），女，湖北大冶人，本科在读。
1
本栏目责任编辑：唐一东
本期推荐
Computer Knowledge and Technology 电脑知识与技术第17卷第12期(2021年4月)
容（图3）
。
图2工艺图文介绍图3工艺视频介绍在名家名作模块中，用户可以通过左侧边栏滑动选择景泰蓝工艺名家的姓名，右边部分即可对应显示名家及其作品的图片和文字介绍内容。点击某一作品图片或名称，即可浏览作品的详细说明。此界面同时设置收藏功能，如果点击收藏，用户可以在“我的”
模块查看收藏的作品信息。
图4名家名作模块图5作品详细介绍
2.2工坊模块
工坊模块主要提供与景泰蓝相关售卖工坊的小程序跳转
链接，在这一模块中链接了一些景泰蓝线上商城小程序（如图6），用户可以跳转至不同的线上商城（如图7），直接完成线上
购买。
图6工坊模块主界面图7《京景景泰蓝》小程序界面
2.3游戏模块
在游戏模块中，用户可以通过互动游戏的方式对景泰蓝的
纹样设计环节进行体验，通过选择不同的胎型、底纹和主纹，从而得到不同的景泰蓝成品。该模块的流程如图8
所示。
图8小游戏流程图
用户首先可以选择制作的胎型，有盘子、碗、瓶三类（具体界面如图9），然后可以选择底纹，提供了三种底纹——缠枝纹、祥云纹和回纹（界面如图10）。最后选择主纹，也有三种可以选择——莲花、牡丹、鹤（界面如图11）。每一步的胎体均为三维建模，贴图质感自然。用户可以根据个人的喜好设计出不同的景泰蓝成品，
以此体会景泰蓝纹样设计的方法。
图9选择胎型图10选择底纹图择主纹
2.4“我的”模块
我的模块即为用户的个人中心，具体又分为游戏记录、收藏、意见和帮助三个模块。游戏记录可以记录每一次游戏后的成品，收藏模块可以查看自己对名家名作内容的收藏，还可以查看本小程序的帮助文档帮助解决使用小程序中出现的问题，用户对本小程序的意见也可在此反馈。在意见和帮助页面用户可以联系到生产商以及开发者，反馈意见和在体验小程序时遇到的问题。
2
本期推荐
本栏目责任编辑：唐一东Computer Knowledge and Technology 电脑知识与技术
第17卷第12期(2021年4月
)
图12我的页面图13游戏记录页面图14我的收藏
3小程序的开发
小程序的开发是在提供的“普通小程序开发工具”中完成的。小程序开发工具运用的是一种云开发技术，云开发是云端一体化的一种后端云服务，免去了移动应用构建中烦琐的服务器搭建和运维，无须创建下载安装与卸载的环境，降低了小程序开发的门槛。
本小程序开发框架如图15所示，分为云函数、项目文件、
配置文件三部分。
图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 栏表现，一般用于修改页面标题、确定页面大小等。
配置文件（fig.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].news.china/2017-11/27/content_41950325.htm.[6]新民网.《榫卯》《折扇》科普传统工艺.(2018-03-02)[2020-08-25].xmwb.xinmin/html/2018-03/02/content_15_3.htm.
[7]李哲，周灵.小程序的架构与开发浅析[J].福建电脑,2019,35(12):66-69.
【通联编辑：谢媛媛】
3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。