項目驅(qū)動式教學在用戶界面設(shè)計課程中的實踐

（廣東海洋大學數(shù)學與計算機學院，廣東湛江524088）

（廣東海洋大學數(shù)學與計算機學院，廣東湛江524088）

項目驅(qū)動式教學法是以學生自主學習為主，教師指導(dǎo)為輔的一種有效的教學方法。它有助于調(diào)動學生的學習積極性、主動性和創(chuàng)造性。結(jié)合用戶界面設(shè)計課程的教學實踐，對項目驅(qū)動式教學法進行了有益的探討。

教學方法；項目驅(qū)動；用戶界面設(shè)計

引言

項目驅(qū)動式教學法（Project-Driven Teaching Method），或稱任務(wù)驅(qū)動教學法，是一種建立在建構(gòu)主義（Constructivism）教學理論基礎(chǔ)之上的教學法［1］。它是以學生自主學習為主，教師指導(dǎo)為輔的一種有效的教學方法。具體來說，在整個教學過程中，以學生為中心；教師僅僅是教學的組織者、指導(dǎo)者、幫助者和促進者。教師的作用和動機是利用情境、協(xié)作、會話等學習環(huán)境，充分發(fā)揮學生的主動性、積極性和首創(chuàng)精神，最終使學生有效地實現(xiàn)對所學知識的理解。整個教學過程所關(guān)注的重點是學生達到教學目標的程度。

與傳統(tǒng)的教學方法相比，項目驅(qū)動式教學具有如下特點：（1）教學項目從傳統(tǒng)的以教材為依據(jù)轉(zhuǎn)變?yōu)橐皂椖繛橐罁?jù)。教師的任務(wù)是根據(jù)學生已有的經(jīng)驗、知識、水平和興趣來選取適合他們的項目。然后，參照項目的整體思路，把項目細分為若干個遞進的子項目，依據(jù)子項目進行分階段進行教學。使學生在項目開發(fā)的不同階段發(fā)現(xiàn)和解決不同的問題，進而提升學生解決問題的能力。（2）教學主體從教師轉(zhuǎn)變?yōu)閷W生。教師不再把持整個教學過程，而是提出項目，讓學生自己運用已學知識去分析、解決問題。教師的任務(wù)在于啟發(fā)、引導(dǎo)和指導(dǎo)。通過角色的轉(zhuǎn)變，激發(fā)學生對該課程的興趣。（3）從單一吸收知識轉(zhuǎn)變?yōu)閷W生團隊合作完成教學任務(wù)［2］。

在20世紀70-80年代，項目驅(qū)動式教學法在德國企業(yè)職業(yè)教育中得到成功地運用。特別是在工業(yè)發(fā)展的背景下，教育模式從學科課程教學轉(zhuǎn)向了以行動為導(dǎo)向的自主學習模式上［3］。目前，此教育模式已經(jīng)引起許多教育專家和學者的重視。在國內(nèi)，劉韻璇［1］指出了實施項目驅(qū)動式教學模式時應(yīng)注意的幾個問題。張鈺莎［4］探討了利用此教學模式來提高學生分析和解決問題能力問題。文獻［5-9］論述了項目驅(qū)動式教學模式在計算機課程中的應(yīng)用。在國外，Luederitz等［10］詳細地回顧了多年來項目驅(qū)動式教學模式在國外的研究成果。

軟件工程專業(yè)是一個發(fā)展迅速、知識更新快的專業(yè)，用戶界面設(shè)計課程又是軟件工程專業(yè)中更新快的一門課程。這樣，若按照現(xiàn)行的教學方法來實施教學，必然會出現(xiàn)所傳授的知識滯后于社會需求的現(xiàn)象。若能通過項目驅(qū)動的方式來實施教學的話，學生就能依據(jù)項目的知識需求有針對性地學習和實踐。從而保證學生學習的知識既是最需要的，又是最前沿的。用戶界面設(shè)計課程涉及的知識面很廣，在有限的課時內(nèi)很難細致深入地教授學生太多的知識，這就迫使學生逐步形成自我學習、有重點地學習和自己來解決問題。這種習慣的養(yǎng)成，會使學生在畢業(yè)后也能自我學習，獲取新的知識。另外，用戶界面設(shè)計是一門實踐性非常強的課程。它要求學生在課程的學習中把設(shè)計與編碼相結(jié)合，并在熟練掌握HTML語言、CSS樣式、JavaScript腳本等三大教學模塊的基礎(chǔ)上，以Sublime Text3開源文本編輯軟件為工具，應(yīng)用JQuery、BootStrap等開源框架制作出排版優(yōu)美，跨設(shè)備、跨瀏覽器的網(wǎng)頁頁面。這也從理論上說明了開展用戶界面設(shè)計的項目驅(qū)動教學方法研究的必要性。

