国职业院校教学能力比赛教学设计

全国职业院校教学能力比赛教学设计课题名称校园融媒体手机应用界面设计-原型图绘制授课班级1911授课地点数字影像实训基地教学时间2020年10月30日教学内容分析该课程授课内容选自“版式设计”课程第4单元《UI（界面）设计》1.课程：《版式设计》是数字影像技术专业核心课程，课程内容融合国家界面设计职业技能等级证书（1+X）标准。课程通过DM单、海报、书籍（画册）、光盘封套、网页页面、移动端界面设计等版式设计领域所涉及的典型岗位工作任务的设计制作，培养学生设计基础、平面设计与界面设计相关的理论知识、设计规范、工作流程与关键技术，提升学生岗位专业能力与综合职业素养。2.单元：本单元主要内容是《UI（界面）设计》，按设计内容划分为《移动端界面设计》与《网页页面设计》2个学习项目，之间是递进逻辑关系。3.课时：教师依据课程教学标准，结合专业实训教学安排，对实训项目的具体内容进行灵活调整。界面设计是岗位从业人员经常接触的典型工作任务，具有很强的岗位实用性。本次课的内容能够为学生呈现一个相对完整的工作流过程，具有清晰的职业导向。4.思政：课程实训项目是在劲松职高与人民网校企合作背景下的真实生产任务。在教师指导下，学生进行项目分析与方案设计，完成“思政教育专栏”等一级栏目设计，并在后续课程中陆续完成“课程思政”、“特色活动”、“校园党建”、“一校一品”等多个二级的设计，通过文字、视频、图片等相关资源的获取、整合、加工，在学习过程中培养严谨规范的职业意识与精益求精的工匠精神，显隐结合、潜移默化，落实课程思政。学情分析教学对象是高二年级平面设计班级学生1.课程基础：学习了《电脑美术》、《PS图像处理》2门专业核心课程。2.知识基础：通过相关专业课程的学习，学生对于设计基础知识与工具软件运用知识有一定的掌握和运用经验，对UI产品开发流程有一定认识，但尚未进行项目实操，对IOS/安卓系统界面设计规范尚未有效掌握。3.能力基础：通过《PS图像处理》课程的学习，学生基本掌握选区、图层、蒙版等相关操作，具有一定的项目实训经验，但对UI设计内容尚未进行系统性学习，模板定制、形状绘制、文字排版、图标设计等UI设计相关操作技能尚未有效掌握。4.素养基础：通过前导课程的教学和训练，学生能够熟练使用网络平台、手机等信息化学习工具；习惯小组合作形式，能使用学习资源开展自主学习并与同学互相交流；由于职业体验不足，对“设计之美永无止境，细节决定成败”的职业理念缺乏认识，对“严谨规范、精益求精、追求卓越、”的职业品质缺乏理解。教学目标知识目标通过课前自主学习与课堂实践操作，理解IOS界面设计规范。能力目标根据制作要求与产品架构图，完成“校园融媒体”产品原型图设计。素养目标通过对IOS界面设计规范的学习与运用，培养严谨规范的职业意识与精益求精的工匠精神等岗位职业素养。教学重点根据制作要求与产品架构图，完成“校园融媒体”产品原型图设计。教学难点完成“校园融媒体工作室”原型图设计，符合IOS界面设计规范。教学方法教法：项目教学法学法：混合式学习环境与资源环境：平面设计工作室、多媒体教学系统、网络学习平台资源：微课视频、PPT课件、图片、实训手册、PDF电子文档全国职业院校教学能力比赛教学设计教学环节时间分配教学内容与教师活动学生活动教学资源教学设计意图一课前准备（一）了解实训任务1.发布本次实训课程学习资源与《任务书》。2.通过在线检测，了解学生对制作要求的掌握情况。登录学习平台，获取课程学习资源，并通过《任务书》了解本次实训任务，理解制作要求。完成在线检测题。1.学习平台：实训任务与课程资源的发布。2.在线检测：记录学生课前对制作要求掌握情况，为教师反馈提供了客观依据。发布实训任务及学习资源，引导学生理解制作要求，为实现教学目标铺垫。（二）完成课前学习发布课前学习任务，设置在线检测题，掌握学生学习情况，并反馈。登录学习平台，通过微课学习“IOS设计规范”，并完成在线检测题。1.微课：有效支撑学生自主学习，可反复观看，打破时空限制，强化知识学习。2.在线检测：实时记录、汇总学生完成情况，帮助教师了解学生课前学习效果，为课堂教学打下基础。岗位知识自主学习，为完成实训任务奠定知识基础。二课堂实（一）项目领取5分钟登录学习平台，结合数据汇总情况，反馈学生课前对制作要求的掌握情况，并回顾“UI产品开发流程”。1.学习平台：记录并汇总了学生课前对制作要求掌握情况，为教师反馈提供了客观依据。2.回答提问，反思自己存在的问题；复习“UI产品开发流程”，理解本次课程任务与对应岗位工作内容。施实训手册：引导学生完成内容梳理，提高学习效率，记录学习过程。以真实具体的实训任务为载体，教授岗位知识，提高专业技能，提升职业素养，强调实训教学的实效性，督促学生端正学习态度。项目背景：项目背景为“校园融媒体手机应用开发”，该项目是我校“人民网融媒体工程师学院”重点推进内容。前端设计由校方负责，后端开发由企业方负责，校企合作共同完成。阶段任务为在产品架构图的基础上完成原型图设计。制作要求：1.规范：遵循IOS系统规范，各元件齐全。2.规格：750PX*1334PX为基础，如果内容过多可根据设计需要适当增加页面长度。3.布局：布局设计合理，按模块顺序设计绘制，各个模块清晰有序。4.内容：需要在首页呈现一级模块区域与标题，可根据设计需要决定是否呈现二级模块内容。5.输出：提交工程文件截图（带参考线）与JPG格式原型图。（二）项目分析5分钟结合学习平台数据，反馈学生课前对于IOS设计规范的掌握情况，并通过设问引导学生进行项目分析。回顾课前学习内容，并回答提问，填写实训手册。1.设计规范遵循：IOS？/Android？2.系统元件包括：（）栏、（）栏、（）栏；规格？3.内容区域包括：（1）Banner区：（）个（2）一级栏目：（）个（3）二级栏目：（）个实训手册：引导学生完成内容梳理，提高学习效率，记录学习过程。总结学生IOS设计规范的自学情况，并引导学生进行项目分析，为方案制定做铺垫。（三）方案制定10分钟1.指导各组学生制定设计方案。2.组织各组同学进行展示汇报，并进行审核。1.以组为单位，根据制作要求与产品架构图分析，制定方案。2.1.微课：在进行方案设计时，协助学生回顾IOS设计规范相关知识。2.制定任务方案，强调设计规范，为项目实施做准备。绘制示意图，并展示汇报。实训手册：引导学生完成内容梳理，提高学习效率，记录学习过程。3.示意图：引发学习兴趣，展示阶段成果。（四）1.在操作进行之前，引导学生学习评价标准。项目实施10分钟评价内容评价标准优秀（9-10分）良好（7-8分）合格（6分）设计规范遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确，左右页边距20PX。遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确，左右页边距20-24PX之间。遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确，左右页边距不小于20PX。尺寸规格尺寸符合750PX*1334PX基础要求，能够根据设计需要合理调整页面长度，有序呈现内容。尺寸符合750PX*1334PX基础要求，能够根据设计需要调整页面长度。尺寸符合750PX*1334PX基础要求。布局样式布局合理，按模块顺序设计绘制，间距统一，关联度高，各个模块清晰有序，有设计感。布局合理，按模块顺序设计绘制，间距统一，各个模块清晰。按模块顺序设计绘制，间距适当，各个模块清晰。内容呈现内容完整，呈现一级模块二级模块，清晰有序，标题设计统一。内容完整，呈现一级模块二级模块，清晰有序，标题完整。内容完整，呈现一级模块清晰有序，标题完整。效果输出保存了设计原文件；输出JPG文件，无白边；并提供了工程文件截图（带参考线），清晰无误。保存了设计原文件；输出JPG文件,提供了工程文件截图（带参考线）。输出JPG文件，并提供了工程文件截图（带参考线）。在操作进行之前学习“项目评价标准”，规范学生的操作过程，提升项目实施效率与效果。1.1.1.观察并指导学生遇到的问题，给予学生必要的个性化指导或操作演示。依据产品架构图与本组的项目方案，遵循IOS设计规范，使用软件绘制原型图。2.保存设计源文件，将JPG格式效果图与工程文件截图（带标尺与参考线）上传到实训室FTP。3.遇到问题时，进行探究学习，并主动寻求组内协作与教师指导。并在《实训手册》中记录问题以及解决措施、解决效果等。微课视频：详细教授形状工具技能操作，学生可根据需要多次观看，自主学习。改善了传统教学实训过程中，教师疲于应对多名学生，辅导不到位的困境。有助于学生实现能力目标并突破难点问题。2.实训手册：通过问题预设，以图文形式提供问题预设与解决建议，传授教师经验，协助学生快速解决问题，提升制作效率。并以文字形式记录学生实训过程中遇到的问题以及解决措施，督促学生总结反思。使用微课视频、学习课件两种资源，通过自主学习、合作学习、教师指导三种形式突破教学难点，实现技能目标。2.通过评价标准引领，设计规范矫正、教师指导纠正三种途径落实素养目标。（五）项目评价15分钟小组评价展示：组织小组互评与作品展示介绍。参与学生的发言，总结各组学生的总体表现和实训效果，给予学生正面的评价和鼓励。小组评价展示：根据评价标准，填写实训手册中的评价内容，组内自评，推选小组代表作品，进行展示与发言。文件服务器系统：快速获取并展示学生作品，提高课堂效率依据评价标准进行自评、互评，突出制作要求与设计规范，再次落实教学目标，并强化重难点问题的学习效果。教师总结评价：结合学生作品表现、学习过程进行总结：1.突出本次实训课程的重难点，重点强调严谨规范的职业意识与精益求精的工匠精神。2.教师总结评价：1.回答教师提问，反思自我不足。巩固本次实训课所学的岗位知识和技能，感受“设计之美，永无止境，细节决定成败”的职业理念。2.1.实训手册：通过任务评价单，提供评价标准，规范有效评价。2.网络资源：（腾讯课堂），拓展课堂所学，丰富技能，课堂延伸。巩固知识、能力、素养目标，培养工匠精神，落实课程思政，并引导学生认知自我不足，明确后续努力方向。推荐专业的快速原型设计工具AxureRP与学习路径，提高工作效率与质量。（课后）登录腾讯课堂可获取大量免费AxureRP以及UI学习视频资源。三课后延伸（一）岗位知识学习发布学习资料，指导学生学习“UI设计规范”。通过微课自主学习“UI设计规范”。微课：提高学习效率，提升学习兴趣，支撑学生自主学习。为完成UI设计效果图绘制进行岗位知识准备。（二）界面效果绘制1.为学生提供原型图与界面设计效果图对比案例，并提供案例操作视频。2.与学生交流讨论，指导学生修改完善作品。1.依据“原型图”，遵循“UI设计规范”，进行实操，绘制界面效果图。2.根据个人技能程度与需要，选择性观看教师提供的完整案例操作视频。3.学习平台提交JPG预览图与使用效果图。1.学习平台：发布学习资源，收取学生作品资料，云端安全存储。2.案例视频：教授后续流程《界面设计实操》关键技能，拓展课堂学习。完成后续课程（界面效果设计）的课前预习任务，与后续任务有机结合，课堂延伸。课后反思附件：实训手册专业：数字影像技术班级：平面设计姓名：小组：一、学习指南1.课题名称：校园融媒体手机应用界面设计-原型图绘制2.学习目标：（1）知识：理解并掌握IOS界面设计规范。（2）能力：根据用户需求与产品架构图，完成“校园融媒体”产品原型图设计。（3）素养：通过对IOS界面设计规范的学习与运用，感受严谨规范的职业意识与精益求精的工匠精神。3.学习任务：（1）项目领取：学习《任务书》，了解项目主题与制作要求。（2）项目分析：结合制作要求，对“产品架构图”进行分析。（3）方案制定：遵循IOS设计规范制定实施方案。（4）项目实施：依据实施方案，使用工具软件绘制产品原型图。（5）项目评价：呈现完成效果，依据制作要求与设计规范进行评价、提升任务质量。二、项目说明任务书项目主题：项目主题为“校园融媒体手机应用开发”，该项目是我校“人民网融媒体工程师学院”重点推进内容。前端设计由校方负责，后端开发由企业方负责，校企合作共同完成。阶段任务为在产品架构图的基础上完成原型图设计。制作要求：产品架构图：根据产品功能架构图，整理绘制首页原型图。6.规范：遵循IOS系统规范，各元件齐全。7.规格：750PX*1334PX为基础，如果内容过多可根据设计需要适当增加页面长度。8.布局：布局设计合理，按模块顺序设计绘制，各个模块清晰有序。9.内容：需要在首页呈现一级模块区域与标题，可根据设计需要决定是否呈现二级模块内容。10.输出：提交工程文件截图（带参考线）与JPG格式原型图。三、项目流程1项目领取制作要求：（1）规范：遵循（IOS/Android）系统规范进行排版。（2）规格：以（）PX*（）PX为基础，如果内容过多（可以/不可以）根据需要适当增加页面长度。（3）布局：布局设计合理，按（）顺序设计绘制，各个模块清晰有序。（4）内容：需要在首页呈现（）模块区域与标题，可根据设计需要决定是否呈现二级模块内容。（5）交付：提交（JPG/PNG/GIF/PSD）格式原型图与提交出工程文件截图，带（）。2项目分析（1）系统元件包括：（）栏—（）PX、（）栏—（）PX、（）栏—（）PX。（2）内容区域包括：Banner区：（）个一级模块：（）个二级模块：（）个3方案界面布局：绘制图例：制定☐列表式☐陈列馆式☐九宫馆式☐选项卡式☐旋转木马☐行为扩展式☐多面板式☐图表式☐其它样式：方案说明：通过审核/修改后通过/不予通过；指导意见：4项目实施请简述你在操作过程中遇到了哪些问题？是否解决？解决问题方法或途径是什么？（也可总结关键技术的使用技巧或者学习体会。遇到问题：解决措施：解决效果：5项目评价评价项目评价内容评价标准自评组评师评优秀（9-10分）良好（7-8分）合格（6分）过程评价50分课前学习态度端正，主动学习，认真完成各项课前学习任务，检测正确率在85%以上。认真完成各项课前学习任务，检测正确率在75%以上。能够完成各项课前学习任务，检测正确率在60%以上。项目领取理解项目主题、制作要求，理解设计规范。了解项目主题、制作要求，理解设计规范。基本了解项目主题、制作要求、设计规范。项目分析根据客户需求与岗位知识，能够全面、准确地分析出所有制作规格要点。能够分析所有制作规格要点，无重大偏差。根据客户需求与岗位知识，能够理解主要的制作规格要点。方案制定设计方案符合制作要求与产品架构图示意，遵循设计规范，各元件与各模块清晰呈现，设计合理有序。设计方案符合制作要求与产品架构图示意，遵循设计规范，各元件与各模块，设计合理。设计方案基本符合制作要求与产品架构图示意，遵循设计规范。项目实施能够组织小组研讨，并且擅于与他人主动沟通