《人机交互界面设计》教学教案.docx

1、人机交互界面设计教学教案人机交互界面设计教学教案周课次第1周 第1次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）课程总体介绍（2）人机界面的定义、起源及发展,人机界面的艺术原理等职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点人机界面的艺术原理教学难点人机界面的艺术原理主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析2、内容设计：网站开发前期的知识准备，网站项目启动的基础。使学生了解网站开发的流程，掌握人机界面的定义、起源及发展。教学小结：学生

2、对人机界面艺术原理的理解不够深入作业布置：无教学后记学生对人机界面艺术原理的理解不够深入，推荐了几本相关课外书籍。周课次第1周 第2次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）用户体验概念（2）五个层面要素职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点用户体验概念教学难点用户体验的五个层面主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：用户体验，我们这里主要是指所

3、谓的“客户体验”，指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功，是否享受，是否还想再来使用。他们能够忍受的问题，疑惑和BUG的程度。教学小结:对理论知识理解不够透彻。作业布置：教学后记对理论知识理解不够透彻。需要多分析案例加深理解，灵活应用。周课次第2周 第1次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）战略层面产品目标和用户需求（2）范围层功能规格和内容需求职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点战略层面、范围层教学难点战略层面、范围层主要教学环节、方法及内容设计时间（分）1

4、、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：战略层面产品目标和用户需求；网站的范围基本上是由网站战略层所决定的。范围层功能规格和内容需求；结构层确定网站各种特性和功能最合适的组合方式，而这些特性和功能就构成了网站的范围层。教学小结：学生对理论理解比较抽象，需要更多案例分析。作业布置：无教学后记学生对理论理解比较抽象，需要更多案例分析。周课次第2周 第2次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）结构层交互设计与信息架构（2）框架

5、层界面设计、导航和信息设计（3）表现层感知设计职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点结构层、框架层、表现层教学难点结构层、框架层、表现层主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：结构层交互设计与信息架构；与框架层相比更加抽象的是结构层，框架是结构的具体表达方式。它是用来设计用户如何达到某个页面，并且在他们做完事情之后去什么地方。框架层界面设计、导航和信息设计；按钮、控件、照片和文本区域的位置。表现层感知

6、设计；教学小结:对理论知识理解不够透彻。作业布置：分析报告教学后记对理论知识理解不够透彻。需要多分析案例加深理解，灵活应用。周课次第3周 第1次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）表现层感知设计职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点战略层面、范围层教学难点战略层面、范围层主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：表现层感知设计；触觉、嗅觉、听觉

7、、视觉；对比与一致内部和外部的一致性。教学小结：学生对理论理解比较抽象，需要更多案例分析。作业布置：无教学后记学生对理论理解比较抽象，需要更多案例分析。周课次第3周 第2次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）配色方案和排版，设计合成职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点设计合成教学难点配色方案主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：配色方案和

8、排版，设计合成教学小结:对色彩理解不全面。作业布置：教学后记对理论知识理解不够透彻。需要多分析案例加深理解，灵活应用。周课次第4周 第1次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）用户体验要素的应用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点用户体验要素的应用教学难点用户体验要素的应用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：用户体验要素的应用 马拉松提出

9、问题 短跑教学小结：学生对理论理解比较抽象，需要更多案例分析。作业布置：策划书教学后记学生对理论理解比较抽象，需要更多案例分析。周课次第4周 第2次课学时2学时教学地点教学任务名称用户体验教学目标【含知识、技能、素养目标】知识及技能目标：（1）用户体验要素的应用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点用户体验要素的应用教学难点用户体验要素的应用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）理论讲解为主（3）理论消化，案例辅助分析（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析2、内容设计：用户体验要素的应用

10、马拉松提出问题 短跑教学小结：学生对理论理解比较抽象，需要更多案例分析。作业布置：策划书教学后记学生对理论理解比较抽象，需要更多案例分析。*学院教案周课次第5周 第1次课学时2学时教学地点*教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshop（1）基本选择工具的运用（2）裁切工具的运用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点基本选择工具的运用教学难点基本选择工具的运用，裁切工具的运用。主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，

11、理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。首先了解选择工具和裁切工具。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第5周 第2次课学时2学时教学地点*教学任务名称photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photos

12、hop设计基础知识，认识photoshop（3）修补工具的运用（4）画笔工具的运用（5）仿制图章工具的运用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点修补工具、仿制图章工具、画笔工具的运用教学难点仿制图章工具主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习pho

