淺析“任務(wù)驅(qū)動(dòng)”教學(xué)法在《UI設(shè)計(jì)技術(shù)》教學(xué)中的應(yīng)用

劉民娟 李穎云

【摘 要】 本文針對(duì)高職院校軟件技術(shù)專業(yè)的專業(yè)核心課程《UI設(shè)計(jì)技術(shù)》教學(xué)過(guò)程中存在的問(wèn)題，探討了引入“任務(wù)驅(qū)動(dòng)”教學(xué)法的重要性與應(yīng)用措施。以課程內(nèi)容所涉及的教學(xué)單元為例，分析了“任務(wù)驅(qū)動(dòng)”教學(xué)法中任務(wù)體系設(shè)計(jì)、教學(xué)環(huán)節(jié)設(shè)計(jì)、教學(xué)組織實(shí)施、教學(xué)評(píng)價(jià)等環(huán)節(jié)的創(chuàng)新性和可實(shí)施性。教學(xué)實(shí)踐證明，“任務(wù)驅(qū)動(dòng)”教學(xué)法更能激發(fā)學(xué)生自主學(xué)習(xí)的探索能力，教學(xué)效果明顯提高。

【關(guān)鍵詞】 高職院校;“任務(wù)驅(qū)動(dòng)”教學(xué)法;UI設(shè)計(jì)技術(shù);教學(xué)應(yīng)用

UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯和界面美觀的整體設(shè)計(jì)，是英文User Interface的縮寫(xiě)?！禪I設(shè)計(jì)技術(shù)》課程是高職軟件技術(shù)專業(yè)的專業(yè)核心課程，旨在培養(yǎng)學(xué)生在網(wǎng)頁(yè)界面設(shè)計(jì)、應(yīng)用軟件界面設(shè)計(jì)、移動(dòng)APP界面設(shè)計(jì)、游戲界面設(shè)計(jì)等UI領(lǐng)域的實(shí)踐操作能力和創(chuàng)新設(shè)計(jì)能力。該課程的授課對(duì)象是軟件技術(shù)專業(yè)的大二學(xué)生，他們?cè)趯W(xué)習(xí)《UI設(shè)計(jì)技術(shù)》課程之前并沒(méi)有接觸過(guò)與UI相關(guān)的任何基礎(chǔ)課程，對(duì)photoshop軟件也了解的不多，要想通過(guò)有限的56個(gè)學(xué)時(shí)來(lái)完成PS軟件基礎(chǔ)操作學(xué)習(xí)和UI設(shè)計(jì)中的網(wǎng)頁(yè)界面設(shè)計(jì)、應(yīng)用軟件界面設(shè)計(jì)、移動(dòng)APP界面設(shè)計(jì)、游戲界面設(shè)計(jì)等的設(shè)計(jì)規(guī)范學(xué)習(xí)內(nèi)容，時(shí)間安排非常緊張。時(shí)間短、課程任務(wù)重勢(shì)必會(huì)削弱學(xué)生的接受能力和自主創(chuàng)造力。長(zhǎng)期如此將大大降低學(xué)生的學(xué)習(xí)熱情和積極性，也影響教學(xué)效果。針對(duì)此教學(xué)現(xiàn)狀，授課教師必須從課程內(nèi)容、教學(xué)設(shè)計(jì)、教學(xué)方法等方面入手，及時(shí)調(diào)整教學(xué)方法策略，以提升教學(xué)效率。

一、“任務(wù)驅(qū)動(dòng)”教學(xué)法概述

“任務(wù)驅(qū)動(dòng)”教學(xué)法以“任務(wù)為主線，教師為主導(dǎo)，學(xué)生為主體”，是一種建立在建構(gòu)主義學(xué)習(xí)理論基礎(chǔ)上的教學(xué)法，它改變了以往傳統(tǒng)的以教師傳授知識(shí)的教學(xué)理念，轉(zhuǎn)變?yōu)橐匀蝿?wù)為驅(qū)動(dòng)的翻轉(zhuǎn)課堂教學(xué)理念;將再現(xiàn)式教學(xué)轉(zhuǎn)變?yōu)樘骄渴綄W(xué)習(xí)，使學(xué)生處于積極的主動(dòng)學(xué)習(xí)狀態(tài)。每一位學(xué)生都能運(yùn)用自己已有的知識(shí)來(lái)發(fā)現(xiàn)、分析任務(wù)模塊中的問(wèn)題，并能從已有的學(xué)習(xí)經(jīng)驗(yàn)和知識(shí)中獲得解決方案。教師必須對(duì)課程內(nèi)容進(jìn)行重構(gòu)，將知識(shí)體系分解為若干可執(zhí)行的教學(xué)任務(wù)。每個(gè)教學(xué)任務(wù)都應(yīng)該囊括大大小小的知識(shí)點(diǎn)在里邊，學(xué)生通過(guò)任務(wù)分析發(fā)現(xiàn)問(wèn)題，并在解決問(wèn)題的過(guò)程中實(shí)現(xiàn)知識(shí)點(diǎn)的內(nèi)化，最終完成教學(xué)任務(wù)。學(xué)生在完成任務(wù)的過(guò)程中，變被動(dòng)學(xué)習(xí)為主動(dòng)學(xué)習(xí)，從而培養(yǎng)學(xué)生自主探究、主動(dòng)參與、自主協(xié)作的能力。

