劉民娟 李穎云

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

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

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

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

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

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

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

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

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

1、任務(wù)推出

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

2、任務(wù)分析

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

3、任務(wù)實施

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

4、任務(wù)評價

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

【參考文獻】

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

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

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

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

【作者簡介】

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

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