UI設計領域工作過程為導向的Web前端多課程聯合教學研究

成瀾，吳建明

（蘇州工業園區職業技術學院 人工智能學院，江蘇蘇州 215021)

1 Web前端方向專業課程教學現狀

1.1 Web前端開發課程技術上缺乏先進性

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

1.2 Web前端開發課程內容上缺乏多樣性

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

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

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

2 Web前端方向多課程聯合教學設計

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

一款互聯網產品或者是移動互聯產品的開發工作大致包含如表1所示流程環節。

2.2 以崗位核心技能為出發點，確定專業課程的立體構成

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

表2 崗位技能到專業課程的轉換表

2.3 以學習產出為導向，確定多課程聯合教學思路

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

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

本課題是教法改革的探索，以移動互聯應用開發專業Web前端開發方向多門相關課程為研究對象，遵循UI設計領域實際工作過程導向，選用某個類商業產品案例，將其設計、開發的各個工作流程拆分到多門教學課程中作為課程案例，合理安排開課先后次序和教學課時，前后貫通，實現多課程聯合教學。學生的項目作業以自主創意為主題，并不是案例的簡單模仿。

3 UI設計領域工作過程為導向的多課程聯合教學

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

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

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

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

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

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

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

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

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

4 結語

本課題在完成前期行業需求、培養現狀調研的基礎上，在“1+X”Web前端開發職業技能標準的指導下，在軟件技術專業試行了部分相關課程的聯合教學實踐，取得了一定的預期成效，并在此基礎上繼續完善課程體系，力圖合理對接行業崗位對人才技能的需求。

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