基于OBE理念的UI设计课程教学创新设计

［收稿时间］2023-01-25［基金项目］2022年广东省本科高校教学质量与教学改革工程建设项目“云端技术背景下协同设计教学研究——以视觉传达设计专业为例”（粤教高函〔2023〕4号）；广东理工学院“质量工程”项目“基于OBE理念的《UI设计》课程改革与实践”（JXGG202253）。［作者简介］何惠倩（1995—），女，湖南人，博士研究生，助教，研究方向为艺术设计、界面设计。通信作者：孙炜（1975—），女，黑龙江人，博士，副教授，研究方向为信息与交互设计、

机械设计等。

2023年5月May，2023UniversityEducation

［摘要］为推动基于OBE理念的课堂教学实践，适应新艺科建设对设计艺术学本科生提出的能力培养新要求，项目组以教学成果为导向，探讨了联合线上资源和线下授课的混合式教学模式改革，从教学对象、教学目标、教学策略等方面探究UI设计课程知识体系的整合与构建，设计了教赛融合、产教融合的项目式课堂教学内容，构建了动态评价考核体系。该教学模式使学生能独立完成UI整体项目设计，有效提高了学生的设计能力、逻辑思维能力及课程目标的达成度。［关键词］成果导向教育；混合式教学；UI设计；动态评价考核；新艺科［中图分类号］G642.0［文献标识码］A［文章编号］2095-3437（2023）09-0062-05

基于成果导向的OBE（Outcome⁃basedEduca⁃tion）教育理念是由斯派狄等人提出的，强调制订可

观测、可达成、可教、可学的课程目标，依据教学目

标反向牵引教学力量、课程内容和教学设计，聚焦

学生能力的培养，并坚信学生通过弹性化、个性化、

多元化学习可以取得成功[1-2]。OBE理念应用领域

很广泛，例如工程教育、包装设计、程序设计、“精

益”教学、课程考核与评价等。杨慧等[3]将OBE理

念运用于空间分析与建模课程中，提出教学创新设

计过程中需秉承“成果驱动、实践取向、情感融合、

知行合一”的教育理念。周威等[4]将OBE理念应用

于包装设计课程教学改革中，提出解构课程教学内

容、强化设计实践训练、改进课程考核方法的教学

实施方案。刘巍巍等[5]基于成果导向从教学模式的

精简、教学资源的利用率、课程体系的系统性及学

习的达成度4个方面研究了“精益”教学模式。张

绍芳[6]将OBE理念应用于创新高校教育管理模式，

以完善其评价体系，提质增效。

好的UI设计不仅可以提升产品的美感和个

性，还能让用户操作更为便捷，贴合用户的使用习

惯[7]。考虑到课程时间的有限性、App应用的广泛性和市场需求的迫切性，项目组以App设计项目为

例，结合OBE理念对UI设计课程进行详细剖析。UI设计课程较难掌握和理解的部分包括用户研

究、市场研究、用户体验旅程图及功能架构的输出，

这些正是对学生的系统思维和逻辑思维的全方位

考验。UI设计课程是设计艺术学专业的核心课程，

课程体系复杂，综合性和实践性强，知识涵盖范围

广，包括市场调研、竞品分析、用户画像、用户体验

旅程图、设计构思、信息架构、交互原型、视觉设计

等。课程目标在于使学生掌握UI设计课程专业理

论知识，能熟练运用人机工程学原理、认知心理学、

交互性原理和设计艺术学原理等理论知识对UI设

计进行分析、创新和评估[8]。传统的UI设计课程教

学在培养学生设计能力和逻辑思维能力上存在

不足。

一、OBE理念在UI设计课程中的应用

（一）教学目标反向设计

传统教学中课程目标的设定通常以教材规定

的目标和教学设计大纲为主[3]，重知识轻能力，与当

前设计类专业中重实践的理念相悖。OBE理念强基于OBE理念的UI设计课程教学创新设计

何惠倩1，4孙炜2何媛1董业子3

1.广东理工学院艺术系，广东肇庆5261002.华南理工大学设计学院，广东广州5100063.肇庆学院美术学院，广东肇庆5260614.FacultyofEngineering，UniversityofMalaya，KualaLumpur50603

62

Copyright©博看网. All Rights Reserved.

调从学生的学习成果和能力达成出发，反向设计教

学目标。UI设计能力分为初级、中级、高级。初级能力

是UI设计的基础。首先，学生需要具备信息检索

能力，能检索相关文献、探寻优秀UI设计案例及分

