新文科背景下混合式教学在《UI设计》课程中的创新应用——以《UI动效设计》模块为例

程嘉萱 李源枫

浙江农林大学暨阳学院晨晓艺术与设计学院

2020年11月《新文科建设宣言》发布，为适应新时代文科发展面临的新环境、新挑战以及新机遇，新文科建设全面启动。新文科建设要求从理论体系创新、专业建设质量和优化课程结构等方面来建设新文科。

随着信息化服务行业快速发展，企业对UI设计师的岗位技能要求逐步提高。由静态视觉设计转向动态交互设计。为了改善学生就业质量低、毕业生能力与实际岗位需求脱节等现象，《UI设计》课程改革迫在眉睫。混合式教学是教育信息化发展的必然趋势，现阶段各高校均采取了线上线下混合式教学的手段，混合式教学需要经过缜密的教学设计才能展现优势，它要求教师充分利用混合式教学的优势调动学生的主观能动性，引导学生积极参与到课程实践中来，使其能适应社会新型人才的发展需要。同时改进教学模式，优化教学资源，转变教学思想，创新教学设计，将新模式应用到相关设计类课程当中。

针对以上背景,本文结合《UI动效设计》单元的教学实践，探索混合式教学在《UI设计》课程中的创新应用，从课程改革层面进一步推进新文科建设，为社会提供适应时代新环境的高素质应用型人才。

一、《UI设计》课程混合式教学现状及存在问题

《UI设计》作为信息化社会发展下的一种新兴职业，大部分应用型人才培养高校均开设了《UI设计》课程。现阶段大部分互联网企业对UI设计师的软件技能要求为：PhotoshopAdobeIllustratorAfterEffectsAdobeXD，然而目前学生关于AfterEffects和AdobeXD的软件学习基础为零。传统的线下教学难以兼顾两款软件的教学内容，为了保证课程的完整性与实用性，教师必须应用混合式教学模式，合理利用线上资源库辅助线下课程教学。

现阶段，《UI设计》课程混合式教学主要存在以下问题。

1.教学资源陈旧，难以适应不同水平的学生。

目前《UI设计》课程线上教学资源更新迟缓，尤其是案例与软件教学内容难以适应技术发展潮流，技能教学内容实用性差。同时，相同的课程内容对于零基础同学来说熟练掌握有一定困难，对于有一定学习基础的同学提升应用能力的帮助不大。

2.知识点不连贯，缺乏整体性。

线上课程以案例教学为主，学生跟随课程内容临摹，完成教师设定的模拟练习项目。《UI设计》结课后，学生对知识掌握情况模棱两可，熟悉的项目会习惯性的寻找案例模仿设计，对于课程未接触过的内容不敢着手进行创意设计，不符合新文科要求下的应用型人才培养目标。

3.教学内容理想化，与实际项目需求不符。

由于教学内容理想化，学生设计作品视觉效果虽好，却未控制实现成本，导致作品无法落地实施，造成就业时发现大学时的项目经验难以适应实际项目需求的尴尬局面。

二、《UI动效设计》单元混合式教学模式的构建思路

传统教学模式以教师为中心，教师仅利用有限的课堂时间讲授知识解答学生的问题，没有渠道和方法引导学生进一步思考与更深层次的交流。针对新文科建设下UI设计人才的社会需求，传统混合式教学模式无法将学生的主观能动性与企业的实际需求匹配。

针对传统混合式教学模式的不足，混合式教学模式创新应用主要有以下三点设计对策：

1.优化教学资源包，实现分层教学。

以学生为中心，实现分层教学，利用《我是校园》与《智慧树》平台，整合《UI动效设计》教学资源库。依据学生的知识水平与学习规律，将教学资源内容分为简单—进阶—困难三个部分。课前摸底，采用分层教学法，为不同知识水平的学生分配不同的教学资源包。

2.知识模块化设计，采用任务驱动法。

优化教学结构，将UI动效设计知识模块化设计。以“问题导向”与“任务驱动”为教学设计原点，优化线上、线下课程内容衔接，删减重复教学内容，强化重点难点教学内容。

3.以项目为导向，打造互动式课堂。

教学模块分别结合实际企业项目或比赛项目，实现“产赛教”融合，将班级分成若干小组，以小组形式开展教学活动。通过合作式的学习，开发潜能，培养团队合作能力。翻转教学，把课堂交给学生，打造互动式课堂。