13、toshop首先得要了解它。了解修补工具、画笔、仿制图章。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：图像合成教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第6周 第1次课学时2学时教学地点教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshop（1）填色工具的运用（2）模糊、锐化、涂抹工具的运用（3）减淡、加深、海绵工具的运用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点填色、模糊、锐化、涂抹、减淡、加深、海绵工具的运用教学难

14、点模糊、锐化、涂抹、减淡、加深、海绵工具的运用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。色、模糊、锐化、涂抹、减淡、加深、海绵工具的运用。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：教学后记学生对新软件充满新鲜感，但是操作起来较难。需要

15、多练习，熟能生巧。*学院教案周课次第6周 第2次课学时2学时教学地点教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshop（4）钢笔、路径工具的运用（5）文字工具的运用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点钢笔、路径、文字工具的运用教学难点钢笔、路径工具主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师

16、和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。了解钢笔、路径、文字工具的运用。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：猫教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第7周 第1次课学时2学时教学地点教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshopPhotoshop图层样式与模式的运用职业素质目标：（1）获取知识能力（2）团队协作精神

17、教学条件多媒体教室教学重点Photoshop图层样式与模式的运用教学难点Photoshop图层样式与模式的运用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。Photoshop图层样式与模式的运用。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：

18、教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第7周 第2次课学时2学时教学地点教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshopPhotoshop图像调整与蒙版运用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点Photoshop图像调整与蒙版运用教学难点蒙版主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件

19、，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。了解Photoshop图像调整与蒙版运用的运用。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：陨石撞冰川教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第8周 第1次课学时2学时教学地点实训楼405教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshopPhot

20、oshop滤镜特效应用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点Photoshop滤镜特效应用教学难点Photoshop滤镜特效交叉应用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。Photoshop滤镜特效应用。教学小结：

21、学生对新软件充满新鲜感，但是操作起来较难。作业布置：教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第8周 第2次课学时2学时教学地点实训楼405教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop设计基础知识，认识photoshopPhotoshop合成效果应用职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点Photoshop合成效果应用教学难点Photoshop合成效果应用主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3

22、）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。了解Photoshop合成效果应用。教学小结：学生对新软件充满新鲜感，但是操作起来较难。作业布置：地球工厂教学后记学生对新软件充满新鲜感，但是操作起来较难。需要多练习，熟能生巧。*学院教案周课次第9周 第1次课学时2学时教学地点实训楼405教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标

23、：Photoshop综合运用Photoshop鼠绘特效职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点Photoshop鼠绘特效教学难点Photoshop鼠绘特效主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。Photoshop鼠绘

24、特效。教学小结：学生虽然学了基础知识，但是不会灵活运用。作业布置：教学后记学生虽然学了基础知识，但是不会灵活运用。需要多练习，熟能生巧。*学院教案周课次第9周 第2次课学时2学时教学地点实训楼405教学任务名称Photoshop教学目标【含知识、技能、素养目标】知识及技能目标：Photoshop综合运用Photoshop 3D特效职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点Photoshop 3D特效教学难点Photoshop 3D特效主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分

25、析2、内容设计：Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。了解Photoshop 3D特效。教学小结：学生虽然学了基础知识，但是不会灵活运用。作业布置：绘制科幻大片效果教学后记学生虽然学了基础知识，但是不会灵活运用。需要多练习，熟能生巧。*学院教案周课次第10周 第1次课学时2学时教学地点实训楼405教学任务名称版式设计教学目标【含知识、技能、素养目标】知识及技能目标：版式设计基础：形式美原则网

26、页色彩搭配基础：网页配色原则、规律职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点网页色彩搭配基础：网页配色原则、规律教学难点网页色彩搭配基础：网页配色原则、规律主要教学环节、方法及内容设计时间（分）1、教学环节：（1）案例引入开篇理论（2）操作讲解为主，理论为辅（3）理论消化，案例辅助分析2、内容设计：版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段。表面上看，它是一种关于编排的学问；实际上，它不仅是一种技能，更实现了技术与艺术的高度统一，版式设计是现代设计者所必备的基本功之一。版式设计是指设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程。教学小结：学生对色彩知识理解不深刻，配色搭配不协调。作业布置：教学后记学生对色彩知识理解不深刻，配色搭配不协调。需要多练习，熟能生巧。*学院教案周课次第10周 第2次课学时2学时教学地点实训楼405教学任务名称版式设计教学目标【含知识、技能、素养目标】知识及技能目标：电商色彩搭配案例企业网站色彩搭配案例职业素质目标：（1）获取知识能力（2）团队协作精神教学条件多媒体教室教学重点电商色彩搭配案例教学难点电商色彩搭配案例主要教学环节、方