析市场现状，并对特定的App进行市场调研，洞察

市场需求和用户需求，通过数据分析产出设计机会

点，这属于初级能力。其次，提出设计概念并进行

设计构思和设计实践，具备良好的逻辑分析能力和

审美能力以判断设计实践作品的可行性、美观性、

可用性等，这属于中级能力。最后，具备设计创意

思维能力，这属于高级能力，需要经过长期的积累

和实践才能实现能力的达成。

根据能力目标及UI设计课程的特点，项目组

将课程的总体目标设定为“能够独立完成App设

计”，采用成果导向理念反向设计相应的教学目标，

细化课程内容，使学生通过对UI设计课程的学习

获取相应的能力，具体如表1所示。

表1教学目标及对应能力目标

序号

1

2

3

4

5教学目标

了解UI设计发展过程、设计趋势、基本规范和流程挖掘现有的App或小程序中存在的问题和设计痛点，掌握用户研究方法将痛点转化为设计机会点，掌握图标、色彩、版式等的设计方法熟练运用设计工具进行信息架构设计和原型图设计熟练运用所学知识设计一款App或小程序对应能力目标

获取知识、主动学习

发现问题、团队合作、数据分析

需求转化、解决问题、审美素养

结构逻辑分析、设计实践

设计创意思维

（二）教学方案设计

传统教学过程中，教学方案一般根据学周来规

划学生每周需要学习的内容，而基于OBE理念的UI设计课程教学根据内容模块的难易程度合理调

整了学习时长。1.传统UI设计课程存在的问题

传统UI设计课程存在教学内容无法展现最新

的交互设计流行趋势，课程教学重视觉、轻逻辑，教

师在讲授过程中以软件技能和界面视觉为主，对前

期调研、需求挖掘和产品定位等知识不够重视等情

况，导致部分学生设计的作品虽美观但不符合用户

的使用习惯，出现界面烦琐、交互不顺畅、界面跳转

与用户预期不符等问题。此外，部分高校在培养UI设计人才时存在教学模式创新性不足，课程内

容简单、挑战度不高，考核方式单一、重结果轻过程等问题[9]。2.新艺科背景下教学模式的重构

新艺科是指艺术学科与其他学科交叉融合而

产生的新的艺科专业[10]。在新艺科背景下，设计艺

术学专业要有中国特色、国际视野、新突破。项目

组在课堂中融入“四新”教育理念，强化开放思维与

复合思维，提高服务意识和美学价值[11]。在课程安

排方面，以成果为导向，将学科知识体系进行模块

化划分，采取问题驱动式教学设计，提高学生学习

目标的达成度[5]。具体措施如下：

（1）教学思路创新设计。UI设计课程中，教师

不仅要教授学生手机界面设计知识，还要拓展讲授

网页设计、智能终端界面、智能产品等内容，指导学

生从图形、色彩、布局和字体等方面展开创意构思，

设计出精美且实用的界面。

（2）课程内容模块化设置。UI设计在教学内

容模块划分时遵循形式追随功能的原则，在保证界

面的可用性、可行性和易用性的基础上，美化界面。

在课程中，指导学生进行用户研究，并结合人机工

程学和用户的行为习惯，找出设计痛点和设计机会

点，再进行功能结构的布局和界面设计。教师布置

的作业应环环相扣，瞄准最终设计目标，建立UI设

计课程体系。教学内容模块划分如表2所示。

表2UI设计教学内容模块划分

教学内容

用户研究（调查访谈、用户画像、用户体验旅程图）

竞品分析

信息架构

原型设计

可用性测试

视觉设计（界面设计、设计规范）

整合项目设计（设计汇报）考核目标

明确不同的用户研究方法

能运用SWOT和用户体验五要素分析相关竞品

能将用户需求转化为设计理念，整合产品功能，完成信息架构设计能对功能进行合理布局，完成原型设计能运用可用性测试方法，分析原型设计的可行性能综合运用视觉设计原则进行高保真设计，输出设计规范，并运用墨刀、蓝湖等平台模拟界面查看设计效果能完成项目设计资料的整合，并进行设计汇报考核方法

课堂讨论

课后讨论、课后作业

课堂讨论、课堂作业

课后作业

课堂讨论

课堂讨论、课后作业

设计汇报与答辩学习周数

3

1

1

2

1

3

1

（3）教学模式人性化设计。UI设计课程教学

时长与培养方案要求的学时保持一致，共48学时，63