三、《UI动效设计》单元混合式教学模式设计

《UI设计》课程是视觉传达设计专业的限选课程，《UI动效设计》是课程中的一个教学单元。教学单元主要内容围绕以用户体验为核心的界面动效设计展开，利用混合式教学设计可以强化学生对用户体验设计的理解，增加学生实践学习的自觉性与主动性。

1.教学分析。

（1）课程定位。《UI设计》课程在第5学期开设，64学时。其前置课程为专业基础课：计算机辅助设计、字体设计、标志设计、版式设计。后续课程为专业应用课：APP设计、毕业设计等。

传统课程架构中，理论与软件实操部分分属线上线下教学模式。课程中学生被动接受理论知识，软件实操教学学生临摹案例，枯燥乏味。对教学内容解构再设计后，设计理论与软件实操相互融合，赛产教融合。课程内容模块化设计，采用分层教学设计，提升学生学习效率。

（2）学情分析。对于大三学生来说，大二学习的字体设计、标志设计、编排设计等前置课程已经帮助他们掌握了运用Photoshop、Adobe Illustrator等平面软件进行静态图形设计的能力，UI动效设计单元难点在于熟练使用动效制作软件After Effects将静态图形转化为动态图形，实现用户体验与设计内容、界面动效与人机交互的完美融合与实现。教学设计时，加入分层教学与项目化教学方法，引导学生自主学习，教师在线下课堂中着重把控设计思维与设计理念，鼓励学生创意创新，团结协作完成各项项目任务。

（3）课程目标与教学重点难点。《UI动效设计》单元的教学目标是使学生掌握 UI 动效设计基本理论知识和基本创作技能，掌握各类UI动效设计的基本设计手法和动效设计软件After Effects的使用方法，能够独立完成各类UI动效设计作品。

本单元的教学重点为动效在UI交互中的应用设计，教学难点为以用户体验为中心的UI动效应用设计。

2.教学设计。

采用“问题导向”-“任务驱动”的翻转课堂学习方式。学生带着自主学习和项目小组讨论的问题来到线下课堂寻求教师解答，翻转课堂的有点是可以激发学生学习的主观能动性与学习积极性，学生在问题-解答-思考-实操这样一个过程中完成课程任务与项目训练，获得思维与技能双重提升。

3.教学流程。

（1）课前准备。通过《智慧树》平台布置学习任务及线下课程问题。学生登录平台领取任务，线上教学资源学习，搜集线下问题资料，总结思考结果并上传平台。

（2）课堂教学。《UI动效设计》单元课堂教学共分为“学生自主预习——学生交流展示——教师精讲点拨——课堂巩固训练——动效翻转微课堂——教学小结提升——课后拓展任务——学生研讨总结”八大环节。

（3）课后拓展。学生将课程项目汇总整理后发布到线上教学平台。教师布置课后拓展阅读，通过线上平台继续更新分享动效设计相关内容，与学生保持良好的互动。

4.教学评价。

课程采用多维度评价的模式，更加科学合理，生生互评提升了学生课堂参与度，企业评分帮助学生明晰了社会实际需求与理想化设计的差距，教师全程参与线上线下教学，针对学生线上线下课堂综合表现提供整体性评价。

四、《UI动效设计》单元混合式教学应用效果分析

混合式教学的应用提升了学生学习动效设计的积极性及自觉性，学生软件技能与设计思维均得到了良好的提高。学生基本掌握教学重难点，课程教学基本达标。对比传统教学模式，学生对课程线上资源、课堂教学、课程考评以及就业指导的实用性评价均有显著提升。从新文科建设角度来看，课程改革后的人才培养符合时代与社会的需求，能够适应大部分企业对于UI设计人才的需求。

五、结语

《UI动效设计》教学单元教学设计科学系统，充分利用了线上教学资源包教授设计理论，训练学生软件实操技能，同时结合线下“赛产教”项目训练学生的设计创意思维与小组协作能力。课程重构后培养了一批集自主学习、创意创新与技术实操能力于一体的符合社会需求的《UI设计》人才。新文科建设环境下，根据视觉传达设计专业的学科共性，为培养更多适应时代发展的高素质应用型人才，混合式教学模式的创新应用可推广至其他相关课程中。