H5移動微課的創(chuàng)新設(shè)計與快速開發(fā)

莫葵鳳 鄭小軍 朱育賢 梁秋遠(yuǎn)

摘 要：H5移動微課是一種支持移動學(xué)習(xí)的微學(xué)習(xí)資源，帶給學(xué)習(xí)者良好的學(xué)習(xí)體驗和學(xué)習(xí)效果。文章基于大量H5移動微課的觀摩、考察和案例研究，闡述了H5移動微課的現(xiàn)狀及創(chuàng)新設(shè)計與快速開發(fā)的方法，并且從素材庫、收費情況、效果、操作難易程度（專業(yè)、非專業(yè)）和推薦等級等五個維度，對易企秀、絢星微課等8款H5移動微課開發(fā)工具（平臺）進(jìn)行具體評級分析。

關(guān)鍵詞：H5；移動微課；創(chuàng)新設(shè)計；快速開發(fā)；移動學(xué)習(xí)；工具（平臺）評級

中圖分類號：G434 文獻(xiàn)標(biāo)志碼：A 文章編號：1673-8454（2019）04-0034-03

隨著移動互聯(lián)網(wǎng)技術(shù)的快速發(fā)展和移動終端設(shè)備的迅猛普及，移動學(xué)習(xí)成為當(dāng)下流行的學(xué)習(xí)方式之一。基于HTML5技術(shù)開發(fā)H5移動微課，以滿足日益增長的移動學(xué)習(xí)需求，提升在線學(xué)習(xí)體驗和學(xué)習(xí)效果，成為個性化、創(chuàng)新型微課開發(fā)的新景觀、新趨勢。那么，H5移動微課的現(xiàn)狀如何？如何創(chuàng)新設(shè)計和快速開發(fā)H5移動微課？

一、H5移動微課的現(xiàn)狀

隨著HTML5技術(shù)的發(fā)展，目前涌現(xiàn)了一大批簡單易學(xué)、效果很好的H5開發(fā)平臺，用戶只需要簡單地進(jìn)行模板套用替換，就能輕松設(shè)計并制作出頁面效果不錯的H5移動微課作品。

在教育行業(yè)，H5是一種用來進(jìn)行宣傳展示的工具和教育教學(xué)的新形式，非常適合于移動互聯(lián)網(wǎng)時代的教育教學(xué)需求。移動學(xué)習(xí)是未來教育的大趨勢，而掌上微課（如H5移動微課）則讓學(xué)生離學(xué)習(xí)更進(jìn)一步。學(xué)生可以利用碎片化時間，通過移動智能終端學(xué)習(xí)H5移動微課平臺的知識點，延伸了課堂教學(xué)，擴展了學(xué)習(xí)時空。

目前很多平臺雖然看上去像一款只是制作前端H5的SaaS產(chǎn)品，但事實上它們集成了“前后端”所需的幾乎所有功能，可實現(xiàn)零代碼制作各種H5作品，功能非常強大。如：3D游戲、VR場景（全景、一鏡到底）、支持物理引擎（如碰撞游戲）、Web App支持（如手機應(yīng)用、小產(chǎn)品）、高效渲染引擎、自適應(yīng)網(wǎng)站、自建直播頻道、大屏智強解決方案、支持上千種自定義動效、支持Web Socket、支持Web GL、支持PSD直接導(dǎo)入、支持OBJ文件導(dǎo)入等。

這些平臺又是一個“云計算平臺”，可以根據(jù)用戶的實際業(yè)務(wù)需求，動態(tài)分配計算、存儲、數(shù)據(jù)庫、帶寬資源，保證數(shù)據(jù)安全性的同時，滿足各種突發(fā)流量暴增的需求。總之，利用這些優(yōu)勢可以比較輕松地進(jìn)行作品的創(chuàng)新創(chuàng)意設(shè)計。

二、H5移動微課的創(chuàng)新設(shè)計

利用H5強大的功能優(yōu)勢，可以實現(xiàn)各種類型的場景、效果以及呈現(xiàn)/表現(xiàn)形式，使H5移動微課在平臺、載體和形式上具有一定的創(chuàng)新性。但要設(shè)計并開發(fā)出優(yōu)秀的H5移動微課，仍需要加強選題、創(chuàng)意、教學(xué)設(shè)計和交互設(shè)計。

