《移动UI交互设计（微课版）（第2版）》教学教案.docx

《《移动UI交互设计（微课版）（第2版）》教学教案.docx》由会员分享，可在线阅读，更多相关《《移动UI交互设计（微课版）（第2版）》教学教案.docx（48页珍藏版）》请在优知文库上搜索。

1、移动UI交互设计（微课版）（第2版）教案No.1授课题目项目一初识Ul设计教学单元学时4知识目标:了解Ul设计概念、分类、原则及设计流程教学目标能力目标:能够利用问卷调查方法完成用户调研素质目标:培养学生具备合理的知识结构及运用知识的能力重点UI设计原则、设计流程难点设计调研问卷教学方法讲授法、分析讨论法能力训练（作业）完成某产品的用户调研问卷教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入MUI界面设计

2、课程是服务于UI设计工作的必修课程，其前导课程是三大构成、数字平面制作技术，后续课程是交互设计。希望大家能够认真学习，为今后的就业打好基础。5,知识讲解一、课程要求1.课堂性质2 .课程要求3 .课程任务4 .课程达成的目标了解Ul设计原则、理念及规范，能够进行图标与主题界面、APP界面手绘设计，并使用平面设计软件来完成电子稿绘制。二、Ul设计概念1.什么是Ul5 .UI设计师的职能及就业前景6 .UI设计的分类7 .UI界面设计原则1）用户控制原则2）一致性原则3）简单美观原则4）布局合理原则30,课堂练习1.登录12306、金山软件网站，分析Ul设计的重要性2.阅读材料15,知识讲解三、U

3、I设计的流程1 .需要调研阶段2 .设计制作阶段3 .方案修改阶段4 .测试改进阶段30,教学环节教学内容备注四、用户调研1 .用户调研的必要性2 .用户调研的方法3 .问卷调查法确定主题一设置问题一测试问卷一邀请调查对象一汇总调查结果布置任务拟开发一款小学数学学习App,利用“问卷星”平叶完成调查问卷教师操作演示30,拓展训练以小组为单位，拟定一个调查主题并完成调查问卷设计40，展示评价小组互评、教师总结性评价20，课堂小结总结本次课所学知识，指出重点、难点5,能力训练（作业）结合评价，继续完善某产品的用户调研问卷5,No.2授课题目项目二主题图标设计任务1确定设计风格教学单元学时4教学目标

4、知识目标:了解图标的概念、种类、原则及设计流程能力目标:能够正确评价图标设计的优劣确定图标的设计风格素质目标:培养学生的创新意识重点难点图标设计的原则图标设计流程教学方法讲授法、分析讨论法能力训练（作业）确定本组图标的设计风格教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入我们在使用手机、平板、智能手表等液晶显示设备的时候，会发现大量的图标。这些图标比文字描述直观、漂亮，可以携带更多的视觉感，提升软件、功

5、能的可用性，极大地提升了视觉效果。本次课，我们就来学习图标设计的相关知识5,知识讲解一、图标的概念二、图标的分类1 .按功能：启动图标、应用图标和功能图标2 .按照设计风格：剪影图标、扁平化图标和拟物化图标20,课堂练习打开手机，引导学生区分图标的各种分类形式15,知识讲解三、图标设计的原则（展示案例并分析）1 .可识别性原则2 .差异性原则3 .合适的精细度4 .风格统一30,课堂练习展示不同图标效果，引导学生结合设计原则地图标进行评价30,知识讲解四、图标设计的流程1 .确定图标风格2 .图标草图绘制3 .计算机制图4 .主题界面制作五、图标的设计风格40,教学环节教学内容备注展示不同风格

6、的图标，并讲解布置任务以小组为单位，通过网络、手机收集不同风格的图标小组讨论，并确定本组主题图标的设计风络30,课堂小结总结本次课所学知识，指出重点、难点5,能力训练（作业）确定本组图标的设计风格5,No.3授课题目项目二主题图标设计任务2图标草图绘制教学单元学时4教学目标知识目标：了解草图的重要性及绘制方法能力目标：能够完成图标草图的绘制素质目标：培养学生的设计能力、想象能力重点难点草图绘制的方法将创意用草图表现出来教学方法演示法、讲授法、分析讨论法能力训练（作业）完成图标草图的绘制教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（

