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

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

《《人机交互界面设计》教学教案.docx》由会员分享，可在线阅读，更多相关《《人机交互界面设计》教学教案.docx（42页珍藏版）》请在冰豆网上搜索。

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

《人机交互界面设计》

教学教案

周课次

第1周第1次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）课程总体介绍

（2）人机界面的定义、起源及发展,人机界面的艺术原理等

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

人机界面的艺术原理

教学难点

人机界面的艺术原理

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

2、内容设计：

网站开发前期的知识准备，网站项目启动的基础。

使学生了解网站开发的流程，掌握人机界面的定义、起源及发展。

教学小结：

学生对人机界面艺术原理的理解不够深入

作业布置：

无

教学后记

学生对人机界面艺术原理的理解不够深入，推荐了几本相关课外书籍。

周课次

第1周第2次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）用户体验概念

（2）五个层面要素

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

用户体验概念

教学难点

用户体验的五个层面

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

用户体验，我们这里主要是指所谓的“客户体验”，指用户访问一个网站或者使用一个产品时的全部体验。

他们的印象和感觉,是否成功，是否享受，是否还想再来使用。

他们能够忍受的问题，疑惑和BUG的程度。

教学小结:

对理论知识理解不够透彻。

作业布置：

教学后记

对理论知识理解不够透彻。

需要多分析案例加深理解，灵活应用。

周课次

第2周第1次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）战略层面——产品目标和用户需求

（2）范围层——功能规格和内容需求

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

战略层面、范围层

教学难点

战略层面、范围层

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

战略层面——产品目标和用户需求；网站的范围基本上是由网站战略层所决定的。

范围层——功能规格和内容需求；结构层确定网站各种特性和功能最合适的组合方式，而这些特性和功能就构成了网站的范围层。

教学小结：

学生对理论理解比较抽象，需要更多案例分析。

作业布置：

无

教学后记

学生对理论理解比较抽象，需要更多案例分析。

周课次

第2周第2次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）结构层——交互设计与信息架构

（2）框架层——界面设计、导航和信息设计

（3）表现层——感知设计

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

结构层、框架层、表现层

教学难点

结构层、框架层、表现层

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

结构层——交互设计与信息架构；与框架层相比更加抽象的是结构层，框架是结构的具体表达方式。

它是用来设计用户如何达到某个页面，并且在他们做完事情之后去什么地方。

框架层——界面设计、导航和信息设计；按钮、控件、照片和文本区域的位置。

表现层——感知设计；

教学小结:

对理论知识理解不够透彻。

作业布置：

分析报告

教学后记

对理论知识理解不够透彻。

需要多分析案例加深理解，灵活应用。

周课次

第3周第1次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）表现层——感知设计

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

战略层面、范围层

教学难点

战略层面、范围层

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

表现层——感知设计；触觉、嗅觉、听觉、视觉；对比与一致

内部和外部的一致性。

教学小结：

学生对理论理解比较抽象，需要更多案例分析。

作业布置：

无

教学后记

学生对理论理解比较抽象，需要更多案例分析。

周课次

第3周第2次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）配色方案和排版，设计合成

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

设计合成

教学难点

配色方案

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

配色方案和排版，设计合成

教学小结:

对色彩理解不全面。

作业布置：

教学后记

对理论知识理解不够透彻。

需要多分析案例加深理解，灵活应用。

周课次

第4周第1次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）用户体验要素的应用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

用户体验要素的应用

教学难点

用户体验要素的应用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

用户体验要素的应用

马拉松

提出问题

短跑

教学小结：

学生对理论理解比较抽象，需要更多案例分析。

作业布置：

策划书

教学后记

学生对理论理解比较抽象，需要更多案例分析。

周课次

第4周第2次课

学时

2学时

教学地点

教学任务

名称

用户体验

教学目标

【含知识、技能、素养目标】

知识及技能目标：

（1）用户体验要素的应用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

用户体验要素的应用

教学难点

用户体验要素的应用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

（3）理论消化，案例辅助分析

（4）翻转课堂，根据学习的理论知识，由学生翻转课堂自己讲案例分析

2、内容设计：

用户体验要素的应用

马拉松

提出问题

短跑

教学小结：

学生对理论理解比较抽象，需要更多案例分析。

作业布置：

策划书

教学后记

学生对理论理解比较抽象，需要更多案例分析。

****学院教案

周课次

第5周第1次课

学时

2学时

教学地点

*****

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

（1）基本选择工具的运用

（2）裁切工具的运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

基本选择工具的运用

教学难点

基本选择工具的运用，裁切工具的运用。

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

首先了解选择工具和裁切工具。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第5周第2次课

