后疫情时代UI界面设计混合式教学研究与实践

周俏

摘  要  由于疫情原因，很多課程由线下搬到了线上，线上+线下混合式教学即将成为一种新的教学常态。对于一些计算机实践操作类的课程如何混合式教学，促进学生自主、泛在、个性化学习，是一件颇具挑战的任务。围绕UI界面设计课程，对其线上与线下结合的混合式教学改革以及实践展开深入分析与研究，希望为相关教学提供参考与借鉴。

关键词  平面设计；UI界面设计；混合式教学

中图分类号：G652    文献标识码：B

文章编号：1671-489X（2023）13-0124-04

1  UI界面设计课程概述

UI即User Interface（用户界面）的简称。用户界面设计作为屏幕产品最重要的组成部分，是指用户和特定系统进行互动过程的集中展现。UI界面设计因为其传播媒介、互动状态和呈现效果与平面设计门类有很大的不同，所以，UI界面设计的学习和课程教学具有一定的独立性。

“UI界面设计”作为一门新兴学科，是一门集技术与艺术于一体的基础学科，课程的设置面向职业岗位要求，职业岗位针对性较强，涉及较强的专业技能。

这门课程属于计算机应用技术专业——平面设计发展方向的一门专业必修课，具有很强的应用实践性，主要面向移动互联网平台基础上的各种产品界面设计以及开发。由于本课程方向的人才需求旺盛，具有极其广阔的就业前景。

笔者所在学校的UI界面设计课程在第二学年第二学期开设，学生经过一年半时间的学习，对于平面设计的相关基础理论和技术已经有所了解和掌握。课时为4学时/周，16周完成，共计64学时。

2  三维教学目标分析

这门课程的有效学习，能够促进学生互联网产品设计思维能力的有效提升，让学生掌握关于制作设计手机界面的基本能力，全面掌握关于界面设计开发的基本原理，熟悉界面设计的基本规范以及正确流程；让学生能够正确使用有关软件进行图标绘制，制作界面的基本效果图等；让学生能够正确运用Axure软件实现原型开发与交互设计，从而可以制作设计出完整系统化的移动界面设计的基本方案，以此有效胜任关于用户体验、视觉设计以及交互设计等方面的工作岗位需求。

2.1  知识目标

1）了解UI基本理论；

2）了解用户体验；

3）了解界面设计开发的原理；

4）掌握界面设计的规范流程；

5）掌握图标、控件的绘制以及界面效果图的制作；

6）知道切图和标注；

7）学会使用Axure软件进行原型开发及交互设计；

8）熟悉产品提案方法技巧等[1]。

2.2  技能目标

1）掌握常见按钮设计方法和质感表现技术；

2）能独立完成一套华为手机主题图标的设计；

3）能小组合作设计出一套手机端完整移动互联网产品；

4）能举一反三、独立完成一定难度的设计任务。

2.3  情感与态度目标

1）培养学生团队协作意识，相互协作能力；

2）注重学生良好的表达能力的养成；

3）培养学生的工作、学习的主动性；

4）培养学生精益求精，不断创新的工匠精神；

5）培养学生良好的审美意识，提高学生的艺术修养。

3  教学内容分析

本课程依据课程教材、教学大纲，根据《深圳市交互界面开发专项职业能力考核规范》和UI设计工作的基础流程，即“结构设计—视觉设计—交互设计”，以培养学生熟练设计UI界面及各元素（图标、控件等）的能力为主线，让学生熟悉UI界面设计的前期以及后期的各项工作内容，具体包括流程图设计以及交互设计等。将教学内容按照理论、案例教学、综合实训三大模块分为：UI理论、流程图设计等10个章节。教学内容之间的关系，具体如图1所示。

4  立体化课程资源建设

具备高速上网、广播教学功能的多媒体机房的选用，实现全面调动、全员动手，体验“创作之旅”线下课程的快乐。把课堂建在实训室，将理论课堂以及实践场地进行有机结合，促进学生职业体验的有效丰富。

当前已进入“互联网+”时代，尤其对于UI界面设计这样走在移动互联前端的课程来说，传统单一的纸质教材大部分都落后于时下的热点，不足以满足企业对专业人才培养的创新需求。所以，纸质教材之外，还可建立立体化的课程资源，除了包含基本的课件、教学视频等资源，还可以加入行业热点、拓展素材、技能考证等内容。将课程资源信息化、数字化，有利于实现信息共享，满足学生在线学习的需求，从而提高教学质量。

如网上MOOC课程，自制微课或网络下载微视频，结合任务导学案，供学生做课前自学，课中演示，课后复习。

4.1  爱慕课

如“移动界面设计”“UI版式设计”“基础线性和剪影化icon的制作方法”“移动UI设计基础入门”“移动端APP UI设计入门与实战”等短小的UI小课程，这类视频都出自一线UI设计师之手，为学生提供了丰富的学习资源。不过，遗憾之处是，有些进阶课程是收费的。

4.2  中国大学MOOC

如“界面设计”“移动软件UI设计”“UI设计”“UI及交互设计”等，这些课程的设置系统科学，符合学生定位。

4.3  其他资源链接

如优设UI、哔哩哔哩、UI设计的集合、飞特UIdesign、像素范等。

5  混合式教学策略

在线教学有四个明显的不足：

1）信息维度比较单一；

2）學习环境难以营造；

3）课堂监督手段不足；

4）学员容易产生疲劳感[2]。