7、星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入在确定了图标风格之后，就可以进行草图绘制了。为什么要绘制草图？可不可以省略呢？5,知识讲解一、草图的重要性手绘是设计师表达情感、表达设计理念、表诉方案结果的最直接的“视觉语言”。二、草图的绘制要求要把握好型体、空间、明暗关系。三、草图的绘制方法用素描的表现手法绘制草图。20,课堂练习查看二维图标、三维图标等形式的草图，分析绘制方法15,知识讲解四、手绘完成创意的具体表现（举例说明）20，5,18教学环节教学内容备注课堂练习小组讨论，在本组图标设计风格的基础上如何用手

8、绘表现15,布置任务1内容（设计某手机主题图标，最少为24个，参考如下）（1）系统图标拨号，短信，浏览器，日历，时钟，邮件，计算器，联系人，音乐，视频，图库，相机，文档，下载，应用中心，设置，天气，个性化中心，游戏中心，录音，地图，便签，画板，安全中心，阅读，系统升级（2）常用图标QQ,支付宝，百度地图，淘宝，饿了么，微信2要求：a可以是2D,3Db风格统一10,课堂练习组内分配任务，进行草图绘制教师巡视指导85,课堂小结总结本次课所学知识，指出重点、难点5,能力训练（作业）完成图标草图的绘制5，No.4授课题目项目二主题图标设计任务3计算机制图（一）教学单元学时4教学目标知识目标：了解常用的

9、图标制作软件及图标制作规范能力目标：能够使用软件完成图标的计算机制图素质目标：培养学生的软件操作能力和认真的态度重点难点软件的应用能够学会各种材质的表现教学方法演示法、分析讨论法能力训练（作业）完成主题图标的计算机制图2-4张教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入完成了手绘草图，就可以使用电脑完成图标的电脑效果图制作To那么，使用什么软件完成制作？在制作中需要注意哪些问题呢？5,知识讲解一、图标

10、制作软件1 .PhOtOShOP和IIIUStratOr2 .两款软件的区别3 .两个软件在制作图标中的优势20,课堂练习选择2-3个不同材质的图标，操作演示软件制作方法，学生练习110,fry二、图标设计制作规范1.ioS系统图标制作规范2.Android系统图标制作规范教学环节教学内容备注三、需要注意的问题1.光源方向统一2,裁切区域和安全区域课堂练习分析教师展示的图片，判断是否符合制作规范15,课堂小结总结本次课所学知识，指出重点、难点5,能力训练（作业）完成主题图标的计算机制图2-4张5,No.5授课题目项目二主题图标设计任务3计算机制图（二）教学单元学时4教学目标知识目标：熟悉常用的

11、图标制作软件及图标制作规范能力目标：能够使用软件完成图标的计算机制图素质目标：培养学生的软件操作能力和认真的态度重点难点软件的应用能够学会各种材质的表现教学方法分析讨论法、任务驱动法能力训练（作业）完成主题图标的计算机制图教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入复习提问：1 .常用的图标设计软件是什么？2 .图标制作的规范有哪些？5,作品评价展示各组已经完成的计算机制图1 .小组互评2 .教师总结

12、性点评15,布置任务1 .结合教师评价，修改已经完成的计算机制图2 .在此基础上，小组内分工，完成共它主题图标的计算机制图教师巡视，并指导实践150,课堂小结总结本次课所学知识，指出重点、难点5,能力训练（作业）完成主题图标的计算机制图5，No.6授课题目项目二主题图标设计任务4主题界面制作教学单元学时4教学目标知识目标：了解手机主题的定义及主题界面的制作方法能力目标：能够结合图标设计风格完成主题界面的设计制作素质目标：培养学生的软件运用能力和设计能力重点难点主题界面的设计制作设计风格的统一教学方法讲授法、分析讨论法、任务驱动法能力训练（作业）完成主题界面的制作教学体会授课班级授课时间及地点年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室年月日（星期）第节，楼室注：教学体会一般在课后填写，授课时间须按上课先后顺序依次填写。教学环节教学内容备注课程导入在完成图标的设计制作之后，依据不同手机系统的尺寸要求，我们可以设计与图标相配套的主题界面效果图，这也是手机主题包中需要完成的设计内容。那么，什么是手机主题呢？5,知识讲解一、手机主题1 .相当于一个程序包2 .更换主题，可能会同时更换个性主题的图标、壁纸、屏保、开关机动画等等二、主题界面1 .主界面