iH5微課《填詞猜成語》屬于游戲類微課，主要參考了游戲通關(guān)的思路，提升學(xué)習(xí)參與度，從而帶來更好的學(xué)習(xí)體驗，以增加教學(xué)的趣味性，激發(fā)學(xué)習(xí)動機。其針對大家都喜歡猜謎語的特點，基于用戶交互體驗的理念，利用H5的強交互等功能制作的微課，可點擊查看分?jǐn)?shù)排行榜。學(xué)生在游戲《填詞猜成語》環(huán)境下實現(xiàn)在線練習(xí)，在潛移默化中感受學(xué)習(xí)的樂趣、學(xué)會動腦積極思考，在一次次的挑戰(zhàn)中感受到成功、體驗到快樂，從而提高自主學(xué)習(xí)能力。

在開始游戲后，每道題都設(shè)計了時間限制，學(xué)生必須在規(guī)定的時間內(nèi)完成，短時間內(nèi)對觀察力、思考反應(yīng)能力的考驗，可以促進(jìn)學(xué)生觀察力、記憶力的發(fā)展。該微課是在一個數(shù)據(jù)庫中實現(xiàn)的，包括用戶數(shù)據(jù)（保留用戶參與數(shù)據(jù)）、文字（隨機出現(xiàn)的選擇文字）、成語庫（成語庫直接添加即可），利用H5強大的功能、零代碼制作實現(xiàn)。因為需要獲取頭像進(jìn)行排名，還需用到數(shù)據(jù)庫提交、輸出、更新，循環(huán)事件、復(fù)制事件，用數(shù)組進(jìn)行判斷等功能。此類微課還有《你畫我猜》《王者融合》等，其中《王者融合》的制作比較復(fù)雜，主要由微信語音識別、AI人臉融合、AI聲音融合組成，通過與騰訊AI平臺對接，實現(xiàn)聲貌融合進(jìn)行分享。

iH5微課《銀河系唯美全景》將九大行星的介紹（知識內(nèi)容）放在銀河系場景里，非常生動直觀，知識內(nèi)容的設(shè)計、呈現(xiàn)與表達(dá)上都進(jìn)行了大膽創(chuàng)新。它屬于VR場景（全景/3D/一鏡到底）類H5移動微課，即可以360°轉(zhuǎn)頭看到不同角度的內(nèi)容，具有景深、動態(tài)圖像、聲音等，類似于在電影院看3D電影的感覺。豐富的表現(xiàn)力和良好的交互，極大地激發(fā)了學(xué)生的主動參與熱情。

首先，通過動態(tài)唯美的銀河系場景激發(fā)學(xué)習(xí)者興趣，根據(jù)點擊星球查看介紹，引導(dǎo)學(xué)習(xí)者進(jìn)行新內(nèi)容（九大行星）的學(xué)習(xí)。通過觸發(fā)器點擊觸發(fā)星球，就會出現(xiàn)星球的相關(guān)介紹，點擊拖拽實現(xiàn)星球之間的運轉(zhuǎn)，就如鏡頭的推拉搖移，從而實現(xiàn)一鏡到底的效果，逼真的銀河系讓人在屏幕前有身臨其境的感覺。有些知識內(nèi)容（如地球、銀河系、宇宙等地理知識）就是對三維空間、四維空間的認(rèn)識，如果通過直觀的視覺化全景/3D場景無死角、無縫展示知識點，可以使知識得以高效表達(dá)，彌補了傳統(tǒng)微課在二維空間進(jìn)行知識表達(dá)的不足。它不受時間、空間和地域的限制，讓人可以左右上下360度任意觀看動態(tài)視頻，使人產(chǎn)生一種真正意義上身臨其境的感覺，直接感受與認(rèn)識降低了認(rèn)知負(fù)荷，使學(xué)生學(xué)得輕松、易于理解和掌握。

全景視頻對場景的再現(xiàn)更加全面，使人產(chǎn)生身臨其境的感覺，因此常常用作展示之用途。如用360全景來展示旅游教學(xué)、數(shù)字展館、數(shù)字城市、文物古跡、室內(nèi)設(shè)計等。

絢星微課的《安全生產(chǎn)十大定律——破窗效應(yīng)》非常符合微課教學(xué)設(shè)計的KFC模型：激發(fā)—引導(dǎo)—強化[1]。首先，通過一個破窗實驗情境作為導(dǎo)入，順理成章地引出破窗效應(yīng)。其次，講解新知識，包括破窗效應(yīng)的誘發(fā)因素、后果、預(yù)防、應(yīng)用以及破窗效應(yīng)的破解等。在破窗效應(yīng)的應(yīng)用中，通過實際生活中的例子“紐約市交通警察局改善地鐵犯罪的視頻”，講解如何消除習(xí)慣性違章的相互模仿，做好安全管理。最后，通過小結(jié)和三道測試題來強化、鞏固所學(xué)知識。小結(jié)破窗效應(yīng)的5S管理，利用H5強交互功能設(shè)計三道測試題檢測學(xué)習(xí)效果，強化、鞏固所學(xué)知識。同樣，提交后可查看分?jǐn)?shù)和排名以及參與答題人數(shù)，答題過程中，答錯了會跳出正確的選項。

