游戏型微课设计：现状、问题及对策^*

——以H5平台交互设计为例

莫葵凤¹,郑小军^{2, 3通讯作者}杨上影²

（1.南宁师范大学计算机与信息工程学院教育技术系,广西 南宁,530299;

2. 南宁师范大学 职业技术教育学院,广西 南宁,530001;

3.广西职业教育发展研究中心,广西 南宁，530001)

（《中国教育信息化》2019年第14期第11-15页）

摘  要：基于HTML5（以下简称“H5”）的游戏型微课是通过引入游戏、游戏元素、游戏理念和游戏策略，对教学内容进行游戏化设计，基于H5平台开发的一类个性化微课，具有微视频学习与游戏化学习的双重优势，增强了学习体验（交互性、沉浸性、代入感、娱乐性、竞争性、挑战性），提升了学习效果。基于大量文献研究和具体案例分析，本文阐述了游戏化学习与游戏型微课的概念、基于H5平台的游戏型微课设计的现状及问题，并提出相应方法及对策，以期为设计开发游戏型微课提供参考与借鉴。

关键词：游戏型微课；个性化微课；微课设计；HTML5

中图分类号：G423 文献标志码：A 文章编号：1673-8454（2019）14-0011-05

目前，微课技术已经比较成熟，但是常规微课存在如下突出问题亟待解决：纯视频学习，交互性差，难以最大限度地激发学习兴趣。缺乏沉浸性等学习体验，注意力易分散。而游戏型微课能够将微视频学习与游戏化学习的优势互补配合、取长补短，提升了交互性、沉浸性，增强了学习体验，因而受到学习者欢迎，成为微课可持续发展的新趋势。那么，什么是游戏化学习和游戏型微课？目前国内游戏型微课的现状如何？存在哪些问题或误区？解决问题的方法和对策是什么？

一、游戏化学习与游戏型微课的概念界定

游戏化（Gamification）概念大约是在2003年被明确提出，并在2010年左右开始被广泛应用。所谓游戏化，指的是将游戏或游戏的元素、机制或理念应用到一些非游戏情境或过程中^[1]，以吸引他人、鼓励行为，促进学习并解决问题。《游戏改变世界》一书指出：“游戏化是互联时代的重要趋势”^[2]。近年来，新技术的发展大大推动了游戏在教育教学中的应用与发展。游戏化学习就是在游戏环境中，以相关理论为指导，充分利用游戏化的学习资源，以游戏为知识媒介，用游戏化的方式进行知识的传授和接收的一种新的学习方式^[3]。它以兴趣为中心，强调体验的过程，在学习中融入游戏和游戏策略，将学习过程游戏化。游戏化学习模型如图1所示^{[4] [5]}，该模型认为学习过程就是游戏过程。学习者在学习过程中角色发生了变化，从观看者变成参与者，这有利于激发学习者的学习动机。学习者在游戏环境中，自由探索未知（新知），思考问题和尝试解决问题，并通过玩游戏赢取奖励获得成就感，以达到学习的目的，有利于培养学生问题解决的能力和高阶思维能力以及增强学生的自信心、培养创造力和多元化发展。

图1 游戏化学习模型

近年来，国内外研究者尝试将游戏与视频进行整合，通过在视频中加入游戏元素，激发学习者的学习动机^[1]。国内对这方面研究比较多的是尚俊杰、马颖峰和庄少勇等人。朱云、尚俊杰等人以《游戏化教学法》MOOC为例探讨游戏化与 MOOC 课程视频的整合途径^[1]；王学龙等人研究游戏化学习课程设计并认为这是技术与课程整合的新趋向^[5]。2018年6月20日，中国教育技术协会教育游戏专题委员会在北京召开“教育游戏发展现状研究”课题研讨会，就“教育游戏研究与发展趋势”“教育游戏产品研发与推广”两个主题展开讨论^[6]。同年8月12日，北京大学学习科学实验室正式发布了基于游戏化学习理念的计算思维编程教育课程^[7]。

新技术的发展促进了游戏在教育教学中的应用与发展。目前，H5平台很多且功能强大，利用H5平台的交互功能进行游戏型微课的设计开发，是信息技术与教育教学深度融合的新趋势。

