成澜，吴建明

（苏州工业园区职业技术学院 人工智能学院，江苏苏州 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前端开发职业技能标准的指导下，在软件技术专业试行了部分相关课程的联合教学实践，取得了一定的预期成效，并在此基础上继续完善课程体系，力图合理对接行业岗位对人才技能的需求。

在教学实践过程中我们也发现，有限的艺术类通识课程不足以提升工科学生的艺术修养、审美水平和设计技能，软件专业的学生在产品开发过程中更专注功能的实现，在视觉设计方面或是因为水平不够，或是因为重视不足，产品外观差强人意，导致综合体验感远远达不到商业产品的水准。一方面在课程体系中增加了更多艺术类、心理类、营销类的选修课，一方面也引导软件专业的学生在实习和初次就业时可从产品助理、交互设计、用户体验设计等岗位切入。