Copyright©博看网. All Rights Reserved. 12周，每周4学时。教师借助线上平台完成对基础

知识的讲解和设计工具的教学，根据教学任务筛选

与教学内容相关的线上平台资源，并将其发送给学

生，线上学习时长通常在30分钟左右。线下采用

研讨式和任务驱动式教学，教师根据教学计划梳理

课程知识，讲评学生作业和相关案例。

（4）教学评价采用双向考核机制。教学评价采

用教师和学生为主的双向考核机制。从知识、能

力、素质三个维度进行考核。评价方式与考核内

容、课程目标相对应[2]。

（三）具体实施方法1.确定课程目标

围绕新艺科对设计艺术学专业提出的新要求，

项目组将UI设计课程目标分为“知识、能力、素

质”，具体设定如下：

（1）知识目标。掌握UI设计原则和设计方法，

熟悉常见的界面设计尺寸、大小、颜色等规范。

（2）能力目标。灵活运用用户研究和市场研究

专业知识科学挖掘用户需求，善于发现问题，洞察

市场趋势。启发学生的设计思维，提升学生解决实

际问题的能力。

（3）素质目标。独立思考问题，辩证看待事物。

培养学生的创新意识和工匠精神，使学生能独立完

成界面设计并不断更迭完善设计作品。UI设计课程授课形式、实施方式及内容如表3

所示。

表3UI设计课程授课形式、实施方式及内容

授课形式线上课程

线下课程实施方式自主学习理论教学法案例教学法任务驱动法角色扮演法内容

基础知识（概述、应用领域、风格等）设计工具（Axure、墨刀、Sketch等）

梳理课程知识，讲解重难点

讲解UI设计案例及作业

布置设计任务，启发学生思考，进行辅导答疑模拟企业场景，进行设计汇报，熟悉UI设计流程及工作内容2.结合任务驱动法，开展教学工作

在课程正式开始前，教师将UI设计基础知识

及设计案例发布给学生，启发学生思考，让学生查

阅资料，研究案例，参考设计流程，自主确定设计主

题，提出设计需要解决的问题及产品需求。结合任

务驱动法，将整个项目拆解成多个模块，随着教学

的推进，使学生能掌握所有模块的基础知识并运用

于设计实践中。根据学生的兴趣、能力不同，采用动态化、弹性化培养模式，每个模块均设定目标完

成度和加分项，给予学生更大的发展空间。同时，

将辩证思维和创新知识融入课程模块中，培养学生

的综合素质，突出课程的高阶性。3.明确考核层级

传统考核方式是期末成绩和平时成绩分别占70%和30%，学生的每次作业和出勤率都会影响其

最终成绩。而OBE理念重点关注学生的最终学习

成果，根据学生的整体项目设计所呈现的视觉效果

对平时成绩进行了动态调整。学生期末作业评分

维度、计分标准及比例分配如表4所示。

表4学生期末作业评分维度、计分标准及比例分配

评分维度

准确性

完整性

创新性

美观性

汇报表达计分标准

能正确理解知识点，并进行设计表达项目内容模块完整，设计要素齐全，内容丰富融入作者的想法和创意，自行设计App或改良界面版式、色彩、字体、图标、按钮等美观度，可视化表达口头表达熟练程度、仪容姿态、手势和眼神互动等占比

20%

20%

20%

20%

20%

二、实践效果及课程评价

通过对两个班106名学生进行教学改革实践，

这些学生期末成绩基本达到良好以上，教学效果显

著。课程评价结果显示，学生更喜欢新的教学

模式。

在OBE的教学模式中，教师给予了基础较为

薄弱的学生充分的时间查阅资料，开展查漏补缺，

提高了学生的设计思维能力。而基础较好的学生

可以根据自己的学习能力和设计水平加快学习进

度。这种弹性学习方式有利于因材施教，使不同层

次的学生能够在规定的时间内完成学习任务。在

学习反思过程中，大部分学生认为需要提高汇报表

达能力和逻辑思维能力。

（一）课程产出形式

在UI设计课程中，要求学生每人提交一份App

或小程序设计报告书，报告书以学生能力目标和教

学模块为导向，包含问卷调查、用户体验旅程图、用

户画像、竞品分析、信息架构设计、原型设计、视觉

设计、设计规范和可用性测试，展示App或小程序

从无到有的设计过程。

（二）课程评价和实践效果

课程评价是一项全面性工程，评价指标体系的

建立直接影响到评价结果的科学性。根据课程内64

Copyright©博看网. All Rights Reserved.