游戏型微课作为游戏化的学习资源，是基于用户交互体验的理念，通过引入适当的游戏机制和元素，对内容进行游戏化设计（即寓知识内容于游戏），把知识点重新设计成有趣的游戏内容或任务，从而激发学习者学习动机的一类微课^[8]。游戏机制是游戏核心部分的规则、流程以及数据。它定义了游戏的活动如何进行、何时发生什么事，获胜或失败的条件是什么。常见的游戏机制包括：物理、内部经济、渐进机制、战术动机、社交互动、法则、规则、胜负制等。^[9]游戏元素是指各类游戏的基本构成要素，在游戏场景中，与玩家进行某种交互方式的虚拟物体。如：奖励（成就/勋章）、等级、排名、分数、挑战、竞争、合作、角色、分层目标、交互体验、即时反馈、故事情景等。在游戏型微课中，利用游戏化思维，引入游戏机制和元素，把枯燥的知识内容变成有趣的游戏内容，赋予内容沉浸性体验的价值。

二、基于H5的游戏型微课现状及问题

目前，H5开发平台很多且功能越来越强大，它集成了“前后端”所需的几乎所有功能，可实现零代码制作^[10] 。Form Follows Function是一个预览平台，这个网站能看到大部分H5能够实现的动画效果。如3D游戏、VR场景、数据库支持、Web APP支持等。但这些平台在功能上略有侧重，如Ceilfire主要是一个创建H5游戏的平台。用户可以直接在浏览器中创建、参与和分享游戏，无需编程知识和相关的复杂技术。而绚星微课主要是一个H5微课/课件工具。H5移动微课是一种支持移动学习的微学习资源，具有无需下载、即点即用的优势，强大的交互功能可带给学习者良好的学习体验。基于H5平台开发的游戏型微课结合了游戏型微课和H5移动微课的优势，既能满足当下“数字原住民”个性化发展的需求，又能很好地激发学习动机，提高学习的效率和效果，从而达到学习并掌握相应知识的目的。

但是，目前绝大多数H5平台都是应用在商业宣传方面，如邀请函、企业招聘、电商/电子相册、品牌展示、节日祝福、活动/抽奖等。而较少应用于教育领域，系列化、课程化的游戏型微课资源更是少见。基于大量的案例观摩和分析，笔者归纳出基于H5平台的游戏型微课设计存在如下误区及问题：

1.游戏活动与教学内容“油水分离”

有的设计者以为“游戏+教学内容”就是游戏型微课。因而，采取“先游戏后教学内容”或“先教学内容后游戏”的简单加和方法设计所谓的“游戏型”微课。其基本策略就是以游戏为诱因，吸引学生。但没有进行精心设计和巧妙安排，没有将教学内容融入游戏全过程，即游戏与教学内容处于“油水分离”的状态，不是真正意义的游戏型微课。这类误区的根源在于没有厘清游戏型微课的本质内涵。

2.简单、随意套用万能模板，为游戏而游戏

一些初学者认为只要套用H5模板和替换内容就可以制作出游戏型微课。有的为了方便、省事，生搬硬套通用模板。有的无论内容是否适合，一律进行游戏化设计，采取游戏化呈现方式，过分追求游戏形式。这些做法都只是牵强地把教学内容与游戏叠加，是“为游戏而游戏”，没有对内容和游戏进行融合设计。

3.游戏策略运用与游戏元素设计不合理

主要表现为：游戏与学习的关系及轻重比例拿捏不准。如娱乐性太强，脱离教育游戏的本质，使学生的注意力从内容转移到游戏形式上，学习者虽然玩得尽兴，却忘记了自己的学习任务，偏离了教学目标，导致教学效果不理想。游戏太过简单、缺乏挑战性，游戏形式（呈现和交互方式）单一。应通过设计不同级别各种各样的潜在挑战，通过胜利过关、成功晋级,从而激发他们学习的热情，不断完成学习目标。游戏机制和元素设计不合理。

4.缺乏游戏思维，游戏型微课难实现

游戏型微课设计者需要运用恰当的游戏设计方法和游戏元素等对知识内容进行重新设计。如果缺乏游戏思维，游戏型微课设计将无从下手。

5.单打独斗，难以独立跨越技术门槛

