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

全国职业院校教学能力比赛教学设计课题校园融媒体手机应用界面设计•原型图绘制名称授课1911授课地点数字影像实训基地教学时间2022年10月30日班级学分教内（容该课程授课内容选自“版式设计”课程第4单元《UI界面）设计》析L课程《版式设计》是数字影像技术专业核心课程，课程内容融合国家界面设计职业技能等级证书（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.发布本次登录学习平台，

1.学习平台实训任发布实训任务及课前了解实训课程学习资获取课程学习资务与课程资源的发布学习资源，引导准备实训源与《任务书》源，并通过《任

2.在线检测记录学学生理解制作要任务

2.通过在线务书》了解本次生课前对制作要求掌求，为实现教学检测，了解学生实训任务，理解握情况，为教师反馈目标铺垫对制作要求的掌制作要求完成提供了客观依据握情况在线检测题

（二）发布课前学习登录学习平台，L微课有效支撑学生岗位知识自主学完成任务，设置在线通过微课学习自主学习，可反复观看，习，为完成实训课前检测题，掌握学“IOS设计规打破时空限制，强化知任务奠定知识基学习生学习情况，并范”，并完成在识学习础反线检测题

2.在线检测实时记录、馈汇总学生完成情况，帮助教师了解学生课前学习效果，为课堂教学打下基础（一登录学习平台，结合数据汇回答提问，反思自

1.学习平台记录并以真实具体的实训任务为载体，）项目总情况，反馈学生课前对制己存在的问题；复汇总了学生课前对制领取作要求的掌握情况,并回顾习“U I产品开发作要求掌握情况，为教教授岗位知识，“UI产品开发流程”流程”，理解本次师反馈提供了客观依提高专业技能，5分钟课程任务与对应据提升职业素养，岗位工作内容

2.实训手册引导学生强调实训教学的完成内容梳理，提高学实效性，督促习效率,记录学习过程学生端正学习态项目背景项目背景为〃校园融媒体手机应用开发〃，该项目是我校〃度人民网融媒体工程师学院〃重点推进内容前端设计由校方负责，后端开发由企业方负责，校企合作共同完成阶段任务为在产品架构图的基础上完成原型图设计制作要求L规范遵循IOS系统规范，各元件齐全

2.规格750Px*1334Px为基础，如果内容过多可根据设计需要适当增加页面长度

3.布局布局设计合理，按模块顺序设计绘制，各个模块清晰有序

4.内容需要在首页呈现一级模块区域与标题，可根据设计需要决定是否呈现二级模块内容5,输出提交工程文件截图带参考线与JPG格式原型图-结合学习平台数据，反馈学回顾课前学习内实训手册引导学生总结学生I0S设项目生课前对于I0S设计规范容，并回答提问，完成内容梳理，提高计规范的自学情分析的掌握情况，并通过设问引填写实训手册学习效率，记录学习况，并引导学生导学生进行项目分析

1.设计规范遵过程进行项目分析，5分钟循IOS/Andr为方案制定做铺oid垫

2.系统元件包括栏、栏、栏；规格？

3.内容区域包括1Banner区个2一级栏目个3二级栏目个三

1.指导各组学生制定设

1.以组为单位，

1.微课在进行方案设制定任务方案，方计方案根据制作要求与计时，协助学生回顾强调设计规范，案制

2.组织各组同学进行展产品架构图分I0S设计规范相关知为项目实施做准定示汇报，并进行审核析，制定方案识备

2.绘制示意图，

2.实训手册引导学生10分并展示汇报完成内容梳理，提高学钟习效率,记录学习过程

3.示意图引发学习兴趣，展示阶段成果（四1,在操作进行之前，引导学生学习评价标准在操作进行之前）学习“项目评价项目标准”，规范学实施生的操作过程，提升项目实施效10分评价率与效果钟内容评价标准优秀（9-10分）良好（7-8分）合格（6分）设计规范遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确，左右页边距20PXe遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确，左右页边距20-24PX之间遵循IOS系统规范进行设计，状态栏、导航栏、标签栏齐全，数据正确,左右页边距不小于20PX尺寸规格尺寸符合750Px*1334Px基础要求，能够根据设计需要合理调整页面长度，有序呈现内容尺寸符合750Px*1334Px基础要求，能够根据设计需要调整页面长度尺寸符合750PX*1334PX基础要求布局样式布局合理，按模块顺序设计绘制，间距统一，关联度高，各个模块清晰有序，有设计感布局合理，按模块顺序设计绘制，间距统一，各个模块清晰按模块顺序设计绘制，间距适当，各个模块清晰内容呈现内容完整，呈现一级模块二级模块，清晰有序，标题设计统一内容完整，呈现一级模块二级模块，清晰有序，标题完整内容完整，呈现一级模块清晰有序，标题完整效果输出保存了设计原文件；输出JPG文件，无白边；并提供了工程文件截图（带参考线），清晰无误保存了设计原文件；输出JPG文件提供了工程文件截图（带参考线）输出JPG文件，并提供了工程文件截图（带参考线）观察并指导学生遇到