二、《UI設(shè)計(jì)技術(shù)》課程中“任務(wù)驅(qū)動(dòng)”教學(xué)環(huán)節(jié)設(shè)計(jì)

以知識(shí)講解為主的傳統(tǒng)的教學(xué)模式很難滿足UI設(shè)計(jì)行業(yè)對(duì)開(kāi)放創(chuàng)新型UI設(shè)計(jì)人才的需求，傳統(tǒng)課堂培養(yǎng)出的畢業(yè)學(xué)生很難承擔(dān)企業(yè)的實(shí)際項(xiàng)目任務(wù)，針對(duì)此現(xiàn)狀本文結(jié)合《UI設(shè)計(jì)技術(shù)》課程內(nèi)容進(jìn)行了知識(shí)點(diǎn)重構(gòu)，并將知識(shí)點(diǎn)融合到若干個(gè)案例任務(wù)中，以任務(wù)為載體，探索“任務(wù)驅(qū)動(dòng)”教學(xué)法在UI設(shè)計(jì)技術(shù)課程中的實(shí)踐教學(xué)模式，為企業(yè)和社會(huì)培養(yǎng)出具有較強(qiáng)的動(dòng)手能力和職業(yè)素養(yǎng)的UI設(shè)計(jì)人才。

以APP界面設(shè)計(jì)模塊為例，打破教材中原有從局部到整體的零散的知識(shí)點(diǎn)講解模式，對(duì)知識(shí)系統(tǒng)進(jìn)行打散、重構(gòu)，對(duì)知識(shí)體系重新架構(gòu)，重新組合成若干系統(tǒng)完整的仿真案例項(xiàng)目，例如ios系統(tǒng)界面設(shè)計(jì)模塊就分解為餐飲類APP界面設(shè)計(jì)、音樂(lè)播放器APP界面設(shè)計(jì)、美妝類商城APP界面設(shè)計(jì)三個(gè)案例項(xiàng)目。在現(xiàn)有教學(xué)條件下，嘗試以模擬仿真APP項(xiàng)目為依托，以教師為主導(dǎo)，學(xué)生為中心，將任務(wù)分解為任務(wù)推出、任務(wù)分析、任務(wù)實(shí)施、任務(wù)評(píng)價(jià)四個(gè)教學(xué)環(huán)節(jié)。教師在各個(gè)教學(xué)環(huán)節(jié)中起引導(dǎo)、釋疑、評(píng)價(jià)的作用。學(xué)生是任務(wù)的主要實(shí)施者，以“學(xué)生為中心”貫穿任務(wù)的各個(gè)環(huán)節(jié)，在任務(wù)實(shí)施過(guò)程中學(xué)生不僅可以利用舊有知識(shí)儲(chǔ)備去解決新問(wèn)題，還可以激發(fā)學(xué)生探索新知識(shí)的熱情，增加獲取知識(shí)的樂(lè)趣，從而完成整個(gè)實(shí)踐教學(xué)。

現(xiàn)以APP界面設(shè)計(jì)模塊里其中的美妝類商城APP界面設(shè)計(jì)項(xiàng)目為例，來(lái)闡述“任務(wù)驅(qū)動(dòng)”教學(xué)模式各個(gè)教學(xué)環(huán)節(jié)的設(shè)計(jì)實(shí)施。

1、任務(wù)推出

教師在上課之前將教學(xué)任務(wù)安排通過(guò)微信群提前告知學(xué)生，并將任務(wù)所需素材及具體要求上傳到職教云平臺(tái)。學(xué)生接到預(yù)習(xí)通知，提前下載素材并了解項(xiàng)目要求。課堂上老師通過(guò)創(chuàng)設(shè)的情境引入教學(xué)任務(wù)：某化妝品商城委托你就職的UI設(shè)計(jì)公司設(shè)計(jì)一個(gè)完整的美妝商城APP，你所在的UI視覺(jué)設(shè)計(jì)組負(fù)責(zé)所有頁(yè)面的界面設(shè)計(jì)，設(shè)計(jì)組長(zhǎng)給你分配的任務(wù)是完成APP界面中的首頁(yè)和商品詳情界面的設(shè)計(jì)制作。本次教學(xué)任務(wù)是完成某美妝商城APP界面設(shè)計(jì)中的首頁(yè)和商品詳情頁(yè)面設(shè)計(jì)制作，頁(yè)面制作所需的圖標(biāo)、圖片素材已經(jīng)提供給學(xué)生。

