线上线下混合式教学模式在网站设计专业课程中的探索与实践

麦小霞

摘 要：现代信息技术的发展丰富了教师的教学方式，很多学校线上教学也发展得不错，如何充分发挥线上教学的优势，将疫情防控期间的线上教学经验运用到传统线下教学中，成为教学改革的研究热点。本文基于对网站设计专业课程教学现状的分析，探索了线上线下混合式教学模式，以Web UI设计课程为例进行了教学设计与实践，并进行了总结和反思。

关键词：线上线下 混合式教学 网站设计专业

得益于信息技术的飞速发展，信息技术将进一步融入常规教学活动，对基于“互联网+”的线上线下混合式教学模式进行理论和实践研究是深化网站设计专业课程改革的必然要求，对实现专业教学的发展和创新有着重要的意义。

一、网站设计专业课程教学现状分析

（一）传统线下课堂教学模式现状分析

1.教学的形式不够多样化

网站设计专业课程属于实践类课程，在教学过程中，多是以面授为主，教师讲解知识点、示范技能操作方法，学生使用教师提供的素材，运用所学到的方法把界面临摹出来，从而学习相关的知识和技能。

2.学生的学习方式以被动接受为主

在网站设计专业课程的教学中，教师讲解知识点与操作演示需要占用大量的时间。在教学过程中，教师处于主体地位，学生处于被动参与地位。教学输出占用了大部分课堂时间，学生没有独立思考和独立探索的时间，这样容易导致学生对知识技能理解不到位，如若换成其他同类型的项目让学生尝试独立完成，他们往往都是没法完成的。

3.学生的水平参差不齐

在前面两年的学习中，学生的网站设计水平有着显著的差异，学生的软件操作熟练程度不同，设计理论知识的掌握程度也不同，完成同样的项目所需花费的时间有比较大的差异。在传统课堂教学模式中，教师只能考虑大部分学生的学习进度，不可能分配大量的时间给进度慢的学生，进度慢的学生在课后如果没有教师的辅导，不知道如何学习完剩下的内容。

（二）网站设计专业课程线上线下混合式教学模式可行性分析

1.相关部门建立了线上课程资源平台，提供了优质教育资源

2020年9月16日，教育部等九部门印发的《职业教育提质培优行动计划（2020—2023年）》通知中，提出要推动信息技术与教育教学深度融合，分级遴选5 000门左右职业教育在线精品课程，进一步扩大了优质教学资源库的建设、应用及资源共享。

截至目前，超星学习通平台和中国大学MOOC（慕课）上都有网站设计专业相关在线开放课程，如UI设计与制作、移动UI设计、UI设计等，为网站设计专业课程的线上线下混合式教学的开展提供了优质课程资源支持。

2.网站设计专业以实践性课程为主，课程性质决定了本专业课程适合采用混合式教学模式

在网站设计专业课程教学中，学生首先需要掌握设计的相关理论知识，然后通过大量的网页元素设计、各种类型的网页界面设计等实践练习，掌握网页设计的知识与技能。

实践练习是网站设计专业知识的有效获取途径，进行线下教学时教师可进行面对面辅导，随时答疑反馈，这是线上教学所不具备的。虽然线上教学拓展了课堂的空间，学习不受时间的限制，学生可以随时随地、多次学习课程内容，但也存在自主学习能力弱的学生无法独自通过线上学习掌握课程的知识技能等缺点。

因此，只有将线下的实践指导与线上的学习相结合，才能真正实现网站设计专业课程的混合式教学，提升教学质量。

二、网站设计专业线上线下混合式教学模式的探索

网站设计专业对接互联网企业，以前端开发工程师、UI设计师等职业需求为导向，以网站设计实践能力培养为主，更加侧重学生的技能培养。本专业招生面向的是初中毕业生，部分学生自律性差、学习的积极性和主动性不强。

结合网站设计专业的课程特点及对学生的学情分析和教师自身的实践教学经验，本专业课程线上线下混合式教学模式主要采用线下主导、线上为辅的模式，分为课前、课中、课后和评价四个部分。

课前，教师精心设计教学，寻找线上资源，線上推送资源给学生；学生自主学习，提交作业；教师在线给予学生学习反馈，开展答疑、组织学生进行线上互评互动等活动，实现课程的知识学习目标。