一、項目驅(qū)動教學的實施

基于項目驅(qū)動教學模式，可將用戶界面設(shè)計課程的教學過程分為4個階段：準備階段、實施階段、輔導(dǎo)階段和考核階段。并以一個小項目來闡明各個階段需要做哪些工作。

（一）準備階段

準備階段包括2項工作：項目任務(wù)書的準備，考核標準的制定。這2項工作是需要教師來完成的，我們分別給出解釋。（1）項目任務(wù)書的準備。首先，基于用戶界面設(shè)計課程的教學內(nèi)容和教學目標，適當?shù)剡x取教學的知識點，依據(jù)選取的知識點設(shè)計出合理的項目任務(wù)書。再將項目細化為若干個遞進的子項目；（2）考核標準的制定。類似傳統(tǒng)試題要有評分標準一樣，項目驅(qū)動式教學在制定出項目任務(wù)書以后，也要制定出考核的標準，便于對學生完成的項目進行考評。

圖1圖片幻燈片效果網(wǎng)頁

例如，在講解JavaScript和DOM的內(nèi)容時，可以引入如下項目：

完成如圖1所示的一個網(wǎng)頁效果圖，在網(wǎng)頁上有四張縮略圖和一張大圖，當打開網(wǎng)頁時，大圖默認顯示第一張縮略圖；當點擊任意一張縮略圖時，大圖切換成對應(yīng)的縮略圖。在大圖的下方會有一行文字來對大圖進行簡單的說明。

此項目為單人項目，目的是讓學生通過完成項目的基本功能，了解用JavaScript來操作DOM元素的基本用法。

（二）教師輔導(dǎo)

教師的輔導(dǎo)包括兩方面的內(nèi)容，一是展示相關(guān)的項目實例，包括項目需求規(guī)格說明書，概要/詳細設(shè)計說明書，項目源代碼等；二是介紹所需的項目信息查詢路徑、方法和注意事項。

由于此項目相對比較直觀簡單，可以只顯示最終的效果圖。讓同學們自由發(fā)揮。在此之前，可以先簡單介紹些JavaScript操作DOM元素基本知識，并要求學生查閱相關(guān)資料：

1.Document對象方法（表1）

表1 Document對象方法

2.事件處理的基本方法

（1）HTML事件處理。

（2）DOM 0級事件處理。

（3）DOM 2級事件處理。

（4）IE事件處理。

（5）解決如何綜合使用這些事件處理方法來支持不同的瀏覽器的問題。

（三）項目實施

同學在充分理解項目任務(wù)的基礎(chǔ)上，制定設(shè)計方案，實施方案。本著“First make it work.Then make it right”的原則，快速建立起原型系統(tǒng)，并在此基礎(chǔ)上，不斷的迭代開發(fā)，保證系統(tǒng)的健壯性和實效性。就網(wǎng)頁頁面設(shè)計來說，還需考慮程序在不同瀏覽器之間的兼容性，和在電腦、手機、平板電腦等不同設(shè)備之間的兼容性。

在同學們基本完成項目后，可以以漸進的方式拓展以下內(nèi)容：

1.項目的0.1版本，寫出項目的HTML頁面的主要代碼。

2.項目的0.5版本，實現(xiàn)需求基本功能。

3.項目的1.0版本，如何優(yōu)化代碼，讓JavaScript從HTML中分離出來，做到內(nèi)容、樣式、行為相分離，實現(xiàn)程序解耦的功能優(yōu)化。

4.項目的1.2版本，考慮用戶瀏覽器的差異性，考慮用戶瀏覽器不支持JavaScript的某些方法或就不支持JavaScript時該如何處理。

5.項目的1.5版本，考慮一些拓展功能，比如在縮略圖前后各加一個箭頭圖標，當點擊圖表時，大圖切換顯示上一張/下一張縮略圖等。

（四）考核階段