1.依据产品架

1.微课视频详细的问题，给予学L使用微课视生必要构图与本组的教授形状工具技能频、学习课件两种资源，通过的个性化指导或操作项目方案，遵操作，学生可根据法不循IOS设计规范，需要多次观看，自主学自主学习、合作学习、教师指导使用软件绘制原型习改善了传统教学实三种形式突破教图训过程中，教师疲于应

2.保存设计源对多名学生，辅导不到学难点，实现技文件，将JPG格式位的困境有助于学生能目标

2.通过评价标准效果图与工程文件实现能力目标并突破难引领，设计规范截图（带标尺与参点问题考线）上传到实训

2.实训手册通过问题矫正、教师指导室FTP预设，以图文形式提供纠正三种途径落

3.遇到问题时，问题预设与解决建议，实素养目标进行探究学习，并传授教师经验，协助学主动寻求组内协作生快速解决问题，提升与教师指导制作效率并以文字形并在《实训手册》式记录学生实训过程中中记录问题以及解遇到的问题以及解决措决措施、解决效果施，督促学生总结反思等依据评价标准进（五小组评价展示小组评价展一文件服务器系统组织小组互评与作品示根据评价快速获取并展示学行自评、互评，标准，填写实项目展示介绍参与学生的生作品，提高课堂突出制作要求与评价发言，总结各组学生的总体训手册中的评价内效率设计规范，再次落实教学目标，表现和实训效果，容，组内15分给予学生正面的评价自评，推选小并强化重难点问钟和鼓励组代表作品，进行题的学习效果展示与发言巩固知识、能力、素养目标,培养教师总结评价教师总结评

1.实训手册通过工匠精神，落实结合学生作品表现、学价任务评价单，提供课程思政，并引习过程进行总结

1.回答教师提评价标准，规范有导学生认知自我

1.突出本次实训课程问，反思自我效评价不足，明确后续的重难点，重点强调严不足巩固本

2.网络资源（腾努力方向谨规范的职业意识与次实训课所学讯课堂），拓展课精益求精的工匠精神的岗位知识和堂所学，丰富技能，

2.推荐专业的快速原型设技能，感受“设计课堂延伸计工具Axure RP与学习路之美，永无止境，径，提高工作效率与质量细节决定成败”的职业理念

2.（课后）登录腾讯课堂可获取大量免费AxureRP以及UI学习视频资源

（一）发布学习资料，通过微课自主学微课提高学习效率，为完成UI设计效课后延伸岗位知指导学生学习〃习“UI设计规提升学习兴趣,支撑学果图绘制进行岗识学习UI设计规范〃范”生自主学习位知识准备完成后续课程（界

（二）界面效果

1.为学生提供

1.依据“原型

1.学习平台发布学习面效果设绘制原型图与界面设图”，遵循“U I资源，收取学生作品资计）的课前预习计效果图对比案设计规范”，进行料，云端安全存储任务，与后续任例，并提供案例实操，绘制界面效

2.案例视频教授后续务有机结合，课操作视频果图流程《界面设计实操》堂延伸2,与学生交流

2.根据个人技能关键技能，拓展课堂学讨论，指导学生程度与需要，选择习修改完善作品性观看教师提供的完整案例操作视频3,学习平台提交JPG预览图与使用效果图课后反思附件实训手册专业数字影像技术班级平面设计姓名_小组_

一、学习指南

1.课题名称校园融媒体手机应用界面设计-原型图绘制

2.学习目标

（1）知识理解并掌握IOS界面设计规范

（2）能力根据用户需求与产品架构图，完成〃校园融媒体〃产品原型图设计

（3）素养通过对IOS界面设计规范的学习与运用，感受严谨规范的职业意识与精益求精的工匠精神

3.学习任务

（1）项目领取学习《任务书》，了解项目主题与制作要求

（2）项目分析结合制作要求，对〃产品架构图〃进行分析

（3）方案制定遵循IOS设计规范制定实施方案

（4）项目实施依据实施方案，使用工具软件绘制产品原型图

（5）项目评价呈现完成效果，依据制作要求与设计规范进行评价、提升任务质量

