项目驱动式教学在用户界面设计课程中的实践

（广东海洋大学数学与计算机学院，广东湛江524088）

（广东海洋大学数学与计算机学院，广东湛江524088）

项目驱动式教学法是以学生自主学习为主，教师指导为辅的一种有效的教学方法。它有助于调动学生的学习积极性、主动性和创造性。结合用户界面设计课程的教学实践，对项目驱动式教学法进行了有益的探讨。

教学方法；项目驱动；用户界面设计

引言

项目驱动式教学法（Project-Driven Teaching Method），或称任务驱动教学法，是一种建立在建构主义（Constructivism）教学理论基础之上的教学法［1］。它是以学生自主学习为主，教师指导为辅的一种有效的教学方法。具体来说，在整个教学过程中，以学生为中心；教师仅仅是教学的组织者、指导者、帮助者和促进者。教师的作用和动机是利用情境、协作、会话等学习环境，充分发挥学生的主动性、积极性和首创精神，最终使学生有效地实现对所学知识的理解。整个教学过程所关注的重点是学生达到教学目标的程度。

与传统的教学方法相比，项目驱动式教学具有如下特点：（1）教学项目从传统的以教材为依据转变为以项目为依据。教师的任务是根据学生已有的经验、知识、水平和兴趣来选取适合他们的项目。然后，参照项目的整体思路，把项目细分为若干个递进的子项目，依据子项目进行分阶段进行教学。使学生在项目开发的不同阶段发现和解决不同的问题，进而提升学生解决问题的能力。（2）教学主体从教师转变为学生。教师不再把持整个教学过程，而是提出项目，让学生自己运用已学知识去分析、解决问题。教师的任务在于启发、引导和指导。通过角色的转变，激发学生对该课程的兴趣。（3）从单一吸收知识转变为学生团队合作完成教学任务［2］。

在20世纪70-80年代，项目驱动式教学法在德国企业职业教育中得到成功地运用。特别是在工业发展的背景下，教育模式从学科课程教学转向了以行动为导向的自主学习模式上［3］。目前，此教育模式已经引起许多教育专家和学者的重视。在国内，刘韵璇［1］指出了实施项目驱动式教学模式时应注意的几个问题。张钰莎［4］探讨了利用此教学模式来提高学生分析和解决问题能力问题。文献［5-9］论述了项目驱动式教学模式在计算机课程中的应用。在国外，Luederitz等［10］详细地回顾了多年来项目驱动式教学模式在国外的研究成果。

软件工程专业是一个发展迅速、知识更新快的专业，用户界面设计课程又是软件工程专业中更新快的一门课程。这样，若按照现行的教学方法来实施教学，必然会出现所传授的知识滞后于社会需求的现象。若能通过项目驱动的方式来实施教学的话，学生就能依据项目的知识需求有针对性地学习和实践。从而保证学生学习的知识既是最需要的，又是最前沿的。用户界面设计课程涉及的知识面很广，在有限的课时内很难细致深入地教授学生太多的知识，这就迫使学生逐步形成自我学习、有重点地学习和自己来解决问题。这种习惯的养成，会使学生在毕业后也能自我学习，获取新的知识。另外，用户界面设计是一门实践性非常强的课程。它要求学生在课程的学习中把设计与编码相结合，并在熟练掌握HTML语言、CSS样式、JavaScript脚本等三大教学模块的基础上，以Sublime Text3开源文本编辑软件为工具，应用JQuery、BootStrap等开源框架制作出排版优美，跨设备、跨浏览器的网页页面。这也从理论上说明了开展用户界面设计的项目驱动教学方法研究的必要性。

一、项目驱动教学的实施

基于项目驱动教学模式，可将用户界面设计课程的教学过程分为4个阶段：准备阶段、实施阶段、辅导阶段和考核阶段。并以一个小项目来阐明各个阶段需要做哪些工作。

（一）准备阶段

准备阶段包括2项工作：项目任务书的准备，考核标准的制定。这2项工作是需要教师来完成的，我们分别给出解释。（1）项目任务书的准备。首先，基于用户界面设计课程的教学内容和教学目标，适当地选取教学的知识点，依据选取的知识点设计出合理的项目任务书。再将项目细化为若干个递进的子项目；（2）考核标准的制定。类似传统试题要有评分标准一样，项目驱动式教学在制定出项目任务书以后，也要制定出考核的标准，便于对学生完成的项目进行考评。

图1图片幻灯片效果网页

例如，在讲解JavaScript和DOM的内容时，可以引入如下项目：

完成如图1所示的一个网页效果图，在网页上有四张缩略图和一张大图，当打开网页时，大图默认显示第一张缩略图；当点击任意一张缩略图时，大图切换成对应的缩略图。在大图的下方会有一行文字来对大图进行简单的说明。

此项目为单人项目，目的是让学生通过完成项目的基本功能，了解用JavaScript来操作DOM元素的基本用法。

（二）教师辅导

教师的辅导包括两方面的内容，一是展示相关的项目实例，包括项目需求规格说明书，概要/详细设计说明书，项目源代码等；二是介绍所需的项目信息查询路径、方法和注意事项。

由于此项目相对比较直观简单，可以只显示最终的效果图。让同学们自由发挥。在此之前，可以先简单介绍些JavaScript操作DOM元素基本知识，并要求学生查阅相关资料：

1.Document对象方法（表1）

表1 Document对象方法

2.事件处理的基本方法

（1）HTML事件处理。

（2）DOM 0级事件处理。

