基于巴特勒学习模式的《UI设计》课程混合式教学研究

广东培正学院艺术学院 李军燕

1 相关概念解析

1.1 巴特勒学习模式的定义

美国教育心理学家卡特·巴特勒（S.Kent Butler）在20世纪70年代依据信息加工理论，提出基本教学程序的七个步骤[1]，被称为巴特勒学习模式。巴特勒学习模式要求教师在课程设计上运用元认知的策略，即提前设定课程计划、实时进行课程反馈与反思、实时调节学习过程，让学生自主认知学习过程的策略。同时，巴特勒学习模式强调学生对课程进行反思，教师平衡各阶段教学侧重点，建立课程与课程之间承上启下的平台，让学生不断地对学习任务进行加工，最后生成属于学生自己的学习成果。

巴特勒学习模式的基本教学程序是：设置情境、激发动机、组织教学、应用新知、检测评价、巩固练习以及拓展与迁移[2]。七个步骤循序渐进，教师根据学习任务创建教学情境，制定学习任务激发学生学习欲望，学生通过合作学习对新旧知识进行加工完成专案任务，教师建立评审机制对学生完成的专案任务进行评判，学生结合教师意见对所学知识进行反思内化，并结合相关任务点进行知识的拓展与迁移，掌握新知识的同时实现知识的叠加与创新。巴特勒学习模式是从实践到认知再到实践的学习过程，教师通过巴特勒学习模式对课程进行建立与设计，学生通过巴特勒学习模式来达到对课程的全方位学习与掌握。

1.2 混合式教学模式的定义

混合式教学模式，主要指的是将课堂教学与网络教学相结合的线上线下新型授课模式。该教学模式将教师的面授与网络的授课相互融合，学习过程浅入深出，由表及里，学用结合，深度学习。混合式教学模式利用在线网络平台进行时空搭建，在线上，对学习知识进行讲解，让学生在不受时间与空间的限制下掌握知识重点难点；在线下，教师对学生进行相应的教学活动设计，从而对所学知识进行检验、巩固、内化，将理论运用到实践当中。混合式教学模式更加偏向于学生进行知识的深度理解与多维发散，将线上与线下相互结合，不仅能丰富教师的课程设计，而且还能提升学生知识掌握的深度与广度[3]。

2 《UI设计》课程教学目标

1）知识目标。通过学习《UI设计》课程，使学生了解UI设计的特征、发展状况、前沿动态与所要求的核心能力。课程内容涵盖了交互设计、设计心理学、动效设计、平面设计、数据分析等知识，学生运用相关UI设计理论，遵循UI设计规范，以工匠精神追求精益求精，使他们更好地服务社会、服务大众，提升行业水平。

2）能力目标。课程要求学生了解与熟悉新媒体艺术设计下的产品界面设计，遵循相关设计规范，掌握设计原理，以便更好地设计出符合用户需求与市场需求的UI设计作品。

3）育人目标。课程注重引导学生将民族特色经典设计与当代潮流相结合，推陈出新，展示民族文化魅力，增强民族文化自信，提升对地域特色文化设计的认同感，并体现“以人为本”“以用户为中心”的设计理念[4]。

3 基于巴特勒学习模式的《UI设计》课程混合式教学思路

巴特勒学习模式是依据信息加工理论，利用学习策略对学习任务进行加工，最后生成学习成果[5]。《UI设计》课程采用理论教学与实践教学相结合的教学思路，参照巴特勒学习模式，以专案项目的形式进行教学实践。

3.1 设置情境即专案项目制定

课程设立的专案项目是让学生以三到四个人为一组，自选一款市面上已上架的软件产品进行迭代设计，该专案项目的系统设计要求是：为Android系统或iOS系统下的手机端软件产品进行迭代设计。要求学生通过交互思维对所选的软件产品进行分析与研究，通过产品分析、商业与用户需求分析、竞品分析、用户建模、故事板绘制等进行前期流程的梳理与整合，对所选迭代软件产品进行图标设计、界面设计、手势设计以及动效设计，进一步提升与改进所选迭代软件产品的核心功能，最终形成一份“软件产品详细迭代设计报告”。

3.2 激发动机即角色扮演