尽管随着H5平台交互功能的完善和模板素材的丰富，技术门槛已经大幅度降低，但游戏型微课设计涉及到平台选用、模板选择、交互设计、游戏策略运用、游戏元素添加、教学内容融入等普通教师比较陌生的技术问题，需要通过组建“学科教师+教育技术人员+游戏设计专业人员”的多元互补开发团队，共同跨越技术门槛。当然，有一定信息技术基础的学科教师也可以通过自学钻研掌握游戏型微课开发的相关技术。

三、基于H5平台设计游戏型微课的方法及对策

1.厘清游戏型微课的本质

游戏型微课是技术与知识内容的融合，基于用户交互体验的理念，通过引入适当的游戏机制和元素，对内容进行游戏化设计，从而激发学习者内部学习动机的一类微课。其中对内容进行游戏化设计应以学习为目的。因此，游戏型微课不是“先游戏后教学内容”或“先教学内容后游戏”的简单加和，也不是简单地将教学内容添加到游戏中，而是将内容和游戏进行精心、巧妙的融合设计，即寓知识内容于游戏。

传统游戏活动注重游戏化表演、情景、比喻、类比^[11]，而游戏型微课更注重沉浸性体验、交互性、挑战性和资源开发。游戏型微课与普通微课都注重对内容的设计。不同的是，内容方面，游戏型微课更注重对内容的游戏化设计；呈现方式，游戏型微课更注重沉浸性体验、交互性、挑战性、成就、反馈等方面的设计；从首要教学原理角度分析，传统微课比较注重如何激活旧知和示证新知，而游戏型微课则在激活旧知和示证新知的基础上，更注重应用新知和融会贯通。

2.运用KFC模型进行游戏型微课设计

为了避免生搬硬套模板，建议采用KFC模型^{[10] [12]}进行微课教学设计，如图2所示。该模型和首要教学原理相通。

 

图2 微课教学设计的KFC模型

通过设计相关的问题/现象/故事/情景等相关情节作为引入，激发兴趣、产生学习动机与欲望。根据教学目标和学习任务，引入一定的游戏机制和元素来设计闯关游戏、交互练习/测验/测试等（即通过一定的说明引导学生探索、闯关，学习相关知识内容）。首先，明确教学的要求和学生的需求，按照目标需求分析哪些内容可以在游戏设计中体现；然后，分析任务和学习情境的对应关系，用启发式的教学手段，有目的地诱导游戏者进行探索活动，从而让游戏者自己发现知识。学生通过完成游戏任务来完成相应的学习任务，以达到强化和巩固本节微课内容的学习。

例如《拯救音痴大作战》是一个音乐知识与游戏巧妙融合的游戏型微课，二维码如图4所示。该微课遵循KFC模型进行教学设计，内容选取和融合设计比较合理，发挥了游戏的特有功能。微课首先以一群朋友伴随着激情的背景音乐欢唱和一句“你的音乐智商在线吗？”为情境导入，激发游戏者挑战。通过设计游戏关卡引导学习者（游戏者）进行学习（挑战）。学习者（游戏者）通过闯关完成相应的任务，以强化和巩固知识内容。

3.运用相关游戏策略合理设计教学游戏

准确把握游戏与学习的比例以及关系。游戏型微课中的游戏类型大多数是闯关类，应运用一定的闯关式游戏化学习策略，通过分析内容合理设计游戏机制和相关元素。设计过程中一般配合着角色扮演策略、动机激发策略、合作竞争策略和问题策略等一起运用^[13]。

为了避免设计的游戏过于简单、缺乏挑战性或游戏难度过大削弱学习者（游戏者）兴趣和热情，在设计前，需分析学习者（游戏者）特征，特别是网络环境下的学习者特征分析，以便更好地把握他们对游戏的兴趣点。

设计游戏型微课的基本方法流程如下：确立教学目标。运用闯关式游戏化学习策略，把知识内容根据教学目标分解成若干个由易到难的关卡（通向目标），这需具备一定的游戏思维。关卡设计中特别注意：关卡任务难度跨度不能过大。在关键节点及时点拨或有必要时需构建帮助系统, 让基础差的学生能够通过点击帮助系统来完成并掌握任务内容。内外动机的保持。第一，运用动机激发策略设计鼓励/奖励，如闯关奖励、即时反馈、分数、等级、排名等，成就的获得会激发玩家深度探索游戏的兴趣。第二，合理的难度提升，如竞技PK和分支任务设计，以提供差异性体验，使学生在闯关过程中真实体验到学习的乐趣的同时，又保持玩家的兴趣并激励玩家进行深度探索、继续挑战，从而产生驾驭游戏的欲望。另外，游戏过程也是用户获得成长体验的过程。根据内容需要，可以在游戏型微课中设计一些角色供学生选择，这样学生可以在学习（游戏）过程中更有代入感，更好地融入在学习（游戏）情境中。游戏型微课设计模型如图3所示^[14]。