通過以上H5移動微課案例分析可以看出，目前H5的功能已經(jīng)強大到能支持一些最新的技術(shù)進(jìn)行二次開發(fā)，實現(xiàn)零代碼制作各種H5。

三、H5移動微課的快速開發(fā)

H5移動微課非常適合快速學(xué)習(xí)、隨時隨地學(xué)習(xí)，以滿足日益增長的移動學(xué)習(xí)需求。目前，通用性移動微課資源短缺，企業(yè)和用戶一并參與開發(fā)H5移動微課資源才是上上策。那么，如何才能快速、高效地開發(fā)H5移動微課？筆者認(rèn)為學(xué)會H5移動微課創(chuàng)作的方法和技巧，配合H5移動微課制作的利器（工具/平臺/技術(shù)），集微課的內(nèi)容創(chuàng)新設(shè)計與快速開發(fā)于一身，可以迅速開發(fā)出滿足學(xué)習(xí)者所需的微課。H5移動微課的開發(fā)大致可分為開發(fā)前期工作、開發(fā)期和開發(fā)后期三個階段，做足開發(fā)前期工作才能實現(xiàn)H5移動微課的快速開發(fā)。

1.明確設(shè)計的思路與流程

H5移動微課創(chuàng)作是在平臺上進(jìn)行設(shè)計與開發(fā)，再將其發(fā)布、應(yīng)用于移動終端上，其實質(zhì)還是微課的創(chuàng)作。微課創(chuàng)作有一定的創(chuàng)作流程，包括選題、教學(xué)設(shè)計、選擇開發(fā)平臺和技術(shù)、微課資源的開發(fā)和平臺的實現(xiàn)、發(fā)布、應(yīng)用和效果評價等7個方面。

2.加強微課選題、內(nèi)容設(shè)計與呈現(xiàn)等設(shè)計

對一個優(yōu)秀的微課而言，其選題應(yīng)有針對性，內(nèi)容設(shè)計要合理，內(nèi)容呈現(xiàn)和表達(dá)要生動有趣，技術(shù)應(yīng)用得當(dāng)，應(yīng)用效果好。[2]

①選題是微課創(chuàng)作的第一步，恰當(dāng)?shù)倪x題是微課創(chuàng)作成功的基石。[3]②內(nèi)容設(shè)計（教學(xué)設(shè)計）是根本，一個好微課少不了一個好的教學(xué)設(shè)計和腳本設(shè)計?？梢砸罁?jù)教學(xué)目標(biāo)、重難點、教學(xué)方法、教學(xué)步驟和時間分配等方面進(jìn)行教學(xué)設(shè)計，注重激發(fā)學(xué)習(xí)興趣；通過提問、討論或案例分析等引導(dǎo)學(xué)習(xí)；通過練習(xí)、測驗檢測掌握程度、學(xué)以致用。建議采用KFC模型進(jìn)行微課教學(xué)設(shè)計，如圖1所示。[1]這一模型與首要教學(xué)原理、九大教學(xué)事件、五段教學(xué)法等一脈相承。③內(nèi)容呈現(xiàn)方式和表達(dá)方式要個性化、新穎、生動有趣。④技術(shù)應(yīng)用得當(dāng)。用好技術(shù)表現(xiàn)在技術(shù)應(yīng)用的“量”要適度，過度使用技術(shù)會喧賓奪主，讓學(xué)生的注意力不自主地轉(zhuǎn)移到表現(xiàn)形式上。

3.選擇適合的開發(fā)平臺和技術(shù)

目前涌現(xiàn)了一大批簡單易學(xué)、效果好的H5開發(fā)平臺，例如易企秀、iH5、互動大師等。筆者對8個常用的H5移動微課開發(fā)平臺進(jìn)行了評級分析，見表1。這些平臺在功能上各有側(cè)重，但都提供了數(shù)量龐大的免費和收費的H5頁面模板，界面設(shè)計精美，交互體驗良好，并且提供專業(yè)團(tuán)隊進(jìn)行設(shè)計開發(fā)。