学生在专案项目中进行双重角色扮演，既作为需求方进行专案要求制定，对相关迭代产品进行核心功能的分析；又作为设计方进行专案项目实施，通过用户研究对界面进行设计迭代，进一步强调产品的核心功能。在此过程中，学生通过对自身的了解与关注，以及自我认知下的设计构思，将其进行具象文字转述，以此制定专案需求。学生结合专案需求进行相关项目设计，角色间进行切换，让学生从多个角度理解与掌握UI设计的核心内容。

3.3 组织教学即搭建课程与课程间的桥梁

在学习课程的前期，会对《数字媒体艺术概论》《设计概论》《版式设计》《交互设计》等课程进行回顾与整合，建立起课程与课程之间的联系。以第一章“UI设计本体”为例（如图1），该章节从用户界面设计这一主题出发讲解UI设计的本体，正确理解界面设计与用户界面设计两者的概念，并详细讲解UI设计的构成要素。学生在学习本章内容时会对UI设计产品的界面有大体的框架了解，但需要清楚地区分界面设计与用户界面设计的不同。通过本次课程，学生可以合理地将前期的交互设计思维与UI设计基本流程相结合，对现有产品进行用户需求的把握以及商业需求的延伸，更好地理解与关注UI设计中“以用户为中心”的概念。该章节课程分为四个任务点，在讲述“UI设计概念”时，会对“用户研究”“交互设计”“界面设计”“用户体验设计”的概念进行回顾与理解，并与UI设计概念进行联系，让学生能清楚了解UI设计在整个APP产品应用开发中所处的地位和作用。在“UI设计的构成要素”讲述中，从文字、图形、页面版式、多媒体以及跨平台界面设计五个方向去认识与理解UI设计内容，并结合前期的《版式设计》课程内容，区分C/S平台、B/S平台以及APP平台的设计内容。在“UI设计的基本流程”中，要求学生熟悉移动界面设计规范和制作流程；在教师的指导下，能够根据客户需求，绘制APP界面框架；制定UI设计任务流程。在“设计软件介绍”的内容介绍中，结合前期《计算机辅助设计》课程的内容，让学生面对UI设计中的用户及需求调研、信息架构设计、流程图与线框图、可交互原型与高保真、动效设计以及切图交付的不同任务选择合适的软件进行设计完善。

图1 《UI设计》课程第一章“UI设计本体”教学思路

3.4 应用新知即随学随练

将专案项目设计进行任务拆分，结合每周课程的教学安排，分阶段完成专案项目设计。学生需在“超星学习通”上完成每周理论课程的学习，并根据本周课程学习内容完成与理论课程相对应的专案阶段任务。

以“迭代设计方案提出”任务为例，在该周课程的教学中，教师教授了界面设计中的色彩设计与字体设计的规范，学生学习该周课程后，教师发布的专案任务是对所选软件产品进行设计思路的确定，即选择合适的设计风格、色彩搭配以及字体字号组合，同时完善基础界面设计框架并绘制线框图。该专案任务要求学生对前期调研与资料收集的内容进行梳理与整合，将需要迭代的界面进行标注，确定迭代设计方案，并在线框图中进行方案的展示与描述。

该专案项目任务所需完成的设计内容一共有六项，时间为两周。在确定设计思路时，学生需对用户调研与商业分析等相关资料进行收集与整理，以此确定需要迭代的软件产品界面内容，学生可以将其原本界面进行截图并以关键信息标注的形式进行展示。对于界面设计风格的选择，学生以视觉意向图的形式进行设计风格阐释。界面色彩搭配与字体字号组合的选择是此次项目的核心，也是该周课程的知识重点。学生需要考虑移动端自身系统下的屏幕模式，选择合适的界面主体色、辅助色、强调色以及文字色与背景色，色彩所选数量需结合软件产品的品牌调性去确定。对于字体字号的选择，主要是结合学生所选软件产品的交互系统来确定。对于界面设计框架的完成，主要是让学生在前期的信息架构图上去标注相关迭代界面的内容。在迭代功能上，主要以一个核心功能为切入点，进行层级菜单的再设计。绘制线框图时，则要求学生根据前期设计思路的整合，对所选软件产品进行界面迭代设计。为了让学生能够真正地参与到UI的完整设计制作过程中，要求学生对主界面进行全新设计，导航栏上的功能模块控制在四到五个，同时学生要在所设计的模块中任选一到两个模块进行菜单的层级设计，界面总体不少于二十个。该专案项目任务最终会以设计方案和报告的形式进行展示汇报，学生借助“超星学习通”平台上传报告，方便与各组同学进行交流。