课中，教师线下检验学生课前学习成果，通过讲解或演示帮助学生掌握学习的重难点；学生进行实训项目实践，转化知识内容，完成课程的能力目标。

课后，教师线上推送拓展资源、答疑并进行下一次任务的推送，学生自主完成拓展内容，进行知识技能的巩固内化，完成课程的职业素养目标。

学习评价贯穿整个教学过程，课前、课中、课后都有学习评价反馈，通过实践，探索“线上资源学习、线下活动巩固、过程评价反馈”的线上线下混合式教学模式。

三、线上线下混合式教学设计与实施——以Web  UI设计课程为例

（一）课程目标

在网站设计专业课程中，Web UI设计是一门专业核心课程，教师根据企业典型工作任务所需的职业能力要求进行教学，遵循比较学习原则，设计了四个学习任务，按照目标递进原则、比较学习原则确定了本课程的学习目标，帮助学生提升学习能力。Web UI设计课程学习任务和学习目标具体如下。

任务一：和茶企业官网UI设计。学习目标是达到基础层次需求，阐述UI设计的基本概念、特征、设计规范、设计原则、设计流程，按照教师的演示一步步完成UI设计。学生能识记并理解UI设计基础知识。

任务二：和茶企业官网响应式UI设计。学习目标是达到应用层次需求，运用UI设计规范、设计原则、设计流程，在教师的指导下，学着去完成UI设计。学生能理解并运用UI设计知识与技能。

任务三：和茶企业App UI设计。学习目标是达到综合层次需求，根据客户要求，独立完成UI设计。学生能运用UI设计知识独立完成界面设计，能分析并评价UI设计界面。

任务四：和茶企业小程序UI设计。学习目标是达到创新层次需求，运用UI设计的方法技能，根据客户要求，制定设计方案，创新并独立完成UI设计。学生能运用UI设计知识创造性地完成不同UI产品界面设计，达到高阶能力标准要求。

（二）课程教学设计与实施

Web UI设计是一门实践性很强的课程，为了达到课程学习目标，学生从第一个学习任务，即UI设计基本知识的识记、理解的学习目标开始学习，到最后一个学习任务，即创造性运用UI设计知识的学习目标结束，教学包括课前、课中、课后、评价四个环节。

1.课前线上自主学习

教师根据学习目标、学情分析，录制UI设计规范、UI设计流程等案例视频，并根据课程需要选用中国大学MOOC（慕课）在线开放课程移动UI设计里的部分视频资源。在教学过程中，把课程相关资源上传至超星学习通平台，并向学生发送学习任务通知，即自主学习理论知识，完成线上测试，并收集UI界面设计案例。学生接到课程学习任务后，线上进行自主学习，为后续课堂教学奠定理论基础。同时，教师在线指导并鼓励学生参与讨论、积极思考。

将学生的讨论过程及视频学习进度、线上测试成绩等作为学生过程考核评价的内容，同时评价考核学生的自主学习能力、表达能力等职业素养。

2.课中线下集中面授学习

课堂集中学习以培养学生Web UI设计的专业技能为主。

首先，教师针对学生课前自主学习情况进行点评，再针对学生学习薄弱的环节或者本次课的关键知识点进行重点讲解。

其次，对学生课前搜索到的优秀UI设计界面进行赏析，鼓励学生讨论、分析UI界面设计的优点和设计的逻辑，明确不同类型UI界面设计的关键点，为如何设计UI界面做铺垫。教师以茶企业为主体演示如何通过头脑风暴整理出页面所需的元素，再运用线上微视频学习到的设计规范、设计规则等知识，设计出和茶企业官网、App和小程序界面，引导学生思考，内化课堂知识。

最后，学生在教师指导下完成UI界面设计，并进行展示互评。

将学生在课堂中的学习过程表现，如课堂参与度、课堂知识掌握程度作为学习过程评价的一部分内容。学生设计作品的质量，包括界面设计的完成度、界面主题的表现、界面设计的规范、界面设计的视觉效果、界面设计的创新和界面设计是否符合企业要求等作为学生成果考核评价的一部分，侧重职业能力的评价，同时评价学生的表达能力、分析归纳能力等职业素养。

3.课后线上拓展提升

