景泰藍(lán)工藝文化傳播微信小程序的設(shè)計與開發(fā)

吳帆　張文怡　劉暢　方子儀

摘要：自主設(shè)計開發(fā)了一個微信小程序《匠器——景泰藍(lán)》，該小程序具有傳播景泰藍(lán)工藝文化知識、推廣景泰藍(lán)工坊、體驗景泰藍(lán)工藝等功能。希望依托微信小程序獨有的傳播優(yōu)勢，吸引更多的人關(guān)注和了解景泰藍(lán)傳統(tǒng)工藝，促進(jìn)景泰藍(lán)工藝文化的傳播和傳統(tǒng)工藝行業(yè)的發(fā)展。文中對小程序的功能與界面設(shè)計、開發(fā)實現(xiàn)技術(shù)進(jìn)行了詳細(xì)的介紹，并展示了小程序成品效果。該小程序達(dá)到了綜合性、趣味性和互動性的設(shè)計目標(biāo)，實現(xiàn)了移動互聯(lián)網(wǎng)+傳統(tǒng)工藝的探索與實踐。

關(guān)鍵詞：景泰藍(lán)工藝文化;微信小程序;功能設(shè)計;界面設(shè)計;軟件開發(fā)

中圖分類號：TP311.1;J526.2? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）12-0001-03

1 背景

景泰藍(lán)是北京代表性工藝美術(shù)品種“燕京八絕”之一，其制作工藝入選國家非物質(zhì)文化遺產(chǎn)名錄。在移動互聯(lián)網(wǎng)時代，手機(jī)無疑是信息傳播最有效的方式之一，而微信小程序相較于App又具有體量輕、訪問方便、開發(fā)成本低等特點，因此本文開發(fā)了一個微信小程序《匠器——景泰藍(lán)》，希望能夠吸引更多的人關(guān)注和了解景泰藍(lán)傳統(tǒng)工藝，促進(jìn)景泰藍(lán)工藝文化的傳播和傳統(tǒng)工藝行業(yè)的發(fā)展。

自微信推出小程序以來，國內(nèi)對小程序進(jìn)行開發(fā)的研究不少[1-3]，但以傳統(tǒng)工藝文化為題材的小程序并不多見。手工藝類的App包括有東家守藝人、手工客、老字號、手藝、在藝、每日故宮、拾翠、藝匠等約二十幾款[4]，而許多近年來已經(jīng)停用或停止更新。北京工業(yè)大學(xué)在2017年開發(fā)了一款A(yù)pp《工藝大師——景泰藍(lán)》，將景泰藍(lán)的紋樣設(shè)計和燒制過程做成一個款小游戲，設(shè)計較為獨特，但僅在蘋果應(yīng)用商店可以下載，而且在2018年后就沒有更新[5]。騰訊支持的Tag Design公司在2014年和2017年分別開發(fā)了兩款功能游戲——《折扇》和《榫卯》，以游戲的形式科普傳統(tǒng)工藝，建模制作精良，界面設(shè)計簡潔，但是功能較為單調(diào)，可玩性較低[6]。以上幾款應(yīng)用雖然都對傳統(tǒng)工藝的普及起到了一定的作用，但均為App形式，占用空間較大，不易傳播。而目前以景泰藍(lán)為主題的微信小程序多以售賣景泰藍(lán)制品為主，例如《京景景泰藍(lán)》《國禮景泰藍(lán)》。

本文開發(fā)的微信小程序——《匠器——景泰藍(lán)》希望可以填補(bǔ)景泰藍(lán)工藝文化傳播小程序的空白。用戶可以通過小程序這一簡單的方式，了解景泰藍(lán)工藝并欣賞景泰藍(lán)大師的作品，快速找到景泰藍(lán)工藝品的銷售平臺，同時進(jìn)行景泰藍(lán)紋樣設(shè)計的工藝體驗。希望通過本平臺傳播景泰藍(lán)文化，吸引更多的人參與景泰藍(lán)工藝的傳承，讓景泰藍(lán)這一傳統(tǒng)工藝煥發(fā)新的活力。

2 小程序功能模塊與界面設(shè)計