3.5 检测评价即建立专案规划

学生根据每周专案项目的阶段任务内容，完成指定任务，并形成相应的设计方案和报告，利用“腾讯会议”平台进行方案汇报。学生将自己的设计思路进行展示，教师可以在学生汇报时了解学生对理论课程知识点的掌握（如表1）。

表1 专案项目阶段任务发布、采用方式、效果与提交时间整体展示

此次专案项目一共分为七个阶段任务，分为产品分析、商业与用户需求分析、竞品分析、用户建模、迭代设计方案提出、迭代设计思路梳理和专案项目最终展示。产品分析，主要要求学生对所选软件产品进行深入分析，即分析软件产品的核心功能、界面设计亮点并确定迭代设计的方向。商业与用户需求分析，要求学生通过用户价值图、热气球法则图和电梯宣言图去分析所选软件产品的商业性与用户需求，并以此设计用户调研问卷，同时绘制软件产品信息架构图。竞品分析，要求学生根据所选软件产品的行业分类，从直接竞争者、间接竞争者和潜在竞争者去进行相关竞品分析。用户建模，学生根据前期的产品分析、商业性与用户需求分析和竞品分析来完成所选软件产品的用户画像，以此确定用户群体分类，明确产品的设计方向。提出迭代设计方案，要求学生对所选软件产品进行设计思路的确定，即设计风格、色彩搭配以及字体字号选择，同时对基础界面设计框架进行完善并绘制线框图。迭代设计思路梳理，在这里分成三个阶段任务，学生根据前期阶段任务的完成，对所选软件产品进行图标设计、界面设计以及高保真设计。专案项目最终展示，主要要求学生对前期各阶段任务进行修订与整理，将设计思路进行实际成品展示，形成对所选软件产品的最终迭代设计报告。此次专案项目的任务安排与课程教授的内容紧密联系，各个阶段任务相辅相成，环环相扣，学生在一步步设计过程中形成了一个清晰的UI设计流程框架。

3.6 巩固练习即教学答疑

学生需要每周都进行方案汇报，在汇报后，教师会根据学生的方案汇报对提出修改意见；学生也可以提出自己在设计中遇到的问题，教师加以解答。同时，学生在汇报本周方案之前，需将上一周修改后的设计方案进行展示，教师对此进行评价。学生对自己专案项目设计中存在的问题进行反复修改（如图2），既能对《UI设计》课程的所学内容进行知识的理解、记忆与演练，又能在不断的修正中熟练掌握UI设计的原理与技术。

图2 以学生的专案项目修改方案

3.7 扩展与迁移即知识迁移

学生在“软件迭代设计”的专案项目中，会将课程理论知识迁移到实践设计之中，在实际设计中进行知识延伸、迁移与系统梳理、综合设计。在作品最终的展示过程中会将《交互设计》课程中的手势设计与《UI设计》中的动效设计相结合，使得学生可以综合运用所学的知识。当然，学生也会在知识迁移过程中产生一定的困惑，即如何将交互思维运用到更多UI产品的设计过程中，从而达到对现有产品用户需求的把握以及对商业需求的延伸。因此，教师需要在学生进行所选案例分析时，进行积极正向的引导，反复强调“交互思维”与“UI设计”的核心概念，以此才能更好地让学生去理解与关注UI设计中“以用户为中心”的理念，从而做到对新旧知识的迁移与结合。在课程的实训内容中，学生要事先收集优秀的界面设计案例，并运用UI设计原则去分析界面设计的导航设计、界面布局以及色彩搭配等内容。

4 总结

《UI设计》课程融合“巴特勒学习模式”，并充分发挥混合式教学的多样性特点，以真实专案项目体验为教学主线，按照课程内容安排具体专案项目任务。学生在针对专案项目进行设计时，遵循知识点中的相应设计原理，并进行一定的知识延伸，将知识理论转换成图像化的专案设计，学生也在学与做中感受UI设计的魅力，在教学实践的细节中锤炼学生，使他们能够具备应对市场需求的专业技术能力。