依據(jù)準備階段教師制定的考核標準，當完成項目任務(wù)后，教師要進行點評，總結(jié)開發(fā)效果的優(yōu)勢和不足。同時根據(jù)完成情況給出成績。對于成績的評價分2個方面，一方面是對學生完成當前任務(wù)的過程和結(jié)果的評價，即對學生所學知識的意義架構(gòu)的評價，另一方面是對學生自主學習及協(xié)作開發(fā)能力的評價。結(jié)合上述項目，學生如能實現(xiàn)上述功能，就可以給學生70分；如果學生能考慮到各個瀏覽器和設(shè)備的兼容情況的，就可以給學生80分；如果還能做一些拓展功能、優(yōu)化功能，可以依實際效果酌情給到90甚至100分。

具體的教學過程展示在圖2中。

圖2教學過程圖

通過對用戶界面設(shè)計課程的實踐，項目驅(qū)動式教學方法產(chǎn)生了如下的教學效果：（1）轉(zhuǎn)變和提高了學生的學習積極性。學生不再把學習當任務(wù)，而是根據(jù)項目的需求來主動學習，進而提高了學生學習的積極性和愉悅性。（2）提高了學生的動手能力和解決問題的能力。學生通過做項目，加深了對所需知識點的理解，提高了學生的動手和解決問題的能力。通過問題的解決、項目的完成來獲得成就感，從而激發(fā)了學生的求知欲望，也在學習過程中獲得了快樂。（3）提高了團隊合作能力。項目組成員在完成項目的過程中，相互協(xié)商，共同研發(fā)。這樣，學生在完成教學任務(wù)的過程中，既獲得了知識和技能，又提升了團隊精神。

二、結(jié)束語

項目驅(qū)動式教學方法已經(jīng)成功地實踐在用戶界面設(shè)計課程中。針對此次教學實踐活動，我們進行了實驗班級的問卷調(diào)查，調(diào)查結(jié)果表明，90%以上的學生認同此種教學模式。他（她）們認為此教學方法確實能提升同學們的學習積極性、主動性和創(chuàng)造性。同時，調(diào)查的結(jié)果也反映了今后需要注意的一些事項，比如，項目任務(wù)的設(shè)計必須以教學為目標，不能脫離教學的內(nèi)容。再比如，教師除了掌握相關(guān)的知識外，還需要有一定的企業(yè)項目實戰(zhàn)經(jīng)驗。這就為教師提出了更高的要求。

［1］劉韻璇.項目驅(qū)動式教學模式淺析［J］.長江大學學報（自科版），2013，10（22）：155-156.

［2］殷美.《網(wǎng)絡(luò)營銷》課程中項目驅(qū)動式教學法的探索與實踐［J］.現(xiàn)代計算機（專業(yè)版），2012，28：47-49.

［3］張鈺莎.項目驅(qū)動式教學法在《網(wǎng)頁設(shè)計與制作》中的探討［J］.現(xiàn)代計算機（專業(yè)版），2011，11：47-49.

［4］申華.翻轉(zhuǎn)課堂在項目驅(qū)動式教學中的應(yīng)用——以《數(shù)據(jù)庫原理與應(yīng)用》教學為例［J］.計算機光盤軟件與應(yīng)用，2014，17：197-199.

［5］唐培和，徐奕奕，周德儉.軟件工程專業(yè)項目驅(qū)動式教學模式的探索與構(gòu)建［J］.現(xiàn)代計算機（專業(yè)版），2012（20）：41-43.

［6］朱靜怡.對高職非計算機專業(yè)ACCESSS數(shù)據(jù)庫教學探究［J］.信息通信，2013（7）：270-271.

［7］李榮利.試論任務(wù)驅(qū)動式教學法在計算機教學中的運用［J］.信息與電腦（理論版），2016（1）：237-238.

［8］徐凱，宋麥玲，薛思清.項目驅(qū)動式案例教學法在“C程序設(shè)計”課程中的應(yīng)用［J］.長春理工大學學報（社會科學版），2011，24（10）：171-172.

［9］楊廣超，朱征宇.項目驅(qū)動式教學方法在C++語言程序設(shè)計中的應(yīng)用［J］.計算機光盤軟件與應(yīng)用，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.

項目驅(qū)動式教學在用戶界面設(shè)計課程中的實踐*

岳川

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）；廣東省科學技術(shù)廳項目（編號：2014A020218016）。

岳川（1988-），男，漢族，河北省邢臺人，碩士，廣東海洋大學數(shù)學與計算機學院，助教，研究方向：軟件質(zhì)量管理。