項(xiàng)目驅(qū)動(dòng)式教學(xué)在用戶(hù)界面設(shè)計(jì)課程中的實(shí)踐

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

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

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

教學(xué)方法；項(xiàng)目驅(qū)動(dòng)；用戶(hù)界面設(shè)計(jì)

引言

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

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

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

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

一、項(xiàng)目驅(qū)動(dòng)教學(xué)的實(shí)施

基于項(xiàng)目驅(qū)動(dòng)教學(xué)模式，可將用戶(hù)界面設(shè)計(jì)課程的教學(xué)過(guò)程分為4個(gè)階段：準(zhǔn)備階段、實(shí)施階段、輔導(dǎo)階段和考核階段。并以一個(gè)小項(xiàng)目來(lái)闡明各個(gè)階段需要做哪些工作。

（一）準(zhǔn)備階段

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

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

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

完成如圖1所示的一個(gè)網(wǎng)頁(yè)效果圖，在網(wǎng)頁(yè)上有四張縮略圖和一張大圖，當(dāng)打開(kāi)網(wǎng)頁(yè)時(shí)，大圖默認(rèn)顯示第一張縮略圖；當(dāng)點(diǎn)擊任意一張縮略圖時(shí)，大圖切換成對(duì)應(yīng)的縮略圖。在大圖的下方會(huì)有一行文字來(lái)對(duì)大圖進(jìn)行簡(jiǎn)單的說(shuō)明。

此項(xiàng)目為單人項(xiàng)目，目的是讓學(xué)生通過(guò)完成項(xiàng)目的基本功能，了解用JavaScript來(lái)操作DOM元素的基本用法。

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

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

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

1.Document對(duì)象方法（表1）

表1 Document對(duì)象方法

2.事件處理的基本方法

（1）HTML事件處理。

（2）DOM 0級(jí)事件處理。

（3）DOM 2級(jí)事件處理。

（4）IE事件處理。

（5）解決如何綜合使用這些事件處理方法來(lái)支持不同的瀏覽器的問(wèn)題。

（三）項(xiàng)目實(shí)施

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

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

1.項(xiàng)目的0.1版本，寫(xiě)出項(xiàng)目的HTML頁(yè)面的主要代碼。

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

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

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

5.項(xiàng)目的1.5版本，考慮一些拓展功能，比如在縮略圖前后各加一個(gè)箭頭圖標(biāo)，當(dāng)點(diǎn)擊圖表時(shí)，大圖切換顯示上一張/下一張縮略圖等。

（四）考核階段

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

具體的教學(xué)過(guò)程展示在圖2中。

圖2教學(xué)過(guò)程圖

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

二、結(jié)束語(yǔ)

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

［1］劉韻璇.項(xiàng)目驅(qū)動(dòng)式教學(xué)模式淺析［J］.長(zhǎng)江大學(xué)學(xué)報(bào)（自科版），2013，10（22）：155-156.

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

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

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

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

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

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

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

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

項(xiàng)目驅(qū)動(dòng)式教學(xué)在用戶(hù)界面設(shè)計(jì)課程中的實(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文獻(xiàn)標(biāo)志碼：A文章編號(hào)：2096-000X（2016）18-0155-03

廣東海洋大學(xué)教育教學(xué)改革項(xiàng)目（編號(hào)：XJG201644）；廣東省科學(xué)技術(shù)廳項(xiàng)目（編號(hào)：2014A020218016）。

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