H5互動化教學平臺應用研究
——以《UI設計》課程為例

杜蔚苗

（江西應用技術職業學院 江西·贛州 341000）

1 H5互動化教學平臺背景

1.1 國內研究現狀

當前國內關于H5互動教學的研究起步較晚，從2011年開始有關移動教學的研究成果逐漸增多，同時也不斷推出移動課件制作平臺，如：速課網、技能云等。國內在進行相關移動平臺的建設與應用中，由于學習資源單一和管理系統缺乏足夠的交互功能等因素制約，利用H5技術進行開發的研究屈指可數。全球最大學習資源O2O平臺巨師庫（上海），其H5互動學習平臺教學范圍由幼兒至高中，主要課程也只限于語文、數學、英語等少數科目，并未涉及高職及以上學習的內容，對于藝術設計類的學科如《UI設計》課程內容教學更是空白。

1.2 國外研究現狀

國外針對 H5移動平臺系統的開發和建設早已開設了課題，無論是技術支持和系統架構，還是理論指導和平臺設計都開展了系列研究。目前教育軟件的數量不斷增加，各大教育機構和服務商紛紛通過開發移動端教育軟件用來輔助教學。美國硅谷科技公司的開發的兒童手機H5應用“PlayKids”，是以兒童為中心開發出聚合故事，視頻，音頻的多媒體平臺，針對高職教學內容的H5移動平臺的教學較為空白。

2 H5互動教學平臺的特點

與App教學平臺的成本投入相比H5互動平臺的成本較低；具有本地儲存功能和跨平臺打開功能；且對于學生而言，其操作方便簡單；根據移動設備型號以及學生行為，教師可對頁面設計進行相應的響應和調整。使學生無論使用哪種型號的設備，頁面都能夠自動切換其分辨率、圖片尺寸及相關腳本功能等；同時，H5互動教學平臺具有良好的互動性，可調動學生的學習興趣。

2.1 跨平臺

對于H5互動教學平臺來說同時打開播放是毫無壓力的，教師可在電腦中打開教學平臺，學生亦可在手機或PC端上同時打開。H5頁面可以在PC端、移動端、安卓與蘋果iOS等任何一個可兼容的系統中打開，并且可以任意傳輸教學內容。

2.2 本地儲存

本地儲存的功能可減少課堂中的空白時間，提高學習效率。由于手機等移動終端內存有限，因此，學生下載的圖片、軟件都會占用一定的空間。H5的本地儲存功能，讓H5在手機移動端中的打開零負擔，由于H5的本地儲存功能使得H5頁面中所有的元素都不占用手機等移動終端的內存，可減少手機的內存壓力。同時，H5教學平臺無需依賴第三方瀏覽器插件即可創建高級圖形、版式、動畫以及過渡效果，由于本地出儲存，這也使得學生用較少的流量就可以學習體驗到不一樣的視覺聽覺效果，豐富學習的多種形式。

2.3 免插件

通常在PC端或手機端，給學生播放視頻教學案例，必須下載視頻插件或者APP的應用。在H5互動教學平臺中可以任意插入圖像、視頻、音頻等多媒體，使得學生無需下載任何插件便可以輕松流暢的觀看高清教學視頻、教學案例圖文配套音頻的互動感受，讓學生學習體驗更佳。

3 H5互動化教學平臺實踐—以《UI設計》課程為例

UI（User Interface）其本意是指用戶界面，UI設計專門指代從事對軟件人際交互、操作邏輯、界面美觀整體設計工作的人。UI設計從用戶界面來劃分可以分為pc端UI設計和移動端UI設計。H5教學平臺可跨平臺使用的優勢，將對《UI設計》課程相關教學內容從pc端任意切換至移動端。隨著移動設備的廣泛應用，高職《UI設計》課程的教學重點是研究學習移動端的UI設計。因此，H5互動化教學平臺更加適用于移動端UI設計的學習。

3.1 H5互動化教學模式分析

H5互動化教學模式，指的就是在移動設備的幫助下學生能夠在任何時間任何地點進行互動學習的一種“強互動”教學模式。基于互聯網及H5的特征，H5互動化交流平臺給學生提供互動式的學習支撐，給教師提供良好的教學支撐，打破了傳統教學模式中的時間和空間限制，通過使用移動智能設備為教師和學生創造雙向交流的條件。

3.2 H5互動化教學程序構建

