劉孟涵 劉旭

摘要：本文使用HTLM5技術，構建了基于網絡技術的景泰藍傳統工藝的展示系統，并借助文本、圖片、視頻、動畫等多媒體技術手段，使用戶通過計算機、移動設備就可以全方位、細致地了解景泰藍傳統工藝，足不出戶便可領略景泰藍的魅力。作者希望本研究能對景泰藍傳統工藝的文化傳承和傳播發(fā)揮一定的作用。

關鍵詞：HTML5；可視化；動態(tài)交互

中圖分類號：G434 文獻標識碼：A 論文編號：1674-2117（2019）01-0083-03

引言

進入高中，參加了學校的美術社團，接觸到了有關景泰藍的校本課程，隨著學習的深入，對景泰藍這項工藝的了解越來越深，對其中蘊含的歷史更是深深著迷。景泰藍作為一項非物質文化遺產，其保護與傳承需要我們的努力，可如果讓每個人都實際去制作景泰藍是不太現實的，面對這樣的情況，筆者想，是否可以借助信息技術，利用網絡展示景泰藍的制作，讓大家更好地感受景泰藍的魅力，使其對景泰藍的認識更真切，也對文化的傳承更有責任感。因此，筆者嘗試利用HTML5技術設計景泰藍傳統工藝展示系統，以期對景泰藍進行更好的展示。

景泰藍工藝展示使用H5技術的優(yōu)勢

HTML5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，該標準規(guī)范即為HTLM5（以下簡稱H5）。隨著技術的不斷發(fā)展，H5擁有龐大多樣化特性，終端設備與技術的結合可實現繪圖、音視頻播放、搖一搖、重力感應、擦除、3D視圖及多種互動功能，H5的跨平臺使用是其最大優(yōu)勢。

在景泰藍工藝的展示中利用H5技術具有以下優(yōu)勢：①利用H5的跨平臺技術，可使不同平臺的終端設備與瀏覽者進行交互，實現對景泰藍工藝的多方面了解；②采用繪圖和3D視圖交互場景相結合的表現方式，使瀏覽者既能享受常規(guī)二維繪圖表現，又能感受到3D技術呈現的真實感和沉浸感；③使用音視頻多媒體技術，能營造更為自然和逼真的音視覺體驗；④景泰藍的介紹和制作步驟的具體介紹都配備有實時的語音解說功能，能讓用戶時刻都有身臨其境的真實感。

H5技術在景泰藍工藝展示中的應用

筆者所采用的H5制作工具為Adobe Animate CC 2018，圖片編輯軟件為Adobe Photoshop。

1.搭建總體設計框架

開展H5頁面各個模塊架構的數據收集準備工作，主要包括信息采集、模板原型設計、構思各欄目頁面架構、動畫制作和語音錄入、交互設計、功能實現及后期完善等。

（1）信息采集，是以后各制作階段的基礎，通過查找相關書籍和在互聯網搜集等方式獲取景泰藍工藝相關信息，如圖片、文字介紹等。

（2）模板原型設計，利用第一步搜集到景泰藍相關的各類信息，利用Photoshop進行原型設計。

（3）欄目頁面架構，主要是使用第二步建立好的原型，創(chuàng)建完整的頁面場景，包括文字、圖片等，搭建過程是在Photoshop中完成，最后導入Animate中。

（4）動畫制作和語音錄入，使用Animate制作動畫并鏈入場景，錄入語音講解景泰藍的制作過程。

（5）交互設計，在Animate中實現多種形式展示頁面的交互功能前端。

（6）功能實現，在第五步實現了頁面交互功能的基礎上，給各頁面的布局文字、圖片及上下左右滑動建立按鈕，引導用戶與頁面的交互，該過程中會使用JavaScript來實現，在其中搭建JavaScript后與H5前端進行調用連接，通過手指屏幕滑動或鼠標滾輪調出相應的功能以實現用戶的操作。

（7）后期進行測試和完善，對不滿意的地方進行修改并不斷完善，以達到預期效果。

2.H5技術在景泰藍工藝展示中的設計與實現

（1）使用Photoshop進行頁面原型的搭建與設計。

整體架構設計需簡潔大方，凸顯景泰藍傳統工藝展示系統的主題，并滿足橫屏、豎屏自適應的兩種表現形式，總體的頁面架構原型設計包含五個頁面：首頁、基本介紹、制作工藝、名家名作、交流分享。以首頁設計為例，需要將頁面表現部分完整體現出來，其中包括頁面背景圖、LOGO、主題大圖、文字導航、頁面核心內容文字、導航引導按鈕、當前頁面所屬標記，除頁面的背景圖、主題大圖、內容文字以外的其他頁面表現部分將貫穿在所有頁面設計中。使用Photoshop設計完成后的效果圖如圖1（橫版）、圖2（豎版）所示。

（2）使用Animate搭建H5場景頁面。

界面設計是人與機器之間傳遞和交換信息的媒介，為了更好地表現景泰藍傳統工藝的展示特點，所有場景頁面會根據瀏覽設備自適應瀏覽而呈現出不同的展示樣式，以期帶給瀏覽者更好的視覺享受。多種頁面切換表現形式，充分體現了H5跨平臺的優(yōu)勢，PC端瀏覽者可通過鼠標點擊引導按鈕，也可通過鼠標滾輪上下滾動，移動端設備瀏覽者可手指滑動屏幕。Animate搭建H5場景頁面的界面如上頁圖3、圖4（自適應代碼編寫）所示。

鼠標停留“掃碼分享”按鈕會自動彈出二維碼，可以通過移動設備掃碼識別后瀏覽景泰藍展示系統的所有頁面，如景泰藍制作步驟的視頻及語音講解等，二維碼表現的效果如圖5所示。

（3）景泰藍制作步驟的動畫語音講解。

通過音視頻及文字相結合的表現形式，展示出景泰藍制作的每一步詳細的講解，景泰藍的制作過程大體分為七個步驟：第一步設計胎圖、第二步制作（制胎）、第三步掐絲、第四步點藍、第五步燒藍、第六步磨光、第七步鍍金。頁面中點擊對應的數字可觀看視頻講解。圖6是景泰藍制作步驟的頁面截圖。

結語

基于H5技術對景泰藍傳統工藝的展現形式是綜合的，其貫穿了交互概念，增加了與瀏覽者的互動，各種觸控滑動點擊、搖一搖、重力感應、環(huán)境感應等和設計形成互補關系，給瀏覽者帶來全新的體驗。同時，利用視頻貫穿景泰藍制作的各個階段，使得瀏覽者觀賞感受更為豐富。筆者希望借助H5技術制作的這個展示系統能對景泰藍傳統工藝的文化傳承和傳播發(fā)揮一定的作用。

參考文獻：

[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創(chuàng)客項目計算思維特征研究[D].上海：上海師范大學，2016.

后記

筆者對教育目標分類學有過一點點了解，特別是布魯姆的教育目標分類學，是從認知加工視角，在了解、理解、應用、分析、綜合、評價層次上對事實性知識、概念性知識、程序性知識、元認知知識進行精細化學習加工的過程，但在綜合能力的提升上，一直從邏輯上無法說服自己在這樣的過程中是如何完成的?？吹嚼罾蠋熀蜕欣蠋煹奈恼潞螅一砣婚_朗，決定后面好好研究一下瑪扎諾，更深入了解一下在基于問題解決的學習過程中，如何正確運用教育目標分類學。