案例教学+项目驱动模式运用于UI设计教学中的对策探讨

杨雪玲

摘  要：案例教学与项目驱动模式是当前最热门的两大教学模式，他们迎合了新课改要求与信息时代教育发展要求，被广泛应用于各种教学实践应用活动中。文章希望将它们运用于现代UI设计教学领域中，结合多案例分析案例教学+项目驱动模式运用于UI设计教学中的有效对策，凸显其模式应用优势，希望以此提升UI设计教学水平。

关键词：UI设计教学;案例教学;项目驱动模式;校本课程;优势;对策

中图分类号：G642       文献标志码：A         文章编号：2096-000X（2020）25-0099-03

Abstract： Case teaching and project-driven models are currently the two most popular teaching ones which meet the requirements of the new curriculum reform and the development of information age education， and are widely used in various teaching practice applications. This paper hopes to apply them to the field of modern UI design teaching， combining multi-case analysis case teaching + project-driven mode to apply effective countermeasures in UI design teaching， highlighting the advantages of its mode application， and hope to improve the level of UI design teaching.

Keywords： UI design teaching; case teaching; project-driven model; school-based curriculum; advantages; countermeasures

现如今，在我国大数据、“互联网+”等等先进信息化时代思想的引领下，新兴智慧资源与服务能力内容被广泛应用于社会各种领域中，其核心内容就是针对数目庞大的信息内容进行深度挖掘，进而得到有益于行业竞争、且具有一定社会价值的信息。在UI设计教学领域中，广泛应用案例教学+项目驱动模式是有必要的，它们共同驱动了教学过程中对数据内容的应用，更加强调教学实践应用模式创新，在校企合作人才培养模式的实施过程中寻找到了教学人才教育发展真谛，呈现了UI设计教学的巨大转变过程，非常值得研究。

一、UI设计教学、案例教学以及项目驱动模式的理论阐述

（一）UI设计教学

UI（User Interface）其本意是指用户界面，UI设计专门指代从事对软件人际交互、操作逻辑、界面美观整体设计工作的人。在高等教育院校中，UI设计则作为一门学科课程存在，它涉及到了高级网页设计、移动应用界面设计等等课程内容，是目前国内信息产业教育领域中比较热门的课程之一[1]。

（二）案例教学+项目驱动教学模式

案例教学+项目驱动教学模式是目前非常热门的教学模式。首先案例教学强调从实际案例内容切入展开教学过程，围绕问题设计教学内容，它就包含了问题提出、问题分析以及问题解决三大部分。在教师适当讲解课程相应知识点后，教师希望结合实践案例实现对教学內容的融会贯通，提高学生的学习能力水平，优化教学方法应用。反观项目驱动教学模式则非常追求通过任务项目设置与角色分配。在教学中当然要以学生为主体，而教师作为组织者组织学生参与到教学过程中，通过共同合作实践完成一个或多个项目的教学活动[2]。项目驱动教学拥有较强的任务前置性与驱动动力，整个教学过程中教师带动项目、项目带动学生、学生与教师互动，真正形成了一个完整的闭环结构，所追求的是从项目提出到项目完成的完整性。上述两种教法的相互结合拥有互补优势特性，案例教学让项目任务变得更加丰满化，而项目驱动本身为案例教学带来了相对完整的教学规划路线，二者所共同组织构建的教学方法是完整，所呈现的知识系统也更加健全不零散。在整个过程中，借助项目驱动教法将相关案例知识点内容联系起来，形成新的知识系统，这是二者结合所追求的，它基本实现了对知识内容的查缺补漏，且指导性非常强，适合在当前的UI设计教学活动中应用展开[3]。

二、案例教学+项目驱动模式下的UI设计教学案例应用

案例教学+项目驱动模式下的UI设计教学充满实用性和易用性，且在教学设计规划方面非常到位，可满足教师的教学方案设计，也能满足学生学习需求，下文结合两个案例对其教学实践应用展开论述。

（一）项目《ITalk》教学设计实践应用

1. 教学目标

首先《ITalk》项目是围绕UI设计课程安排的，它的教学核心内容主要选取了某社交类APP用户界面设计展开。在该项目中就直接融入了案例教学+项目启动模式，希望通过这一综合模式希望学生能够快速掌握UI界面设计中有关界面的分析方式。深度了解页面、功能与样式确立相关要求，合理性分析界面功能排布。同时学会APP界面创建与制作操作流程，学会UI设计界面中有关字段、配图、配色的设计要求与添加流程[4]。

2. 教学方法

在《Italk》教学中同时引入项目和案例展开教学过程，执行设计完整的UI设计流程与设计规范要点，希望以此提高学生的实践动手能力。在教学中也希望培养学生良好的专业知识学习严谨性与审美能力。在教学中，教师首先会通过传统讲授法为学生示范案例内容，讲解有关《Italk》中组件和字段的相关理论分析方法与形式，让学生初步了解Italk页面的组成构建形式，主要为学生操作演示相关内容，让学生基本了解页面的构成方式。在课程中，教师会将一个完整的项目拆分为多个任务内容，要求学生按照教师要求分步骤完成各个学习任务，最终一步步构建完整的UI设计界面，完成UI设计制作过程[5]。

3. 教学过程