在H5互動化教學平臺中將《UI設計》課程教學程序分為以下四個階段:

第一階段，H5試聽互動——導學式激發學生學興趣。利用H5技術中的試聽互動對《UI設計》課程進行導入。目前，高職院校的《UI設計》課程授課普遍忽視產品的用戶體驗、人機交互等諸多方面的引導，而僅關注對產品外觀界面的設計。因此，普遍高職學生對于UI設計的理解較為片面、不能夠系統，學生對UI設計流程及人機交互等實踐體驗式學習較少。H5互動化教學平臺中的試聽互動可以增強UI設計案例中的交互體感；在傳統的UI設計教學案例中以靜音、靜態界面設計案例居多，并且動態案例演示需要借助其它平臺，教學演示上較為繁瑣。因此，在H5的互動化教學平臺中可嵌入一些UI動態+音效的設計案例，學生進入教學平臺后可自主體驗UI界面的交互功能。

第二階段，H5雙屏互動——競賽式引導學生深入學習。H5雙屏互動是指兩臺移動設備在保證有網絡的前提下，通過其中一臺設備上發出的指令，如：掃描屏幕中二維碼，用另外一臺移動設備掃碼后便可進行兩臺移動設備同步互動。在課程理論教學中，教師可利用雙屏互動功能把UI設計中的理論知識部分整理成知識思維導圖通過雙屏互動或多屏互動進行有效傳達；在課程實踐教學中，教師利用H5雙屏互動技術設置小游戲，以競賽的方式讓學生參與教學活動，讓學生提升對UI設計課程的學習興趣，同時引導學生對課程案例的深入學習；

第三階段，H5場景模擬——技能操作式強化教學內容。H5場景模擬一般界面會營造出一個特定場景，增強用戶體驗感。目前，制作UI設計原型圖的軟件有較多選擇,如：Axure RP、Sketch、AdobeXD等，這些軟件基本需要在電腦中操作較為方便。H5互動化教學平臺中的場景模擬可對UI設計實踐項目進行模擬，例如：對圖標的選擇、顏色的搭配、字號大小的適用性等方面，學生可以在該平臺中對UI設計實踐進行項目化練習。

第四階段，H5多人互動——強互動式教學交流總結。在《UI設計》課程每一單元學習完成后，學生可在H5互動化教學平臺上對教師提出意見或交流學習體會，既是學生與學生、學生與教師之間的交流平臺，同時也能幫助教師進一步改善教學方式方法，是教師重組教學內容的依據。

3.3 H5互動化教學考核標準

H5互動化教學平臺是要依托互聯網才能順利進行教學與學習。針對目前的高職教育現狀，最終學習考核時不能完全依賴于互聯網教學平臺，對于學生學習成果的考核標準應當更加全面，結合線上線下的情況、個人與團隊、平時作業與期末考核等因素，較為系統的把《UI設計》課程理論內容學習與項目實踐融合在一起，綜合考察學生學習情況。因此，可從以下幾個方面制定考核標準：

第一，小組與個人相結合。UI設計本身也是一門系統性的科目，涉及到交互、界面、動效等，要完成一項UI設計需要學會團隊協作，在平時的教學中，教師應該讓學生以小組為單位，共同協作，增強團隊協作意識；第二，平時互動與期末考核相結合。學習平臺后臺可顯示學生課程參與度，完成作業等情況可作為學生平時成績的一項依據。教師利用 H5互動化教學平臺對學生學習情況進行線上期末考核。第三，線上與線下相結合。線上考核結束后，教師可進入后臺進行評分，被考核學生可以把自己的考核作品分享給其它同學，學生之間也可互評分、留言并轉發分享優秀的作品。課堂表現、考勤等可作為線下考核依據。

4 總結

H5互動化教學模式，簡單來講就是學習者之間以及和教師之間進行的雙向交流模式。利用H5互動化的技術，改變傳統教學方式，更加注重教學“互動性”，不僅實現了多媒介融合實時獲取知識的機制，而且在強互動使能下提高知識的汲取率。快速的更新知識已成為學習的一種主要模式，移動互聯網的建立為這種學習模式提供了良好的內部和外部環境。學生通過該平臺學習知識、分享交流能夠幫助學生更了解自己，能培養學生自主學習能動性；教師在該平臺中分享教學資源、通過學生在平臺上的反饋來調整教學思路和方法，可提升教學質量。