学时

2学时

教学地点

*****

教学任务

名称

photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

（3）修补工具的运用

（4）画笔工具的运用

（5）仿制图章工具的运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

修补工具、仿制图章工具、画笔工具的运用

教学难点

仿制图章工具

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

了解修补工具、画笔、仿制图章。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

图像合成

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第6周第1次课

学时

2学时

教学地点

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

（1）填色工具的运用

（2）模糊、锐化、涂抹工具的运用

（3）减淡、加深、海绵工具的运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

填色、模糊、锐化、涂抹、减淡、加深、海绵工具的运用

教学难点

模糊、锐化、涂抹、减淡、加深、海绵工具的运用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

色、模糊、锐化、涂抹、减淡、加深、海绵工具的运用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第6周第2次课

学时

2学时

教学地点

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

（4）钢笔、路径工具的运用

（5）文字工具的运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

钢笔、路径、文字工具的运用

教学难点

钢笔、路径工具

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

了解钢笔、路径、文字工具的运用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

猫

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第7周第1次课

学时

2学时

教学地点

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

Photoshop图层样式与模式的运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop图层样式与模式的运用

教学难点

Photoshop图层样式与模式的运用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

Photoshop图层样式与模式的运用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第7周第2次课

学时

2学时

教学地点

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

Photoshop图像调整与蒙版运用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop图像调整与蒙版运用

教学难点

蒙版

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

了解Photoshop图像调整与蒙版运用的运用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

陨石撞冰川

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第8周第1次课

学时

2学时

教学地点

实训楼405

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

Photoshop滤镜特效应用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop滤镜特效应用

教学难点

Photoshop滤镜特效交叉应用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

Photoshop滤镜特效应用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第8周第2次课

学时

2学时

教学地点

实训楼405

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop设计基础知识，认识photoshop

Photoshop合成效果应用

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop合成效果应用

教学难点

Photoshop合成效果应用

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

了解Photoshop合成效果应用。

教学小结：

学生对新软件充满新鲜感，但是操作起来较难。

作业布置：

地球工厂

教学后记

学生对新软件充满新鲜感，但是操作起来较难。

需要多练习，熟能生巧。

****学院教案

周课次

第9周第1次课

学时

2学时

教学地点

实训楼405

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop综合运用

Photoshop鼠绘特效

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop鼠绘特效

教学难点

Photoshop鼠绘特效

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

Photoshop鼠绘特效。

教学小结：

学生虽然学了基础知识，但是不会灵活运用。

作业布置：

教学后记

学生虽然学了基础知识，但是不会灵活运用。

需要多练习，熟能生巧。

****学院教案

周课次

第9周第2次课

学时

2学时

教学地点

实训楼405

教学任务

名称

Photoshop

教学目标

【含知识、技能、素养目标】

知识及技能目标：

Photoshop综合运用

Photoshop3D特效

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

Photoshop3D特效

教学难点

Photoshop3D特效

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，可以用于设计网站的布局、处理网页图像，例如：

设计网站版式、设计导航样式、制作GIF动画等，而学习photoshop首先得要了解它。

了解Photoshop3D特效。

教学小结：

学生虽然学了基础知识，但是不会灵活运用。

作业布置：

绘制科幻大片效果

教学后记

学生虽然学了基础知识，但是不会灵活运用。

需要多练习，熟能生巧。

****学院教案

周课次

第10周第1次课

学时

2学时

教学地点

实训楼405

教学任务

名称

版式设计

教学目标

【含知识、技能、素养目标】

知识及技能目标：

版式设计基础：

形式美原则

网页色彩搭配基础：

网页配色原则、规律

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

网页色彩搭配基础：

网页配色原则、规律

教学难点

网页色彩搭配基础：

网页配色原则、规律

主要教学环节、方法及内容设计

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）操作讲解为主，理论为辅

（3）理论消化，案例辅助分析

2、内容设计：

版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段。

表面上看，它是一种关于编排的学问；实际上，它不仅是一种技能，更实现了技术与艺术的高度统一，版式设计是现代设计者所必备的基本功之一。

版式设计是指设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程。

教学小结：

学生对色彩知识理解不深刻，配色搭配不协调。

作业布置：

教学后记

学生对色彩知识理解不深刻，配色搭配不协调。

需要多练习，熟能生巧。

****学院教案

周课次

第10周第2次课

学时

2学时

教学地点

实训楼405

教学任务

名称

版式设计

教学目标

【含知识、技能、素养目标】

知识及技能目标：

电商色彩搭配案例

企业网站色彩搭配案例

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

电商色彩搭配案例

教学难点

电商色彩搭配案例

主要教学环节、方