根据UI界面设计课程的特点，安排约30%的教学学时实施学生线上自主学习，线上教学内容分配侧重于理论知识的学习，可以由教师讲授，也可以让学生课前收集信息，线上进行讨论或汇报。教师应当合理转变工作重心，由个人讲解教授转变为课堂活动的组织以及实施。线下教学内容在分配时应当着重针对实践操作应用能力的锻炼和培养。坚持以技法为基础，以设计思想为教学目标。让学员在“绘图”的同时，更懂得如何把控设计、引导用户、包装产品。

5.1  项目化教学

教学开展过程中，教师应当重视学生实操能力的有效培育，通过项目化教学的实施，以学生为核心主体，以教师为重要主导，通过工作任务激发学生参与学习的热情，调动学生潜在的成就动机。界面UI设计课在整个教学的过程中，运用启发、引导和实践的方式，通过对造型设计基础知识点的逐步讲解和实例绘制教授创作，训练学生的相互配合能力，培养学生的职业道德、团队协作意识以及良好的审美意识，提高学生的艺术修养，培养学生主动思考、分析问题、自主探究学习、团队协作、自主获取知识、创新思维、结构分析、欣赏以及感悟等综合能力素养。

通过10个章节和1个综合实训、13个项目、30多个小任务进行学习，培养学生。以第7章 “UI控件设计”和“综合实训+提案展示”为例，进行项目和任务分解，如表1所示。

5.2  每日APP分享

学生按照学号顺序，安排课前的5分钟APP分享，进行“每日APP分享”。通过该环节的设置，学生形成了一种习惯，在使用APP的同时，从使用者角度分析用户体验，也从设计师的角度去理解和分析APP的界面设计与交互。学生在不断提升审美水平的过程中，也提升了自主分析思考的意识，增强了发现和解决实际问题的能力。如发现钉钉没有上课点名的功能（虽然钉钉官方改进了）。这5分钟，也给同学们提供了上台展示和讲解的机会。

5.3  小组合作，商业化案例，“零距离”仿照企业进行项目式提案

由于实际的UI设计工作具有很强的综合性和设计性要求，一方面要培养学生的综合素质，提升设计能力，另一方面要让学生能够借助团队合作完成系统性的综合项目。

日常课堂教学中，会预留20分钟用于组内成员相互探讨交流。在课程后阶段，更是一个综合的项目，以组长为项目经理的身份，带着整个团队，完成一个综合项目。学生针对工作岗位职责有了全面深入的了解，也增强了学生团队协作的综合能力。

5.4  巧借各类设计竞赛，增强学生实践能力

UI界面设计课程具有很强的实践性要求，因此，仅仅凭借理论教学无法实现目标，所以，在进行UI界面设计实践过程中，教师应当重视引导学生主动参加不同的设计竞赛活动，以此提升自身的专业能力，为其未来适应社会发展打好基础。比如有关手机主题设计类的竞赛活动、靳埭强设计奖等等，这些都属于较为常见的一些设计类专业竞赛[3]。同时，为了鼓励学生参加各类比赛，学校在该门课程开设的第二年，在平面设计大赛中，增加了一个设计选题：APP概念界面设计。让学生能学有所得，做有所“展”。

5.5  校企合作，学生分方向进行见习（UI项目组）

UI项目组校企合作信息如表2所示。

6  教学评价

在学生评价环节，注重过程性评价（平时作业大汇总）和总结性评价（期末考核）结合。结合其他的评价方法，如职业资格认证等级评价、笔试、专业技能大赛、定岗见习等。注意加强教学过程质量的科学合理监督与控制，优化改革传统的教学评价指标以及方法[3]。

本课程的学生成绩评定，主要通过考查进行，课程总成绩包含平时作业以及期末考核成绩，以百分制计。

其中平时成绩占比为50%（态度纪律占比为10%，学生平时作品成绩的平均分占比为40%），另外期末考核成绩占比为50%（期末小组合作项目作业，占比为30%，作品汇总占比为20%）。例如，其中的期末项目小组作业为：以小组为单位进行APP界面概念设计，每个小组交一个综合项目的作品，成绩占30%。具体考查学生对所学知识的实践应用能力、团队协作能力以及综合设计能力等。

6.1  期末项目：APP界面设计

1）提案PPT：包含产品定义、竞品分析、主要功能、产品原型等部分。

2）产品原型文档：能制作产品原型（线稿）。

3）产品界面设计：Icon设计、主要界面设计。

4）设计规范文档。

具体考核标准见表3。

6.2  平时作品大汇总

在期末临近时，要求学生将自己平时完成的作业进行优化，并整理成一个作品集。

当然除了教师布置的作业外，鼓励学生在整个学期围绕UI界面进行作品临摹或创意。整个整理和收集过程，是一个复习汇总的过程，也是学生回忆和体验成功的过程。

从一个最小的图标开始，到完整的APP界面设计，学生是一个满满的收获过程，也为学生将来就业提供了作品集。

7  参考文献

[1] 沈九美，朱长永，王哲，等.南通理工学院“界面设计”[EB/OL].（2020-02-29）[2022-12-05].https：//www.icourse163.org/course/ZLVC-1454223177.

[2] 雷菁.高职UI界面设计课程教学实践探索[J].现代信息科技，2019（4）：96-97.

[3] 教育部职业教育与成人教育司.关于征求对《教育部关于职业院校专业人才培养方案制订工作的指导意见》意见的函[A/OL].（2017-12-07）[2022-12-05].http：//www.moe.gov.cn/s78/A07/A07_sjhj/201712/t20171207_320877.html.