在教学过程中，首先教师会引入课程内容并抛出话题“大家知道吗？我们需要学习了解UI设计界面之前首先了解UI产品的两种主要形式，它们分别为纯设计与项目设计。”围绕这两种设计，教师就为学生分析了两种设计各自存在的利弊，告知学生纯设计一般被应用于成熟的设计师展示设计技能方面，它的设计形式呈现相对夸张，一般与设计预期存在较大差距，它所追求的是视觉效果的设计。而项目设计则不然，它追求整体设计，是适合于学生学习的设计方式。结合这一点，教师就希望围绕项目设计展开教学过程，尝试为学生确立UI设计项目课程学习目标，学着制作简单的网站界面单页。此时，教师就引出新项目——ITalk。ITalk是一款社交类APP，利用UI设计该APP主页面，该阶段教师希望结合案例进一步展开教学过程。为此，教师首先初步创建了项目画布，引导学生对所选取的页面进行相关分析，目的是为了确定页面的结构组成。该阶段学生所需要完成的学习任务很简单，就是跟随教师的UI设计页面分析方式与套路深入学习，尝试选取3种不同类型的APP主页展开UI页面设计与分析。

其次进入案例演示阶段，该阶段教师会提问学生是否能够根据对UI设计页面的结构分析来获得自己更为理想的页面？学生在思考这一问题时就指出了自己所联想到的页面，而教师则辅导他们进行有关页面的元素排布、页面组件填充、设、最终完成页面UI原型设计。在案例演示过程中，教师要做到正确选取参考作品，为学生示范选取合理的UI设计页面形式与样式，围绕《ITalk》这一课的源文件进行调整操作，而在操作过程中教师则要选取调整前后多种设计并提问学生“哪一种设计更好更合理，合理在哪里？”等等。激发学生在案例中学习讨论，然后回答与教师形成互动。

最后进行模仿练习、作品展示与评价阶段。该阶段教师会结合《ITalk》项目再次基于理论进行讲解、演示案例，随后根据教师演示的基本流程与重点内容完成任务，利用项目拆分多个任务内容，让学生按照一定顺序完成项目学习任务。例如在练习过程中让学生选取APP主页的原型稿进行分析，而随后则在原型稿的基础之上完成设计稿作品。在作品展示与评价过程中，教师将与学生共同对作品进行评价，指出作品中的优缺点内容，鼓励学生展开相互分析与评价，提高作品的完成度与严谨度。而教师则会对学生的《ITalk》学习过程、完成度、截面排布、设计整体效果以及配图配色等多个角度进行针对性局部点评。在教学后，教师则鼓励学生更多思考，尝试进一步积累自己的素材库，甚至为他们安排更多项目内容，增大他们的UI设计界面练习量，逐渐提升他们的UI设计水平[6]。

（二）项目《手机APP主题设计》教学设计实践应用

在《手机APP主题设计》的UI设计教学中，教师希望以手机APP主题设计作为项目主线，在课程教学过程中引入教学案例促进项目开发过程。在这一教学中，APP UI图标设计是关键，以下是具体的教学设计实践应用过程。

1. 教学导入

在项目确立后，教师就运用到了案例演示，首先告知学生具体的学习任务——演示透明材质图标内容，与学生共同探讨如何表现某些透明类图标，这一环节是项目案例导入，为学生学习手机APP主题设计内容开题;其次是情境导入，利用透明材料塑造产品品牌形象，突出产品内容。透明材料主要通过外表直观展示内容，此时教师要为学生联系生活，例如在书本装帧与食品包装上都会运用到透明材料，因为透明材料能够让人对包装中的内容一目了然，更加简洁直观，也能给人带来一定安全感，因此说透明效果在不同的设计中都是非常讨巧的，此时教师就为学生建立了良好的透明视觉体验;接下来教师会提出问题“大家在现实中所能想到的透明材料都有哪些呢？”结合这一问题教师希望学生能够通过自己的能力进行搜索，例如学生就搜索到了水和玻璃杯，并要求学生自习观察这些物体是怎样呈现出透明的视觉效果的。比如说通过现实中水和玻璃杯的轮廓清晰辨析它们的光影内容表现，感受它们所呈现出的透明质感[7]。

2. 复习知识

在教学后，教师要带领学生共同复习知识点，同样结合问题展开复习过程“大家觉得透明材质与我们之前所学习的金属材质相比有哪些特点呢？”、“这些特点该如何表现出来呢？”、“该如何用绘图工具去表现呢？”在教学中，教师所要明确的是学习目标，教会学生绘制UI图标、表现清晰轮廓的正确方法;第二，营造透明氛围，同时表现透明材质的高光与投影效果;最后就是要制作出透明的玻璃质感[8]。

3. 分析任务与制作过程

《手机APP主题设计》的UI设计教学的关键就在于引入案例，分析教学任务与制作过程。首先是任务初步分析，引导学生打开透明材质图标，分支制作图标并为学生讲授所有知识内容，这其中包括了背景图层的创建内容、形式绘制内容以及图层样式运用内容。教师要合理化运用高光引导学生绘制手机APP主题内容。在任务制作过程中，教师要引导学生分组尝试合作制作透明材质图标。

其次，在任务再分析过程中，首先邀请每一组学生汇报本土的绘制作品成果，结合绘制作品成果分析学生创作过程中可能出现的各种问题;然后教授学生有关手机APP主题背景环境的营造技巧，例如对冷暖色调的对比效果分析与技巧教授;第三，使用形状工具绘制主题背景的基本轮廓形状。例如要在UI设计过程中曲调填充色内容，创建内容镂空体系，同时保留一定的图层样式轮廓，体现较高的透明度。在利用图层样式制作细节过程中要添加投影与高光效果，最后完成手机APP主题UI界面设计过程[9]。

4. 教学评价与总结

在教学中评价学生对手机APP主题UI界面设计的完成情况，同时积极收取来自于学生的反馈内容，例如學生在UI设计操作过程中所遇到的各种问题等等。在总结中教师会为学生总结归纳有关形状工具的使用技巧与图层样式的使用技巧内容[10]。

三、UI设计教学中运用案例教学+项目驱动模式的优势归纳