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

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

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

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

人机界面的艺术原理

教学难点

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

时间（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

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

2、内容设计：

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

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

教学小结：

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

作业布置：

无

教学后记

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

第1周第2次课

（1）用户体验概念

（2）五个层面要素

用户体验概念

用户体验的五个层面

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

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

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

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

教学小结:

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

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

第2周第1次课

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

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

战略层面、范围层

战略层面——产品目标和用户需求；

网站的范围基本上是由网站战略层所决定的。

范围层——功能规格和内容需求；

结构层确定网站各种特性和功能最合适的组合方式，而这些特性和功能就构成了网站的范围层。

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

第2周第2次课

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

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

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

结构层、框架层、表现层

结构层——交互设计与信息架构；

与框架层相比更加抽象的是结构层，框架是结构的具体表达方式。

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

框架层——界面设计、导航和信息设计；

按钮、控件、照片和文本区域的位置。

表现层——感知设计；

分析报告

第3周第1次课

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

触觉、嗅觉、听觉、视觉；

对比与一致

内部和外部的一致性。

第3周第2次课

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

设计合成

配色方案

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

对色彩理解不全面。

第4周第1次课

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

用户体验要素的应用

马拉松

提出问题

短跑

策划书

第4周第2次课

****学院教案

第5周第1次课

*****

Photoshop

Photoshop设计基础知识，认识photoshop

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

（2）裁切工具的运用

基本选择工具的运用

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

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

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

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

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

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

需要多练习，熟能生巧。

第5周第2次课

photoshop

（3）修补工具的运用

（4）画笔工具的运用

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

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

仿制图章工具

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

图像合成

第6周第1次课

（1）填色工具的运用

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

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

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

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

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

第6周第2次课

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

（5）文字工具的运用

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

钢笔、路径工具

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

猫

第7周第1次课

Photoshop图层样式与模式的运用

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

第7周第2次课

Photoshop图像调整与蒙版运用

蒙版

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

陨石撞冰川

第8周第1次课

实训楼405

Photoshop滤镜特效应用

Photoshop滤镜特效交叉应用

Photoshop滤镜特效应用。

第8周第2次课

Photoshop合成效果应用

了解Photoshop合成效果应用。

地球工厂

第9周第1次课

Photoshop综合运用

Photoshop鼠绘特效

Photoshop鼠绘特效。

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

第9周第2次课

Photoshop3D特效

了解Photoshop3D特效。

绘制科幻大片效果

第10周第1次课

版式设计

版式设计基础：

形式美原则

网页色彩搭配基础：

网页配色原则、规律

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

表面上看，它是一种关于编排的学问；

实际上，它不仅是一种技能，更实现了技术与艺术的高度统一，版式设计是现代设计者所必备的基本功之一。

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

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

第10周第2次课

电商色彩搭配案例

企业网站色彩搭配案例

主要教学环节、方