人机交互界面设计-教案最新版Word下载.docx

人机交互界面设计-教案最新版Word下载.docx

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

学院教案

周课次

第1周第1次课学时2学时教学地点实训楼305

教学任务名称

用户体验

教学目标

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

知识及技能目标：

（1）课程总体介绍

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

职业素质目标：

（1）获取知识能力

（2）团队协作精神

教学条件

多媒体教室

教学重点

人机界面的艺术原理

教学难点

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

时间

（分）

1、教学环节：

（1）案例引入开篇理论

（2）理论讲解为主

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

2、内容设计：

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

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

教学小结：

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

作业布置：

无

教学后记

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

第1周第2次课学时2学时教学地点实训楼305

（1）用户体验概念

（2）五个层面要素

用户体验概念

用户体验的五个层面

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

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

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

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

教学小结:

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

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

第2周第1次课学时2学时教学地点实训楼305

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

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

战略层面、范围层

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

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

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

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

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

第2周第2次课学时2学时教学地点实训楼305

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

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

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

结构层、框架层、表现层

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

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

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

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

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

表现层——感知设计；

分析报告

第3周第1次课学时2学时教学地点实训楼305

（1）表现层——感知设计职业素质目标：

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

对比与一致内部和外部的一致性。

第3周第2次课学时2学时教学地点实训楼305

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

设计合成

配色方案

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

对色彩理解不全面。

第4周第1次课学时2学时教学地点实训楼305

（1）用户体验要素的应用职业素质目标：

用户体验要素的应用

/马拉松

提出问题

、短跑

策划书

第4周第2次课学时2学时教学地点实训楼305

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

第5周第1次课学时2学时教学地点实训楼305

Photoshop

Photoshop设计基础知识，认识photoshop

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

（2）裁切工具的运用

基本选择工具的运用

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

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

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

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

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

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

需要多练习，熟能生巧。

第5周第2次课学时2学时教学地点实训楼305

photoshop

（3）修补工具的运用

（4）画笔工具的运用

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

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

仿制图章工具

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

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

图像合成

第6周第1次课学时2学时教学地点实训楼405

（1）填色工具的运用

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

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

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

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

Photoshop作为专业的图像编辑软件，可用于广告，艺术，平面设计等，是网页设计师和平面设计师最常用的工具之一，