浅析“任务驱动”教学法在《UI设计技术》教学中的应用

刘民娟 李颖云

【摘 要】 本文针对高职院校软件技术专业的专业核心课程《UI设计技术》教学过程中存在的问题，探讨了引入“任务驱动”教学法的重要性与应用措施。以课程内容所涉及的教学单元为例，分析了“任务驱动”教学法中任务体系设计、教学环节设计、教学组织实施、教学评价等环节的创新性和可实施性。教学实践证明，“任务驱动”教学法更能激发学生自主学习的探索能力，教学效果明显提高。

【关键词】 高职院校;“任务驱动”教学法;UI设计技术;教学应用

UI设计是指对软件的人机交互、操作逻辑和界面美观的整体设计，是英文User Interface的缩写。《UI设计技术》课程是高职软件技术专业的专业核心课程，旨在培养学生在网页界面设计、应用软件界面设计、移动APP界面设计、游戏界面设计等UI领域的实践操作能力和创新设计能力。该课程的授课对象是软件技术专业的大二学生，他们在学习《UI设计技术》课程之前并没有接触过与UI相关的任何基础课程，对photoshop软件也了解的不多，要想通过有限的56个学时来完成PS软件基础操作学习和UI设计中的网页界面设计、应用软件界面设计、移动APP界面设计、游戏界面设计等的设计规范学习内容，时间安排非常紧张。时间短、课程任务重势必会削弱学生的接受能力和自主创造力。长期如此将大大降低学生的学习热情和积极性，也影响教学效果。针对此教学现状，授课教师必须从课程内容、教学设计、教学方法等方面入手，及时调整教学方法策略，以提升教学效率。

一、“任务驱动”教学法概述

“任务驱动”教学法以“任务为主线，教师为主导，学生为主体”，是一种建立在建构主义学习理论基础上的教学法，它改变了以往传统的以教师传授知识的教学理念，转变为以任务为驱动的翻转课堂教学理念;将再现式教学转变为探究式学习，使学生处于积极的主动学习状态。每一位学生都能运用自己已有的知识来发现、分析任务模块中的问题，并能从已有的学习经验和知识中获得解决方案。教师必须对课程内容进行重构，将知识体系分解为若干可执行的教学任务。每个教学任务都应该囊括大大小小的知识点在里边，学生通过任务分析发现问题，并在解决问题的过程中实现知识点的内化，最终完成教学任务。学生在完成任务的过程中，变被动学习为主动学习，从而培养学生自主探究、主动参与、自主协作的能力。

二、《UI设计技术》课程中“任务驱动”教学环节设计

以知识讲解为主的传统的教学模式很难满足UI设计行业对开放创新型UI设计人才的需求，传统课堂培养出的毕业学生很难承担企业的实际项目任务，针对此现状本文结合《UI设计技术》课程内容进行了知识点重构，并将知识点融合到若干个案例任务中，以任务为载体，探索“任務驱动”教学法在UI设计技术课程中的实践教学模式，为企业和社会培养出具有较强的动手能力和职业素养的UI设计人才。

以APP界面设计模块为例，打破教材中原有从局部到整体的零散的知识点讲解模式，对知识系统进行打散、重构，对知识体系重新架构，重新组合成若干系统完整的仿真案例项目，例如ios系统界面设计模块就分解为餐饮类APP界面设计、音乐播放器APP界面设计、美妆类商城APP界面设计三个案例项目。在现有教学条件下，尝试以模拟仿真APP项目为依托，以教师为主导，学生为中心，将任务分解为任务推出、任务分析、任务实施、任务评价四个教学环节。教师在各个教学环节中起引导、释疑、评价的作用。学生是任务的主要实施者，以“学生为中心”贯穿任务的各个环节，在任务实施过程中学生不仅可以利用旧有知识储备去解决新问题，还可以激发学生探索新知识的热情，增加获取知识的乐趣，从而完成整个实践教学。

现以APP界面设计模块里其中的美妆类商城APP界面设计项目为例，来阐述“任务驱动”教学模式各个教学环节的设计实施。

1、任务推出

教师在上课之前将教学任务安排通过微信群提前告知学生，并将任务所需素材及具体要求上传到职教云平台。学生接到预习通知，提前下载素材并了解项目要求。课堂上老师通过创设的情境引入教学任务：某化妆品商城委托你就职的UI设计公司设计一个完整的美妆商城APP，你所在的UI视觉设计组负责所有页面的界面设计，设计组长给你分配的任务是完成APP界面中的首页和商品详情界面的设计制作。本次教学任务是完成某美妆商城APP界面设计中的首页和商品详情页面设计制作，页面制作所需的图标、图片素材已经提供给学生。

2、任务分析

任务实施之前，教师向学生介绍分析项目设计具体要求。尺寸要求为：APP系统为ios系统，界面尺寸为iphone6，@2x，750*1334像素/英寸。颜色及风格：该美妆商城APP以女性为主要消费人群，所以颜色定位为红色系，时尚简约，风格偏扁平化。首页界面主要设计的模块为状态栏、导航栏、Banner图、功能区、新品推荐、热销产品、限时抢购、标签栏。产品详情页面主要设计的版块内容为产品图、产品简介、价格、加入购物车、立即购买等。

3、任务实施

学生在已有的项目要求指导下，开始美妆商城APP的首页和商品详情页的制作。学生利用已有的知识储备自主完成两个页面的设计制作。在制作过程中做好过程记录单的填写，把界面中涉及到的字体、字号、颜色、行距、形状尺寸、图标尺寸、间距等进行记录，并记录制作过程中的问题及解决方法，解决不了的问题做好记录向老师反馈。老师在学生制作过程中，根据学生的制作情况进行指导，并对学生在记录单中记录的问题进行解答，并针对性讲解。

4、任务评价

学生在完成两个界面设计后，将页面的psd格式和jpeg格式上传到职教云平台，老师对学生的任务完成情况进行评价，并对出现的问题针对性的评价，学生根据老师提出的修改意见进行修改完善，并重新提交。让学生相互查看完成效果，并相互评价并打分。采用老师点评和学生互评的方式，可以更全面、公正的对学生的作业做出评价。学生在相互评价打分过程中可以发现自己的不足和同学的优点，学生间相互学习，相互激励，激发了学生的学习热情和积极性。

【参考文献】

[1] 唐治，李颖. “项目贯穿式” UI互动设计教学探索——以工业产品中的软件界面设计为例[J]. 电脑知识与技术，2017.08.

[2] 沈爱凤，韩学芹.职业教育中“任务驱动式”教学模式的探讨与应用[J].职教论坛，2016.02.

[3] 刘哲纬.高职自动化专业教学改革中的相关问题研究[J].高教探索， 2016.05.

[4] 徐乐.项目驱动教学法在“Flash 动画设计”课程教学中的应用[J]. 职教通讯，2014.07.

【作者简介】

刘民娟，女，讲师，主要从事数字媒体应用技术专业相关课程的教学工作.

李颖云，女，副教授，主要从事软件技术专业相关课程的教学工作.