2、任務(wù)分析

任務(wù)實(shí)施之前，教師向?qū)W生介紹分析項(xiàng)目設(shè)計(jì)具體要求。尺寸要求為：APP系統(tǒng)為ios系統(tǒng)，界面尺寸為iphone6，@2x，750*1334像素/英寸。顏色及風(fēng)格：該美妝商城APP以女性為主要消費(fèi)人群，所以顏色定位為紅色系，時(shí)尚簡(jiǎn)約，風(fēng)格偏扁平化。首頁(yè)界面主要設(shè)計(jì)的模塊為狀態(tài)欄、導(dǎo)航欄、Banner圖、功能區(qū)、新品推薦、熱銷產(chǎn)品、限時(shí)搶購(gòu)、標(biāo)簽欄。產(chǎn)品詳情頁(yè)面主要設(shè)計(jì)的版塊內(nèi)容為產(chǎn)品圖、產(chǎn)品簡(jiǎn)介、價(jià)格、加入購(gòu)物車、立即購(gòu)買等。

3、任務(wù)實(shí)施

學(xué)生在已有的項(xiàng)目要求指導(dǎo)下，開(kāi)始美妝商城APP的首頁(yè)和商品詳情頁(yè)的制作。學(xué)生利用已有的知識(shí)儲(chǔ)備自主完成兩個(gè)頁(yè)面的設(shè)計(jì)制作。在制作過(guò)程中做好過(guò)程記錄單的填寫(xiě)，把界面中涉及到的字體、字號(hào)、顏色、行距、形狀尺寸、圖標(biāo)尺寸、間距等進(jìn)行記錄，并記錄制作過(guò)程中的問(wèn)題及解決方法，解決不了的問(wèn)題做好記錄向老師反饋。老師在學(xué)生制作過(guò)程中，根據(jù)學(xué)生的制作情況進(jìn)行指導(dǎo)，并對(duì)學(xué)生在記錄單中記錄的問(wèn)題進(jìn)行解答，并針對(duì)性講解。

4、任務(wù)評(píng)價(jià)

學(xué)生在完成兩個(gè)界面設(shè)計(jì)后，將頁(yè)面的psd格式和jpeg格式上傳到職教云平臺(tái)，老師對(duì)學(xué)生的任務(wù)完成情況進(jìn)行評(píng)價(jià)，并對(duì)出現(xiàn)的問(wèn)題針對(duì)性的評(píng)價(jià)，學(xué)生根據(jù)老師提出的修改意見(jiàn)進(jìn)行修改完善，并重新提交。讓學(xué)生相互查看完成效果，并相互評(píng)價(jià)并打分。采用老師點(diǎn)評(píng)和學(xué)生互評(píng)的方式，可以更全面、公正的對(duì)學(xué)生的作業(yè)做出評(píng)價(jià)。學(xué)生在相互評(píng)價(jià)打分過(guò)程中可以發(fā)現(xiàn)自己的不足和同學(xué)的優(yōu)點(diǎn)，學(xué)生間相互學(xué)習(xí)，相互激勵(lì)，激發(fā)了學(xué)生的學(xué)習(xí)熱情和積極性。

【參考文獻(xiàn)】

[1] 唐治，李穎. “項(xiàng)目貫穿式” UI互動(dòng)設(shè)計(jì)教學(xué)探索——以工業(yè)產(chǎn)品中的軟件界面設(shè)計(jì)為例[J]. 電腦知識(shí)與技術(shù)，2017.08.

[2] 沈愛(ài)鳳，韓學(xué)芹.職業(yè)教育中“任務(wù)驅(qū)動(dòng)式”教學(xué)模式的探討與應(yīng)用[J].職教論壇，2016.02.

[3] 劉哲緯.高職自動(dòng)化專業(yè)教學(xué)改革中的相關(guān)問(wèn)題研究[J].高教探索， 2016.05.

[4] 徐樂(lè).項(xiàng)目驅(qū)動(dòng)教學(xué)法在“Flash 動(dòng)畫(huà)設(shè)計(jì)”課程教學(xué)中的應(yīng)用[J]. 職教通訊，2014.07.

【作者簡(jiǎn)介】

劉民娟，女，講師，主要從事數(shù)字媒體應(yīng)用技術(shù)專業(yè)相關(guān)課程的教學(xué)工作.

李穎云，女，副教授，主要從事軟件技術(shù)專業(yè)相關(guān)課程的教學(xué)工作.