UI設(shè)計領(lǐng)域工作過程為導(dǎo)向的Web前端多課程聯(lián)合教學研究

成瀾，吳建明

（蘇州工業(yè)園區(qū)職業(yè)技術(shù)學院 人工智能學院，江蘇蘇州 215021)

1 Web前端方向?qū)I(yè)課程教學現(xiàn)狀

1.1 Web前端開發(fā)課程技術(shù)上缺乏先進性

課程教學內(nèi)容的迭代更新需要一定的周期，高職軟件專業(yè)受到技術(shù)種類、課時數(shù)、學生能力、教師專業(yè)更新等方面的限制，Web前端開發(fā)課程內(nèi)容的專業(yè)性還停留在基礎(chǔ)的HTML+CSS+JavaScript上，教學內(nèi)容滯后于技術(shù)的發(fā)展[1]。對國家已經(jīng)發(fā)布的三批“1+X”職業(yè)技能等級證書標準的統(tǒng)計可以發(fā)現(xiàn)，與信息大類專業(yè)相關(guān)的11個專業(yè)中，網(wǎng)站建設(shè)與管理類專業(yè)的證書支持度超過50%[2]。以Web前端開發(fā)證書為例，新框架技術(shù)的引入能簡化前端開發(fā)工作，幫助學生更快適應(yīng)崗位實際對新技術(shù)的需求，推動專業(yè)課程改革。

1.2 Web前端開發(fā)課程內(nèi)容上缺乏多樣性

因為授課對象是工科專業(yè)的學生，基于崗位需求的人才培養(yǎng)方案制定時，課時幾乎都用于各種軟件開發(fā)和數(shù)據(jù)庫設(shè)計技能的教學。對于專科生，這樣的教學更適合在軟件開發(fā)方向?qū)W有余力的學生，可是也有相當一部分學生未來不會從事程序開發(fā)，可以是項目管理、交互設(shè)計與實現(xiàn)等，這就需要為他們的就業(yè)考慮多樣性的學習內(nèi)容。

1.3 Web前端開發(fā)課程示例上缺乏連貫性[3]

項目化的教學方法，每一門課程都不缺乏案例，但案例在課程間缺乏連貫性，不利于多課程的融會貫通、綜合應(yīng)用。而且教師給出的統(tǒng)一案例，也不足以激發(fā)和維持學生的實踐興趣。

2 Web前端方向多課程聯(lián)合教學設(shè)計

2.1 以典型工作任務(wù)為目標，確定核心技能的全面鋪陳

一款互聯(lián)網(wǎng)產(chǎn)品或者是移動互聯(lián)產(chǎn)品的開發(fā)工作大致包含如表1所示流程環(huán)節(jié)。

2.2 以崗位核心技能為出發(fā)點，確定專業(yè)課程的立體構(gòu)成

從崗位技能到專業(yè)課程的轉(zhuǎn)換大致如表2所示，專業(yè)課和選修課相結(jié)合，線下面授和線上自學相補充，既夯實學生專業(yè)知識的寬基礎(chǔ)，又支持基于興趣的個性化深入，同時兼顧面向職業(yè)的跨學科多方向發(fā)展、綜合素質(zhì)的養(yǎng)成以及終身學習的要求[4]。

表2 崗位技能到專業(yè)課程的轉(zhuǎn)換表

2.3 以學習產(chǎn)出為導(dǎo)向，確定多課程聯(lián)合教學思路

企業(yè)參與的“1+X”職業(yè)技能等級標準本身就可以看作是基于OBE（Outcome Based Education）核心理念的教學改革。這個改革是包含了教師、教材、教法的改革。

學生自主選擇項目，既保護學習興趣，又培養(yǎng)發(fā)散思維和創(chuàng)新思考能力；通過項目直接體驗，學習知識、掌握技能的同時提升對業(yè)務(wù)的熟悉程度；研究探索是最高階段，開發(fā)手段的種類和技術(shù)迭代日新月異，校內(nèi)教學的寬度和深度都不足以應(yīng)對所有可能的崗位需求。以項目為導(dǎo)向，將課程中的知識點散點式融入，鼓勵學生自主修補知識體系的“間斷點”[5]，構(gòu)筑自己的知識“金字塔”，應(yīng)該是理想的課程學習方式[6]。

本課題是教法改革的探索，以移動互聯(lián)應(yīng)用開發(fā)專業(yè)Web前端開發(fā)方向多門相關(guān)課程為研究對象，遵循UI設(shè)計領(lǐng)域?qū)嶋H工作過程導(dǎo)向，選用某個類商業(yè)產(chǎn)品案例，將其設(shè)計、開發(fā)的各個工作流程拆分到多門教學課程中作為課程案例，合理安排開課先后次序和教學課時，前后貫通，實現(xiàn)多課程聯(lián)合教學。學生的項目作業(yè)以自主創(chuàng)意為主題，并不是案例的簡單模仿。

3 UI設(shè)計領(lǐng)域工作過程為導(dǎo)向的多課程聯(lián)合教學