《匠器——景泰藍(lán)》小程序共分為4個功能模塊，分別為介紹、工坊、游戲和我的，每個模塊下還設(shè)有子模塊，功能結(jié)構(gòu)圖如圖1所示。小程序的所有界面均為原創(chuàng)設(shè)計，界面風(fēng)格統(tǒng)一，體現(xiàn)中國傳統(tǒng)文化的特色。以下對每個模塊的功能和界面設(shè)計進(jìn)行詳細(xì)介紹。

2.1 介紹模塊

介紹模塊分為兩個部分，一個是工藝模塊，另一個是名家名作模塊。工藝模塊是通過圖片、視頻和文字相結(jié)合的方式，介紹景泰藍(lán)的六步工藝流程——制胎、掐絲、點藍(lán)、燒藍(lán)、磨光、鍍金。在此模塊中，用戶可根據(jù)自己的興趣，通過左右劃屏的方式選擇任意一個景泰藍(lán)工藝環(huán)節(jié)，瀏覽該環(huán)節(jié)的圖片和文字性描述（如圖2），同時每個工藝環(huán)節(jié)還有相應(yīng)的視頻內(nèi)容（圖3）。

在名家名作模塊中，用戶可以通過左側(cè)邊欄滑動選擇景泰藍(lán)工藝名家的姓名，右邊部分即可對應(yīng)顯示名家及其作品的圖片和文字介紹內(nèi)容。點擊某一作品圖片或名稱，即可瀏覽作品的詳細(xì)說明。此界面同時設(shè)置收藏功能，如果點擊收藏，用戶可以在“我的”模塊查看收藏的作品信息。

2.2 工坊模塊

工坊模塊主要提供與景泰藍(lán)相關(guān)售賣工坊的小程序跳轉(zhuǎn)鏈接，在這一模塊中鏈接了一些景泰藍(lán)線上商城小程序（如圖6），用戶可以跳轉(zhuǎn)至不同的線上商城（如圖7），直接完成線上購買。

2.3 游戲模塊

在游戲模塊中，用戶可以通過互動游戲的方式對景泰藍(lán)的紋樣設(shè)計環(huán)節(jié)進(jìn)行體驗，通過選擇不同的胎型、底紋和主紋，從而得到不同的景泰藍(lán)成品。該模塊的流程如圖8所示。

用戶首先可以選擇制作的胎型，有盤子、碗、瓶三類（具體界面如圖9），然后可以選擇底紋，提供了三種底紋——纏枝紋、祥云紋和回紋（界面如圖10）。最后選擇主紋，也有三種可以選擇——蓮花、牡丹、鶴（界面如圖11）。每一步的胎體均為三維建模，貼圖質(zhì)感自然。用戶可以根據(jù)個人的喜好設(shè)計出不同的景泰藍(lán)成品，以此體會景泰藍(lán)紋樣設(shè)計的方法。

2.4 “我的”模塊

我的模塊即為用戶的個人中心，具體又分為游戲記錄、收藏、意見和幫助三個模塊。游戲記錄可以記錄每一次游戲后的成品，收藏模塊可以查看自己對名家名作內(nèi)容的收藏，還可以查看本小程序的幫助文檔幫助解決使用小程序中出現(xiàn)的問題，用戶對本小程序的意見也可在此反饋。在意見和幫助頁面用戶可以聯(lián)系到生產(chǎn)商以及開發(fā)者，反饋意見和在體驗小程序時遇到的問題。

3 微信小程序的開發(fā)

小程序的開發(fā)是在微信提供的“普通小程序開發(fā)工具”中完成的。小程序開發(fā)工具運用的是一種云開發(fā)技術(shù)，云開發(fā)是云端一體化的一種后端云服務(wù)，免去了移動應(yīng)用構(gòu)建中煩瑣的服務(wù)器搭建和運維，無須創(chuàng)建下載安裝與卸載的環(huán)境，降低了小程序開發(fā)的門檻。

本小程序開發(fā)框架如圖15所示，分為云函數(shù)、項目文件、配置文件三部分。

云函數(shù)（cloudfunctions）是在服務(wù)端運行的函數(shù)，可以獲取項目ID和用戶ID。本小程序中涉及的收藏功能，就是運用云函數(shù)獲取微信用戶的唯一標(biāo)識openid。