图3 游戏型微课设计模型

例如《拯救音痴大作战》主要以游戏通关的思路进行设计，以游戏任务来驱动学生完成学习任务。教学目标如下：懂得辨别字的正确发音；知道歌词出自哪首音乐，哪个缺少音乐片段，哪一段属于freestyle；会辨别转音最少的“啊”；懂得辨别音调最高的海豚音片段。共设计了六个关卡，在每一个关卡中都设计了 A、B、C三个选项，每点击一个选项，会唱出相应的内容，然后根据题目要求选择一项并确认即可。提交后可查看结果以及答对题数，还可继续挑战（渴望驾驭游戏）。当然，该微课也存在如下几处需要提升的地方：每个关卡设计时间限制，游戏者须在规定时间内完成。对于基础差的学生来说，关卡任务难度过大。应构建帮助系统，帮助基础差的学生完成学习任务。

4.加强游戏化思维训练

一方面，通过教师培训，以“培训”试点示范带动游戏型微课的开发与应用，从而不断完善视频教学资源。从观念上消除“缺乏游戏思维、技术跟不上，游戏型微课设计无法实现”的误解，再从技能、方法及对策上加大培训力度，加强游戏化思维训练，如目标的拟定、规则的制定、关卡的设计、反馈的提供；具体包括等级、排名、分数、奖励、胜负制、时间、机会、挑战、竞争、合作、PK、角色、问题、资源获取、即时反馈等。游戏型微课设计中的游戏化思维模型如图4所示。

   图4 游戏化思维模型                图5 趣味字母系列交互设计

另一方面，设计者应明确并不是所有的教学内容都适合游戏化，所以需明确哪些知识点适合游戏化。这需根据具体需求来分析。如在英语学习中，从内容方面，单词（听音拼字、见字拼音）、语法、句型、口语等基础知识点适合游戏化。从题型方面，单选、多选、填空、匹配等客观题适合游戏化。当然，具体内容还需具体分析，合理甚至巧妙的设计才能实现对内容的游戏化设计。如小学英语26个字母的内容，设计成趣味字母系列，对每一个字母设计一个触点，触发相应的点会有对应的内容（趣味游戏化小视频），交互设计如图5所示。在视频学习后设计看嘴型游戏：在情景中，一个对象（老师或动物等）念一个字母或一个单词，但不发出声音；学生根据嘴型来判断是什么字母或单词，判断正确者获得奖励；目的在于校对发音和巩固字母、单词。

5.合理选择制作工具

随着微课制作技术的发展，微课制作越来越平民化，游戏型微课的交互功能设计也越来越平民化。从程序语言方面，主要分为编程类和突破编程类这两大类。前者利用Flash、HTML、Web技术实现交互，需要一定的编程语言基础，这种在微课设计基本已淘汰。后者利用HTML5平台或Adobe edge animate 、Adobe captivate、Storyline、Lectory Inspire、Camtasia Studio等软件实现交互，不需要编程语言基础，零代码制作、操作简单。从功能方面主要分为模板拼装类和专业交互类。H5类游戏型微课制作工具对比分析，见表1。这八款H5类游戏型微课制作工具主要从交互方面的优缺点进行对比分析并评出推荐等级。

表1 八款H5类游戏型微课制作工具对比分析表

