基于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.

后記

筆者對教育目標分類學有過一點點了解，特別是布魯姆的教育目標分類學，是從認知加工視角，在了解、理解、應用、分析、綜合、評價層次上對事實性知識、概念性知識、程序性知識、元認知知識進行精細化學習加工的過程，但在綜合能力的提升上，一直從邏輯上無法說服自己在這樣的過程中是如何完成的。看到李老師和尚老師的文章后，我豁然開朗，決定后面好好研究一下瑪扎諾，更深入了解一下在基于問題解決的學習過程中，如何正確運用教育目標分類學。