4.H5移動微課資源的開發(fā)

（1）對于初學(xué)者來說，用戶只需事先準(zhǔn)備好內(nèi)容、素材，然后登錄開發(fā)平臺，使用在線編輯工具選擇模板，替換模板的圖片和文字。如果頁面不夠，在右側(cè)添加頁，接著在左側(cè)選擇合適的單頁模板，同樣的方法替換模板的圖片和文字?？稍诓恍枰帉懭魏未a的前提下，使用拖拽等所見即所得的手段在線完成場景設(shè)計，并且可以輕松分享到互聯(lián)網(wǎng)，加速了知識分享。此外，初學(xué)者還可以通過觀看iH5、Epub360、易企秀等平臺提供的一整套視頻教程（分基礎(chǔ)、專業(yè)、專業(yè)進(jìn)階），深入學(xué)習(xí)H5移動微課的設(shè)計與開發(fā)。通過視頻教程學(xué)習(xí)可以快速成長，成為H5移動微課開發(fā)高手，設(shè)計出具有自身個性特點的H5移動微課，同時可以作為知識或案例模板分享到互聯(lián)網(wǎng)，加速了知識分享。

（2）對于熟練者或高手來說，以易企秀為例，①登錄開發(fā)平臺創(chuàng)建一個新的空白場景，即開始制作H5移動微課。②編輯場景，有點類似PPT，在上方菜單欄插入文本、圖片、背景、音樂特效等基本設(shè)計元素，每個元素下面都有豐富的素材供使用；左側(cè)是模板中心，有單頁模板、功能模板、VIP模板。主要是封面、尾頁、圖文、圖集、時間軸這五個部分。這些都可以根據(jù)設(shè)計者的需求，通過所見即所得的手段拖拽進(jìn)來使用即可。③設(shè)置場景，可以方便和提高用戶瀏覽體驗。包括封面、名稱、場景描述、場景類型、翻頁方式等基本設(shè)置。④發(fā)布場景。點擊“保存和分享”，支持微信掃碼、網(wǎng)絡(luò)一鍵轉(zhuǎn)發(fā)以及網(wǎng)絡(luò)鏈接。

（3）與傳統(tǒng)微課相比，H5移動微課有“四快”：①在線H5開發(fā)平臺配備相關(guān)的一站式精準(zhǔn)服務(wù)、極簡操作、海量模版，輕松快速設(shè)計，并且能立即看到微課效果、能快速發(fā)布分享。②開發(fā)過程中，能快速嵌入試題、測驗、問答等交互式組件，簡單、易用、易上手，非常方便快捷。③更適合互聯(lián)網(wǎng)快速傳播?？梢栽谌魏纹脚_中運行，如：PC、Android、iOS智能手機、平板、瀏覽器、App或嵌入到網(wǎng)頁等。文件相對傳統(tǒng)微課（如拍攝類）較小，能在手機中很好地運行。④后期維護(hù)修改快。只需在相應(yīng)頁面編輯修改、更新發(fā)布即可，無需重新錄制與輸出。

5.H5移動微課的應(yīng)用和效果評價

H5移動微課資源可以通過QQ、微信等方式進(jìn)行傳播與共享，學(xué)生利用手機掃碼即可進(jìn)行學(xué)習(xí)；也可以將文件發(fā)布到云空間，然后用戶通過掃描條碼進(jìn)行下載安裝觀看。同時，傳播共享方便快捷，與社交化學(xué)習(xí)深度融合，同時還兼具數(shù)據(jù)搜集、分析、統(tǒng)計與及時反饋功能，有助于更好地進(jìn)行教學(xué)診斷與評價。

移動互聯(lián)網(wǎng)時代的學(xué)習(xí)必然要向移動互聯(lián)、 多屏互動、社交化學(xué)習(xí)等方式轉(zhuǎn)變?；贖TML5技術(shù)開發(fā)H5移動微課，是未來微課開發(fā)的主流方向，具有廣闊的應(yīng)用前景。未來的H5還會繼續(xù)升級，將給移動學(xué)習(xí)帶來更多的便利。

參考文獻(xiàn)：

[1]唐緒瑩，熊潔.微課：快學(xué)、快用、快設(shè)計[M].北京：機械工業(yè)出版社，2017：137-138.

[2]胡小勇.設(shè)計好微課[M].北京：機械工業(yè)出版社，2017.

[3]鄭小軍.例談微課選題的誤區(qū)、原則與方法[J].中國教育信息化，2017（4）：43-46. （編輯：李曉萍）