二、项目说明项目主题项目主题为〃校园融媒体手机应用开发〃，该项目是我校人民网融媒体工程师学院〃重点推进内容前端设计由校方负责，后端开发由企业方负责，校企合作共同完成阶段任务为在产品架构图的基础上完成原型图设计制作要求:|产品架构图:根据产品功能架构图，整理绘制首页原型图

6.规范:遵循IOS系统规范，各元件齐全

7.规格:750Px*1334PX为基础，如果内容过多可根据设计需要适当增加页面长度

8.布局布局设计合理，按模块顺序设计绘制，各个模块清晰有序

9.内容需要在首页呈现一级模块区域与标题，可根据设计需要决定是否呈现二级模块内容

10.输出提交工程文件截图（带丽MM参考线）与格式原型图JPG

三、项目流程1制作要求项目

（1）规范遵循（IOS/Android）系统规范进行排版领取

（2）规格以（）PX*（）PX为基础，如果内容过多（可以/不可以）根据需要适当增加页面长度

（3）布局布局设计合理，按（）顺序设计绘制，各个模块清晰有序

（4）内容需要在首页呈现（）模块区域与标题，可根据设计需要决定是否呈现二级模块内容

（5）交付提交（JPG/PNG/GIF/PSD）格式原型图与提交出工程文件截图，带（）

（1）系统兀件包括（）栏一（）PX、（）栏一（）PX、（）栏一（）PXo2

（2）内容区域包括项目Banner IX（）个分析一级模块（）个二级模块（）个3界面布局绘制图例方案制定函表式第列馆式口L宫馆式匚选项卡式顷转木马口亍为扩展式子面板式国表式寅它样式_方案说明通过审核/修改后通过/不予通过；指导意见4请简述你在操作过程中遇到了哪些问题？是否解决？解决问题方法或途径是什么？（也可总结关键技术项目的使用技巧或者学习体会实施遇到问题解决措施解决效果5项目评价评价评价评价标准自评组师项目内容评评优秀（9・10分）良好（7・8分）合格（6分）认真完成各项课前学习能够完成各项课前学过程课前学习态度端正，土动学习，认真任务，检测正确率在75%习任务，检测正确率评价完成各项课前学习任务，检以上在60%以上50分测正确率在85%以上项目领取理解项目主题、制作要求，理了解项目主题、制作要基本了解项目主题、制解设计规范求，理解设计规范作要求、设计规范项目分析根据客户需求与岗位知识，能够分析所有制作规格根据客户需求与岗位要点，无重大偏差能够全面、准确地分析出所知识，能够理解主要有制作规格要点的制作规格要点方案制定设计方案符合制作要求与产设计方案符合制作要求品架构图不忌，遵循设计规与产品架构图系高，遵循设计方案基本符合制范，各元件与各模块清晰呈设计规范，各元件与各模作要求与产品架构图现，设计合理为序块，设计合理下意，遵循设计规范项目实施能够组织小组研讨，并且擅能够在遇到困难时主十与他人主动沟通并合作，能够积极参与小组合作，动寻求组内其他同学在规定时间内，较好的完成并积极发言，准时完成项帮助，完成了项目操了项目操作目操作，效果有待改进作结果评遵循IOS系统规范进行设遵循IOS系统规范进行设计规范价计，状态栏、导航栏、标签设计，状态栏、导航栏、遵循IOS系统规范进50分栏齐全，数据正确，左右页标签栏齐全，数据正确，行设计，状态栏、导边距20PX左右页边距20-24PX之o航栏、标签栏齐全,数间据正确，左右页边距不小于20P Xo尺寸符合750PX*l尺寸规格尺寸符合750Px*1334Px基334PX基础要求础要求，能够根据设计需要尺寸符合750Px*133台埋调整贞国长度，有序呈4PX基础要求，能够根据现内容设计需要调整奂国长度布局样式布局合理，按模块顺序设按模块顺序设计绘制，布局合理，按模块顺序设计计绘制，间距统一，各个间距适当，各个模块绘制，间距统一，关联度局，各个模块清晰有序，有设计模块清晰清晰感内容呈现内容完整，呈现一级模块一内容完整，呈现一级模块内容完整，呈现一级模级模块，清晰有序，标题设二级模块，清晰有序，标块清晰有序，标题完计统一题完整整输出效果保存了设计原文件；输出J输出JPG文件，并提PG文件，无白边；并提供了保存了设计原文件；输出供了，程文件截图（带_1_程文件截图（带参考线），JPG文件提供了_L程文参考线）清晰无误件截图（带参考线）总分总分=自评30%+组评30%+师评40%评价85-100优秀□75-84良好口60-74合格口60分以下口等级自我评价教师评价。