產(chǎn)品開發(fā)流程中的任一崗位的工作都不是獨立的，都需要前期的需求討論、后期開發(fā)、測試驗收等產(chǎn)品設(shè)計與實現(xiàn)的多個環(huán)節(jié)，是多崗位協(xié)同的工作。而高職教育的目的是以具體職業(yè)崗位需求為依據(jù)，幫助學生獲得某種職業(yè)技能，從而滿足從事某種職業(yè)生產(chǎn)勞動的需要。所以我們的每一門課程也不應(yīng)該是孤立地教會學生一項技能，如果能夠以多課程教學案例模擬產(chǎn)品開發(fā)流程的不同環(huán)節(jié)典型工作任務(wù)，實現(xiàn)聯(lián)合教學，才能讓學生對產(chǎn)品開發(fā)流程各環(huán)節(jié)的工作有系統(tǒng)、完整的概念，得以將所學各項技能融會貫通，能迅速融入崗位角色。

本課題研究的課程體系中的UI設(shè)計崗位綜合應(yīng)用類課程的規(guī)劃和授課，正是基于以上理念的一種聯(lián)合教學實踐。不同課程教學任務(wù)雖然由多位教師分別承擔，但師資團隊同時也模擬一個項目研發(fā)團隊，前期商討決定一個具有一貫性的課程案例，例如在本課題中以一個學生課堂簽到微信小程序為案例貫穿多課程教學始終。

產(chǎn)品設(shè)計課的教師以此為案例，向?qū)W生介紹如何進行產(chǎn)品定義。學生分團隊頭腦風暴規(guī)劃自己的產(chǎn)品，并推進后續(xù)的用戶研究、市場分析等流程，撰寫最重要的產(chǎn)品需求文檔，人人都是產(chǎn)品經(jīng)理。在流程的每個階段，學生采用項目匯報的方式展示各自的成果，教師參與其中點評每個環(huán)節(jié)。

交互設(shè)計課程的教師，仍然以課堂簽到微信小程序為例，講授如何根據(jù)產(chǎn)品需求文檔進行信息架構(gòu)搭建、按規(guī)范完成交互原型設(shè)計。學生團隊以此為參照完成各自項目的交互設(shè)計，并用Axure工具制作交互原型并附以交互說明文檔。教師案例如圖1所示，為課堂簽到微信小程序首頁交互設(shè)計文檔。

圖1 課堂簽到微信小程序首頁交互設(shè)計及說明

UI視覺設(shè)計課程會根據(jù)上一課程完成的產(chǎn)品交互稿，借助Photoshop工具繪制出團隊項目主要頁面效果圖和開發(fā)所用到的各類圖標，以及視覺設(shè)計規(guī)范文檔。例如：教師端（左）和學生端（右）簽到頁面效果圖如圖2所示。

圖2 教師端（左）和學生端（右）簽到頁面效果圖

UI框架設(shè)計課程主要利用現(xiàn)成的主流移動端Web框架，教會學生按照各自團隊的交互設(shè)計原型和視覺設(shè)計效果圖，以及背景、圖標等素材修改框架，完成產(chǎn)品前端開發(fā)，課程結(jié)束時產(chǎn)品開發(fā)的半成品已類似于高保真原型效果。

最后環(huán)節(jié)的移動互聯(lián)應(yīng)用開發(fā)課程，除了基于微信平臺的小程序開發(fā)需要新學習的WXML以及高級接口的使用，其余工作全是利用前期課程所學技能和所積累的素材完成開發(fā)，例如利用PHP訪問服務(wù)器，產(chǎn)生JSON數(shù)據(jù)；利用HTML5做數(shù)據(jù)頁面呈現(xiàn)等，是前期所有教學的融會貫通和成果體現(xiàn)。最終完成團隊產(chǎn)品的開發(fā)，并進入產(chǎn)品測試環(huán)節(jié)。

4 結(jié)語

本課題在完成前期行業(yè)需求、培養(yǎng)現(xiàn)狀調(diào)研的基礎(chǔ)上，在“1+X”Web前端開發(fā)職業(yè)技能標準的指導(dǎo)下，在軟件技術(shù)專業(yè)試行了部分相關(guān)課程的聯(lián)合教學實踐，取得了一定的預(yù)期成效，并在此基礎(chǔ)上繼續(xù)完善課程體系，力圖合理對接行業(yè)崗位對人才技能的需求。

在教學實踐過程中我們也發(fā)現(xiàn)，有限的藝術(shù)類通識課程不足以提升工科學生的藝術(shù)修養(yǎng)、審美水平和設(shè)計技能，軟件專業(yè)的學生在產(chǎn)品開發(fā)過程中更專注功能的實現(xiàn)，在視覺設(shè)計方面或是因為水平不夠，或是因為重視不足，產(chǎn)品外觀差強人意，導(dǎo)致綜合體驗感遠遠達不到商業(yè)產(chǎn)品的水準。一方面在課程體系中增加了更多藝術(shù)類、心理類、營銷類的選修課，一方面也引導(dǎo)軟件專業(yè)的學生在實習和初次就業(yè)時可從產(chǎn)品助理、交互設(shè)計、用戶體驗設(shè)計等崗位切入。