H5互動化教學(xué)平臺應(yīng)用研究
——以《UI設(shè)計》課程為例

杜蔚苗

（江西應(yīng)用技術(shù)職業(yè)學(xué)院 江西·贛州 341000）

1 H5互動化教學(xué)平臺背景

1.1 國內(nèi)研究現(xiàn)狀

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

1.2 國外研究現(xiàn)狀

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

2 H5互動教學(xué)平臺的特點(diǎn)

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

2.1 跨平臺

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

2.2 本地儲存

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

2.3 免插件

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

3 H5互動化教學(xué)平臺實(shí)踐—以《UI設(shè)計》課程為例

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

3.1 H5互動化教學(xué)模式分析

H5互動化教學(xué)模式，指的就是在移動設(shè)備的幫助下學(xué)生能夠在任何時間任何地點(diǎn)進(jìn)行互動學(xué)習(xí)的一種“強(qiáng)互動”教學(xué)模式。基于互聯(lián)網(wǎng)及H5的特征，H5互動化交流平臺給學(xué)生提供互動式的學(xué)習(xí)支撐，給教師提供良好的教學(xué)支撐，打破了傳統(tǒng)教學(xué)模式中的時間和空間限制，通過使用移動智能設(shè)備為教師和學(xué)生創(chuàng)造雙向交流的條件。

3.2 H5互動化教學(xué)程序構(gòu)建

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

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

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

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

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

3.3 H5互動化教學(xué)考核標(biāo)準(zhǔn)

H5互動化教學(xué)平臺是要依托互聯(lián)網(wǎng)才能順利進(jìn)行教學(xué)與學(xué)習(xí)。針對目前的高職教育現(xiàn)狀，最終學(xué)習(xí)考核時不能完全依賴于互聯(lián)網(wǎng)教學(xué)平臺，對于學(xué)生學(xué)習(xí)成果的考核標(biāo)準(zhǔn)應(yīng)當(dāng)更加全面，結(jié)合線上線下的情況、個人與團(tuán)隊(duì)、平時作業(yè)與期末考核等因素，較為系統(tǒng)的把《UI設(shè)計》課程理論內(nèi)容學(xué)習(xí)與項(xiàng)目實(shí)踐融合在一起，綜合考察學(xué)生學(xué)習(xí)情況。因此，可從以下幾個方面制定考核標(biāo)準(zhǔn)：

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

4 總結(jié)

H5互動化教學(xué)模式，簡單來講就是學(xué)習(xí)者之間以及和教師之間進(jìn)行的雙向交流模式。利用H5互動化的技術(shù)，改變傳統(tǒng)教學(xué)方式，更加注重教學(xué)“互動性”，不僅實(shí)現(xiàn)了多媒介融合實(shí)時獲取知識的機(jī)制，而且在強(qiáng)互動使能下提高知識的汲取率?？焖俚母轮R已成為學(xué)習(xí)的一種主要模式，移動互聯(lián)網(wǎng)的建立為這種學(xué)習(xí)模式提供了良好的內(nèi)部和外部環(huán)境。學(xué)生通過該平臺學(xué)習(xí)知識、分享交流能夠幫助學(xué)生更了解自己，能培養(yǎng)學(xué)生自主學(xué)習(xí)能動性；教師在該平臺中分享教學(xué)資源、通過學(xué)生在平臺上的反饋來調(diào)整教學(xué)思路和方法，可提升教學(xué)質(zhì)量。