课后的学习侧重课堂的学习反馈和拓展提升。学生可以在超星学习通平台提出对课堂学习内容有疑问的知识技能点，教师组织学生一起讨论回答。另外，操作技能较弱、操作速度慢的学生，可以在线观看操作视频，完成作业。教师在线提供拓展项目案例的相关资源，让学生巩固拓展本次所学内容。将学生课后完成的拓展练习作为学生职业素养评价的一部分内容，评价学生的知识迁移能力、自主学习能力等。

4.评价贯穿始终

课程评价以学习目标为导向，重点对学生的职业素养和职业能力进行评价，包括学生的自主学习能力、沟通表达能力等职业素养通用性指标，也包括学生的知识理解、技能掌握等专业性指标，从不同角度关注学生综合职业能力和职业素养的培养，把职业能力目标与职业素养目标的评价分散在课前、课中、课后的学习中完成，贯穿课程教学始终。

四、网站设计专业课程线上线下混合式教学的总结与反思

目前，Web UI设计课程采用了线上线下混合式教学模式，整体而言，学生还是喜欢这种新的教学模式，肯定了这种教学模式的优势。例如，线上学习的时間灵活，可以反复学习，大大提高了学习的主动性；线下课堂集中学习有助于消化重难点知识，提高知识的运用能力，提升技能水平等。

同时，在教学过程中，混合式教学也存在一些问题，如视频资源制作质量有待提升，视频时间长度还需斟酌，教师教学任务加重、影响教学情绪等。

为了在网站设计专业课程中更好地采用线上线下混合式教学模式，取得更好的教学效果，笔者在现有课程实践经验基础上进行反思，认为需要在以下三个方面继续改进。

（一）师生需要充分利用现有线上课程资源平台

高质量的课程资源是线上线下混合式教学开展的基础，一方面教师要充分利用超星学习通平台、中国大学MOOC（慕课）等开放平台上的资源，也需要继续挖掘收费培训类平台，整合不同平台的资源，丰富线上教学资源，另一方面要允许学生根据自己的学习进度或者兴趣爱好自主选择对应的知识点进行学习，这样可以大大提高学生学习的主观能动性和学习自由度。

（二）教师的引导、监控教学过程的作用需要进一步发挥

线上线下混合式教学模式是以学生为主体、教师为主导的教学方式，这对教师、学生的能力有更高的要求，需要教师全程监控学生的学习，准确掌握学生的学习情况。教师要充分发挥学习平台的数据监控功能，或者引入人工智能学情分析系统，通过采集学生的学习数据，了解学生的学习情况或学习偏好，为学生精准推送相应的线上资源包，促进学生学习能力的提升。

（三）需要构建多层次、多主体的评价体系

线上线下混合式教学模式要求学生有更强的自主学习能力，但部分学生学习自觉性比较欠缺。

因此，应当多设置不同类型的线上过程化考核评价方式，如线上观看课程视频、线上投票答题、线上讨论、线上作业互批和线上理论测试等，提高学生的兴趣，增强学生的参与感，完善学生自主学习的激励机制。

线下课堂的评价，一方面以课堂学习过程中的观察为主，学生和教师共同评价学生的团队合作能力、沟通协调能力和解决问题能力等职业素养，另一方面通过学生完成项目的质量来评价专业能力，并且可以引入企业专家共同参与评价，让学生设计的作品更加符合企业需求。

参考文献：

[1]王文豪，仇冬，陈晓兵，等.线上线下混合教学模式构建：以Java程序设计为例[J].湖北师范大学学报（哲学社会科学版），2021（4）.

[2]袁贝贝.线上线下融合教学模式平台构建研究：以三维动画制作课程为例[J].信息与电脑（理论版），2020（22）.

[3]侯征.线上线下混合式教学在景观规划设计课程中探索与实践[J].现代园艺，2021（19）.

[4]过梦旦.Python课程线上线下混合式教学研究与实践[J].中国新通信，2021（17）.

[5]吴燕.线上线下混合式教学模式在“计算机辅助设计”课程中的探索[J].安徽建筑，2021（11）.

[6]从悦.网络营销视域下混合式教学在网页美工课程改革中的实践与研究[J].营销界，2020（47）.

[7]孙可，赵楷夫.线上教学到线上线下混合式教学实践[J].沈阳师范大学学报（自然科学版），2021（4）.

（作者单位：广州市工贸技师学院）