平台	优点	缺点	视频 教程	推荐等级
iH5	专业交互性强、交互形式多样，能实现复杂的动画效果，以可视化工具还原HTML5开发过程、自由度高、模板丰富	界面不够简洁、复杂度较高	有
易企秀	上手较iH5简单、界面较简洁直观、网页端和APP端覆盖，随时可以满足用户制作的需求、模板丰富	交互功能不够强、形式不够多、高级交互组件少、缺乏专业性和内容性	有
绚星微课	交互性强还可以，一款专业级HTML5课件工具，基础版和高级版分别适合专业和非专业人员	交互基本是测评题类，交互形式单一，自由度不高；只有PC端软件，没有web端工具	无
Epub360	交互功能不错、交互形式较多、高级组件比易企秀多、界面较简洁直观	模板不算多、自由度不够高	有
人人秀	交互性还可以，界面类似易企秀、模板众多	交互比较多是修改现成模板、交互组件少	无
Ceilfire	交互性强、自由度高，一款专门做HTML5游戏的平台	只有英文版，平台上的游戏绝大部分是纯粹小游戏	无
MAKA	门槛低易上手、模板使用比较方便、提供较为丰富的表情包、素材包	明显弱化了交互功能，大部分基于现成模板修改，效果类比PPT式滑动翻页，自由度相对欠缺	无
百度H5	界面较简洁、支持各种常用编辑快捷键	界面的设计操作不太方便，交互性低、交互形式单一、交互组件和模板较少	有文档

四、结束语

总之，基于H5平台的游戏型微课设计应注重一下几点：根据具体教学内容选择合适的游戏类型，适时恰当地引入游戏机制和游戏元素。关注教育性和娱乐性两者平衡的把控，明确游戏与学习的关系及轻重比例，适时点拨。注重有效学习（游戏）环境的创设。加强内容呈现与交互设计，综合考虑各个交互元素/因素、交互方式、交互时机等。未来学习将走向情景化、个性化和游戏化。游戏型微课具有微视频学习与游戏化学习的双重优势，提升了学习的交互性、沉浸性、代入感、娱乐性、竞争性、挑战性，增强了学习体验，具有广阔的应用前景，值得深入研究。

参考文献：

[1]朱云,裴蕾丝,尚俊杰.游戏化与MOOC课程视频的整合途径研究——以《游戏化教学法》MOOC为例[J].远程教育杂志,2017,35(6):95-103.

[2][美]简.麦戈尼格尔（Jane McGonigal）,闾佳译.游戏改变世界:游戏化如何让现实变得更美好[M].杭州:浙江人民出版社,2012.

[3]苏亚玲.基于游戏化学习的微课程设计研究[D].上海师范大学,2014.

[4]GARRIS R, AHLERS R, DRISKELL J E. Games, motivation an learning, simulation&gaming[J].An Interdisciplinary Journal Practice and Research, 2002, 33 (4) :195-206.

[5]王学龙,杨文阳,于晓.游戏化学习课程设计:技术与课程整合的新趋向[J].现代中小学教育,2018,34(4):90-95.

[6]中国教育技术协会.“教育游戏发展现状研究”课题研讨会召开 各界共话游戏在教育领域中的应用[DB/OL].[2018-06-24].http://url.cn/5xObfK8.

[7]中国教育技术协会.新闻：北京大学学习科学实验室指导开发的融入游戏化学习理念的计算思维编程教育课程发布[DB/OL].[ 2018-10-11].https://mp.weixin.qq.com/s/6Omc13biulWgLLy421-70w.

[8]莫葵凤,郑小军, 卿萍.个性化微课：种类、特征及设计要点[J].中国教育信息化,2019 (8):6-9+15.

[9][美]亚当斯(ErnestW. Adams)、多尔芒(Joris Dormans).游戏机制：高级游戏设计技术[M].北京:人民邮电出版社,2014: 16-24.

[10]莫葵凤,郑小军,朱育贤,梁秋远.H5移动微课的创新设计与快速开发[J].中国教育信息化,2019 (4): 34-36.

[11]顾汉杰.游戏化思维在高校计算机课程教学中的应用研究[J].中国教育信息化,2017(15):13-16.

[12]唐绪莹,熊洁.微课：快学、快用、快设计[M].北京:机械工业出版社,2017:137-138.

[13]杨榕瑕. 游戏化学习策略在初中信息技术教学中的设计与应用研究[D].华中师范大学,2017.

[14]伊俊.游戏化教育:改变互联网教育的创新战略[M].北京:人民邮电出版社,2018.

*基金项目：广西高等学校人文社会科学重点研究基地基金资助“《教学动画制作与实战》慕课设计与开发”（项目编号2017GXOUWT09）;城市级“互联网+医保医疗”智能综合服务平台研发及示范应用(桂科AB17129026)。