（3）DOM 2级事件处理。

（4）IE事件处理。

（5）解决如何综合使用这些事件处理方法来支持不同的浏览器的问题。

（三）项目实施

同学在充分理解项目任务的基础上，制定设计方案，实施方案。本着“First make it work.Then make it right”的原则，快速建立起原型系统，并在此基础上，不断的迭代开发，保证系统的健壮性和实效性。就网页页面设计来说，还需考虑程序在不同浏览器之间的兼容性，和在电脑、手机、平板电脑等不同设备之间的兼容性。

在同学们基本完成项目后，可以以渐进的方式拓展以下内容：

1.项目的0.1版本，写出项目的HTML页面的主要代码。

2.项目的0.5版本，实现需求基本功能。

3.项目的1.0版本，如何优化代码，让JavaScript从HTML中分离出来，做到内容、样式、行为相分离，实现程序解耦的功能优化。

4.项目的1.2版本，考虑用户浏览器的差异性，考虑用户浏览器不支持JavaScript的某些方法或就不支持JavaScript时该如何处理。

5.项目的1.5版本，考虑一些拓展功能，比如在缩略图前后各加一个箭头图标，当点击图表时，大图切换显示上一张/下一张缩略图等。

（四）考核阶段

依据准备阶段教师制定的考核标准，当完成项目任务后，教师要进行点评，总结开发效果的优势和不足。同时根据完成情况给出成绩。对于成绩的评价分2个方面，一方面是对学生完成当前任务的过程和结果的评价，即对学生所学知识的意义架构的评价，另一方面是对学生自主学习及协作开发能力的评价。结合上述项目，学生如能实现上述功能，就可以给学生70分；如果学生能考虑到各个浏览器和设备的兼容情况的，就可以给学生80分；如果还能做一些拓展功能、优化功能，可以依实际效果酌情给到90甚至100分。

具体的教学过程展示在图2中。

图2教学过程图

通过对用户界面设计课程的实践，项目驱动式教学方法产生了如下的教学效果：（1）转变和提高了学生的学习积极性。学生不再把学习当任务，而是根据项目的需求来主动学习，进而提高了学生学习的积极性和愉悦性。（2）提高了学生的动手能力和解决问题的能力。学生通过做项目，加深了对所需知识点的理解，提高了学生的动手和解决问题的能力。通过问题的解决、项目的完成来获得成就感，从而激发了学生的求知欲望，也在学习过程中获得了快乐。（3）提高了团队合作能力。项目组成员在完成项目的过程中，相互协商，共同研发。这样，学生在完成教学任务的过程中，既获得了知识和技能，又提升了团队精神。

二、结束语

项目驱动式教学方法已经成功地实践在用户界面设计课程中。针对此次教学实践活动，我们进行了实验班级的问卷调查，调查结果表明，90%以上的学生认同此种教学模式。他（她）们认为此教学方法确实能提升同学们的学习积极性、主动性和创造性。同时，调查的结果也反映了今后需要注意的一些事项，比如，项目任务的设计必须以教学为目标，不能脱离教学的内容。再比如，教师除了掌握相关的知识外，还需要有一定的企业项目实战经验。这就为教师提出了更高的要求。

［1］刘韵璇.项目驱动式教学模式浅析［J］.长江大学学报（自科版），2013，10（22）：155-156.

［2］殷美.《网络营销》课程中项目驱动式教学法的探索与实践［J］.现代计算机（专业版），2012，28：47-49.

［3］张钰莎.项目驱动式教学法在《网页设计与制作》中的探讨［J］.现代计算机（专业版），2011，11：47-49.

［4］申华.翻转课堂在项目驱动式教学中的应用——以《数据库原理与应用》教学为例［J］.计算机光盘软件与应用，2014，17：197-199.

［5］唐培和，徐奕奕，周德俭.软件工程专业项目驱动式教学模式的探索与构建［J］.现代计算机（专业版），2012（20）：41-43.

［6］朱静怡.对高职非计算机专业ACCESSS数据库教学探究［J］.信息通信，2013（7）：270-271.

［7］李荣利.试论任务驱动式教学法在计算机教学中的运用［J］.信息与电脑（理论版），2016（1）：237-238.

［8］徐凯，宋麦玲，薛思清.项目驱动式案例教学法在“C程序设计”课程中的应用［J］.长春理工大学学报（社会科学版），2011，24（10）：171-172.

［9］杨广超，朱征宇.项目驱动式教学方法在C++语言程序设计中的应用［J］.计算机光盘软件与应用，2012（17）：295-297.

［10］Christopher Luederitz，Moritz Meyer，David J Abson，et al. Systematic student-driven literature reviews in sustainability sc ience-an effective way to merge research and teaching［J］.Journal of Cleaner Production，2016，119：229-235.

项目驱动式教学在用户界面设计课程中的实践*

岳川

Project-driven teaching approach is an effective teaching method，which takes students'self-study as main subject and teachers'guidance as supplement.It helps to mobilize students'enthusiasm，initiative and innovation.Combined with the practice teaching of the user interface design course，this paper discusses the project-driven teaching method.

teaching method；project-driven；user interface design

G642文献标志码：A文章编号：2096-000X（2016）18-0155-03

广东海洋大学教育教学改革项目（编号：XJG201644）；广东省科学技术厅项目（编号：2014A020218016）。

岳川（1988-），男，汉族，河北省邢台人，硕士，广东海洋大学数学与计算机学院，助教，研究方向：软件质量管理。