項目文件（miniprogram）是小程序開發(fā)主體，其中主要包括圖片文件夾、頁面文件夾和全局配置文件。圖片文件夾是存儲小程序用到的所有圖片，但由于本小程序中使用的大量圖片由于超過了小程序項目要求的2M的限制，所以將圖片分類上傳至云存儲服務(wù)器中。 pages文件夾是處理小程序中所有頁面文件，也是本次開發(fā)主要開發(fā)的部分。每一個頁面單獨一個文件夾，其中包含與頁面相同名稱的四個文件，后綴分別為.wxml、.wxss、.js、.json。其中.wxml后綴文件是頁面的布局文件，相當(dāng)于網(wǎng)頁的html文件，負(fù)責(zé)頁面結(jié)構(gòu)。.wxss文件是此頁面的樣式文件，相當(dāng)于網(wǎng)頁的css文件，布局加上樣式文件便可以完美復(fù)刻出小程序頁面設(shè)計師畫的原型。.js文件為頁面邏輯文件，json文件為頁面配置文件。

微信小程序主體部分由app.js、app.json、app.wxss 這三個文件組成。其中app.wxss負(fù)責(zé)整個項目的公共樣式，每個頁面可通過組件屬性調(diào)用樣式規(guī)則，不同頁面的樣式共同的部分可利用公共樣式布局，從而簡化項目代碼使樣式布局更加清晰[7]。app.js文件是小程序腳本代碼，負(fù)責(zé)整個項目的公共事件邏輯處理、全局變量定義、公共方法封裝等，此頁面中組件的交互事件和功能實現(xiàn)都在js文件中的每一個函數(shù)中實現(xiàn);app.json文件是主要負(fù)責(zé)全局配置、項目頁面組成、窗口表現(xiàn)、頁面切換及tab 欄表現(xiàn)，一般用于修改頁面標(biāo)題、確定頁面大小等。

配置文件（project.config.json）一般為系統(tǒng)自動生成，主要是對小程序的id、路徑設(shè)置、語言檢索進(jìn)行設(shè)置。

4 結(jié)束語

《匠器——景泰藍(lán)》微信小程序初步實現(xiàn)了用微信小程序?qū)疤┧{(lán)工藝文化知識傳播的探索與實踐。本小程序?qū)⒕疤┧{(lán)文化知識的傳播、景泰藍(lán)工坊的推廣，互動小游戲融為一體，初步構(gòu)建了綜合性、趣味性、互動性于一體景泰藍(lán)工藝文化傳播平臺。目前小程序還存在諸多不足，后續(xù)將持續(xù)開發(fā)建設(shè)，不斷充實內(nèi)容，提高用戶交互體驗感，希望能夠為景泰藍(lán)文化的傳播與傳承貢獻(xiàn)微薄之力。

5 致謝

感謝北京聯(lián)合大學(xué)藝術(shù)學(xué)院吳思琪、靳鈺秋、周雨穆、司朝飛、穆維森等同學(xué)對本小程序所作出的貢獻(xiàn)。

參考文獻(xiàn)：

[1] 韋玉輝，蘇兆偉，潘夢詩.基于微信小程序的服裝個性化定制系統(tǒng)設(shè)計與實現(xiàn)[J].服裝學(xué)報，2019，4（5）：460-464.

[2] 吳志攀，袁裕鎮(zhèn)，趙金烽，等.基于微信小程序的DIY服裝軟件開發(fā)[J].現(xiàn)代計算機(jī)，2020（26）：94-98，104.

[3] 司蕾，楊剛磊，劉旭，等.基于微信小程序的心語心愿系統(tǒng)設(shè)計[J].軟件，2020，41（9）：81-83.

[4] 湯汪艷.基于用戶體驗的手工藝微信小程序設(shè)計研究[D].杭州：中國美術(shù)學(xué)院，2018.

[5] 中國網(wǎng).《工藝大師App——景泰藍(lán)》榮獲講好中國故事創(chuàng)意傳播國際大賽一等獎.（2017-11-27）[2020-08-25].http：//news.china.com.cn/2017-11/27/content_41950325.htm.

[6] 新民網(wǎng).《榫卯》《折扇》科普傳統(tǒng)工藝.（2018-03-02）[2020-08-25].http：//xmwb.xinmin.cn/html/2018-03/02/content_15_3.htm.

[7] 李哲，周靈.微信小程序的架構(gòu)與開發(fā)淺析[J].福建電腦，2019，35（12）：66-69.

【通聯(lián)編輯：謝媛媛】