《界面设计》教案

XX教案

周课次第1周学时2学时教学地点多媒体教室'机房

教学任务

第1章UI设计相关知识

名称

知识目标：引导学生进行课程解读，了解课程学习目标、重难点，并进行

教学目标

学习规划；

【含知识、

能力目标：了解界面设计概述；

技能、素养

素养目标：具备一定的界面设计理论素养；体会团队协作在项目开发中的

目标】

重要性，养成团队协作的素养。

教学条件多媒体机房

教学重点课程介绍

教学难点课程学习规划、兴趣培育

时间

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

（分）

一、教学内容：课程介绍、学习规划与界面设计初识

二、教学过程流程设计：主要采用逻辑归纳型教学过程流程设计，便于课程

1.开始上课

利用学习通平台现场签到考勤

2.导引

课程地位分析，前后续课程介绍。

3.教师应用教育技术媒体手段进行教学内容讲解展示

(1)课程综述。

(2)新课

1.1UI设计的相关概念

1.1.1UI设计的概念

1.1.2UI与WUI和GUI

1.1.3UI设计常用术语中英文对照

1.1.4UI设计常用软件

1.2UI设计的风格表现

1.3UI设计的行业发展

1.3.1UI设计行业现状

1.3.2UI设计发展趋势

1.4典型课程成果展示、学习方法引导

4.简单归纳

课程学习方法引导。

5.类似事实

学生应用教育技术媒体手段收集观察。

6.分析应用

学生对收集观察的各个类型界面进行分析，达到知识迁移的目的。

7.归纳

教师归纳，进一步激励和完成教学；

课程小结：

了解UI设计的相关概念、项目流程、风格表现和行业发展。

掌握UI设计的学习方法。

三、教学重难点的讲解：

1.教学重点

借助媒体展示讲解、借助直观媒体、通过图表、表格对比分析课程性

质、考核方式、学习方法等突出重点一一课程介绍。

2.教学难点分析

课程学习规划、兴趣培育是本次课的难点。首次课主要通过直观教学，

联系实际经典案例效果展示从价值观、情感打动等角度进行达成。

教学小结：了解UI交互界面设计的未来与现状。

作业布置：UI交互界面设计的未来与现状

教学后记

初步接触本课，学生学习积极性较高。重点在于引导学习方法与思维训练方式。

XXXX学院教案

周课次第XX周学时2学时教学地点多媒体教室、机房

教学任务

UI设计的配色方法

名称

教学目标知识目标：1、构成方法

【含知识、2、色彩基础

技能、素养3、色彩搭配

目标】技能目标：1、色彩的调整

素质目标：1、具有良好审美意识，良好的构成的思维方式。

教学条件多媒体机房

教学重点色彩的调整、构成方法

教学难点色彩搭配

时间

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

（分）

教学环节：理论教学与实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入与讲解

色彩基础与配搭

3、教学内容讲解及示范

90

任务一、构成方法讲解

任务二、Photoshop中的色彩调整

学生巩固练习一绘图方法总结

任务三、Illustrator中的色彩调整

学生巩固练习一草图绘制

5、教学总结、课后练习要求

教学小结：在掌握基本命令的同时，要尽量能够使用快捷方式操作。

作业布置：各式构成摄影、调色练习

教学后记

XXXX学院教案

周课次第XX周学时2学时教学地点多媒体教室,机房

教学任务

第四章UI设计的常用工具

名称

知识目标：1、UI设计软件简介

教学目标

2、软件使用规范

【含知识、

3、软件制图规范

技能、素养

技能目标：熟练掌握UI设计软件。

目标】

素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点图形的绘制

教学难点图形的绘制

时间

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

（分）

教学环节：理论教学与实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、前期知识内容回顾或课前测（学生绘图技术能力测试）

2、新课的导入一常见工具与辅助工具介绍

3、教学内容讲解及示范

90

任务一、基本绘图工具Photoshop绘图方法与常见操作

学生巩固练习一绘图方法总结

任务二、基本绘图工具Illustrator绘图方法与常见操作

学生巩固练习一草图绘制

5、教学总结、课后练习要求

教学小结：熟练掌握形状工具、刻刀工具、橡皮擦工具、粗糙笔刷工具、自由变形工具、

设置对象的排列顺序。

作业布置：尝试绘制成套图标或物品（7个以上）

教学后记

例如：回顾熟悉PS与A1,要求学生做到能灵活选择工具表达想法。

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

第5章UI界面常用壁纸与控件制作

名称

知识目标：1、UI设计软件熟练

教学目标2、软件使用规范

【含知识、3、软件制图规范

技能、素养技能目标：熟练掌握UI设计中的常见控件设计制作思路。

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点熟练使用UI设计软件

教学难点熟练使用UI设计软件

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一学生根据生活认知列举常见控件和归纳壁纸种类。

180

3、教学内容讲解及示范

任务一、壁纸

任务二、常见控件

教师示范、学生巩固练习

4、教学总结、课后练习要求

教学小结：熟练掌握形状工具、刻刀工具、橡皮擦工具、粗糙笔刷工具、自由变形工具、

设置对象的排列顺序。

作业布置：自设一套壁纸控件

教学后记

回顾熟悉PS与AI,要求学生做到能灵活选择工具表达想法。

XX学院教案

周课次第XX周学时2学时教学地点多媒体教室'机房

教学任务

图标的设计与制作概述：成套图标创作一关于功能与风格

名称

知识目标：1、图标的绘制技法：绘制步骤、绘制要求、文件格式；

教学目标2、图标风格处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前三节课学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点写实图标风格处理：媒介规范、绘制效果总结

教学难点写实图标风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入

3、教学内容讲解

180

图标设计概述

图标的背板.

图标的分类

图标的规格

图标的统一性

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：

教学后记

XX学院教案

周课次第XX周学时2学时教学地点多媒体教室'机房

教学任务

图标的设计与制作概述：成套图标创作一关于色彩与质感

名称

知识目标：1、成套图标的绘制技法：绘制步骤、绘制要求、文件格式；

教学目标2、成套图标风格处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前三节课学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点成套图标风格处理：媒介规范、绘制效果总结

教学难点成套图标风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评180

2、新课的导入

3、教学内容讲解及示范

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：成套图标的绘制

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

图标设计：线性图标成套图标创作

名称

知识目标：1、成套图标的绘制技法：绘制步骤、绘制要求、文件格式；

教学目标2、成套图标风格处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前三节课学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点成套图标风格处理：媒介规范、绘制效果总结

教学难点成套图标风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评180

2、新课的导入

3、教学内容讲解及示范：利用Hlustrator打造线性图标；多种线性图标变体设计

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：成套线性图标的绘制（30-40个）

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

图标设计：面性图标、2.5D图标、MBE图标

名称

知识目标：1、成套图标的绘制技法：绘制步骤、绘制要求、文件格式；

教学目标2、成套图标风格处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行多风格处理

技能、素养2、利用前三节课学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点成套图标风格转换处理

教学难点MBE图标

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

180

2、新课的导入

3、教学内容讲解及示范：利用线性图标快速转换为面性；多种面性图标变体设计、2.5D

图标、MBE图标

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：利用前期线性图标做多风格图标的转换

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

第7章手机主题界面设计:手机主题主流风格设计

名称

知识目标：1、手机主题主流风格设计：绘制步骤、绘制要求、文件格式；

教学目标2、手机主题主流风格设计处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前期课程学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点手机主题主流风格设计处理：媒介规范、绘制效果总结

教学难点手机主题主流风格设计风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一文字操作与位图处理

3、教学内容讲解及示范180

任务一、手机主题主流风格设计的方法：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、手机主题主流风格设计风格处理：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：写实图标的绘制

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

第7章手机主题界面设计:成套手机主题设计

名称

知识目标：1、手机主题主流风格设计：绘制步骤、绘制要求、文件格式；

教学目标2、手机主题主流风格设计处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前期课程学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点手机主题主流风格设计处理：媒介规范、绘制效果总结

教学难点手机主题主流风格设计风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一IOS平台APP设计规范与技巧

3、教学内容讲解及示范180

任务一、IOS平台APP设计规范：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、IOS平台APP设计技巧：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：IOS平台APP设计规范与技巧

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务第8章App界面设计:APP闪屏、注册和登录页面的设计方法及思考，APP主题主

名称流风格设计、交互知识与原型图设计

知识目标：

1、APP闪屏、注册和登录页面的绘制技法：绘制步骤、绘制要求、文件

格式；

教学目标2、APP闪屏、注册和登录页面风格处理：媒介规范、绘制效果总结

【含知识、3、APP主题主流风格设计：绘制步骤、绘制要求、文件格式；

技能、素养4、APP主题主流风格设计风格处理：媒介规范、绘制效果总结

目标】技能目标：1、熟练掌握所使用软件进行写实风格处理

2、利用前期课程学习的知识进行项目设计

素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点APP闪屏、注册和登录页面风格处理：媒介规范、绘制效果总结

教学难点APP闪屏、注册和登录页面风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节一：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一

3、教学内容讲解及示范

任务一、APP闪屏、注册和登录页面的绘制技法：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、APP闪屏、注册和登录页面风格处理：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

180

教学环节二：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一

3、教学内容讲解及示范

任务一、APP主题主流风格设计的绘制技法：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、APP主题主流风格设计风格处理：

学生巩固练习一一媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：APP闪屏、注册和登录页面的绘制

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室'机房

教学任务

第8章App界面设计:APP交互知识与典型版式

名称

知识目标：1、APP交互知识与原型图设计的绘制技法：绘制步骤、绘制要求、文件

格式；

教学目标

2、APP交互知识与原型图设计风格处理：媒介规范、绘制效果总结

【含知识、

技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养

2、利用前期课程学习的知识进行项目设计

目标】

素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点APP交互知识与原型图设计处理：媒介规范、绘制效果总结

教学难点APP交互知识与原型图设计处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一

3、教学内容讲解及示范

任务一、APP交互知识与原型图设计的绘制技法：

学生巩固练习一一绘制步骤、绘制要求、文件格式

任务二、APP交互知识与原型图设计风格处理：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

*机动补充

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一watch设计规范与技巧

3、教学内容讲解及示范

任务一、watch设计规范：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、watch设计技巧：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：APP交互流程设计与绘制

教学后记

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室、机房

教学任务

第8章App界面设计：移动UI项目实践，iOS平台APP设计规范与技巧

名称

知识目标：1、手机主题主流风格设计：绘制步骤、绘制要求、文件格式；

教学目标2、手机主题主流风格设计处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前期课程学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点手机主题主流风格设计处理：媒介规范、绘制效果总结

教学难点手机主题主流风格设计风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一

3、教学内容讲解及示范-操作型App一计算器界面设计；水平仪App界面设计180

任务一、IOS平台APP设计规范：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、IOS平台APP设计技巧：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：IOS平台APP设计规范与技巧

教学后记

规范习惯较难。

XX学院教案

周课次第XX周学时4学时教学地点多媒体教室、机房

教学任务

第8章App界面设计:移动UI项目实践，Android平台APP设计规范与技巧

名称

知识目标：1、手机主题主流风格设计：绘制步骤、绘制要求、文件格式；

教学目标2、手机主题主流风格设计处理：媒介规范、绘制效果总结

【含知识、技能目标：1、熟练掌握所使用软件进行写实风格处理

技能、素养2、利用前期课程学习的知识进行项目设计

目标】素质目标：1、学习分析问题，主动思考并实践解决的综合素质要求。

2、具有拓展创新设计意识，良好的口头表达和沟通交流能力。

教学条件多媒体机房

教学重点手机主题主流风格设计处理：媒介规范、绘制效果总结

教学难点手机主题主流风格设计风格处理：媒介规范、绘制效果总结

时间

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

（分）

教学环节：理论教学与上机实践结合

教学方法：启发法、演示法、实例法、赏析法

内容设计：

1、知识内容回顾，课后作业检查、点评

2、新课的导入一Android平台APP设计规范与技巧

3、教学内容讲解及示范-拼拼乐App界面设计180

任务一、Android平台APP设计规范：

学生巩固练习——绘制步骤、绘制要求、文件格式

任务二、Android平台APP设计技巧：

学生巩固练习——媒介规范、绘制效果总结

4、教学总结、课后练习要求

教学小结：四节课学习的知识融合并应用。

作业布置：Android平台APP设计规范与技巧

教学后记

周课次学时2学时0理论□实验

教学章节

/任务/模第9章网页界面设计1.WEB端界面概述（特点、规范、常见类

块型等）

名称

知识目标：了解网站界面设计的基本思想和原则；

教学目标能力目标：掌握网站图形界面设计的工具和技术；

素养目标：具备网页界面规划、制作能力。

教学条教学做一体化教室、宽带网络、超星学习通、华信资源网、QQ学习群、

件、环境微信群、良好学风、优秀传统文化传播氛围等。

网站界面设计的规范

教学重点

教学难点网站界面设计的特点、WEB端界面设计规范

互动讲授法、案例演示法

教学方法

教学内容与教学设计

一、教学内容：第9章网页界面设计-1.WEB端界面概述（特点、

规范、常见类型等）

二、教学过程流程设计：

1、教学思路：（1）通过对课堂实训案例的讲解掌握制作电商网站首页、制作

网站产品列表页和制作电商网站产品详情页的方法；（2）再通过软件相关

功能的解析掌握网页设计的基础知识、网页设计的规范和常用界面类型；

（3）最后通过课堂练习和课后习题消化所学知识。

2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课

堂练习和课后习题提高学生的实际应用能力。

教学资料及要求：在网上找一些简单的网页界面进行临摹制作，来加深学员

对知识点的理解和提高实际应用能力。

3、教学内容

讨论问题：1、网页设计中常用的相关单位有哪些？

2、网页设计的界面结构有哪几部分？

内容大纲：具体可结合PPT课件进行配合讲解。

4.1网页设计基础知识

4.1.1网页设计的概念

4.1.2网页设计的流程

4.1.3网页设计的原则

4.2网页设计的规范

4.2.1网页设计尺寸及单位

4.2.2网页设计的界面结构

4.2.3网页设计的布局

4.2.4网页设计的文字

4.2.5网页设计的图标

4.3网页常用界面类型

4.4课堂案例——制作蝴蝶网站首页界面

4.5课后习题——制作自选选题网站界面

三、教学重难点的讲解：

1.教学重点

借助媒体展示讲解、借助直观媒体等方法等突出重点一一网站

界面设计的规范。

2.教学难点分析

网站界”面设计的特点、WEB端界面设计规范是本次课的难

点。首次web界面课主要通过直观教学，联系实际经典案例效

果展示，师生共同分析等角度进行达成。

教学内容与教学设计

教学反思、后记

1、了解网页设计基础知识（概念、流程和原则）。

2、掌握网页设计的规范（网页设计尺寸及单位、界面结构、布局、文字和图标）。

网页常用界面类型（首页、列表页、详情页、专题页、控制台页和表单页）。

周课次第8次课学时2学时0理论口实验

教学章节

/任务/模

块第9章网页界面设计2.WEB端典型界面设计与制作

名称

知识目标：了解网站界面设计的基本思想和原则；

教学目标能力目标：掌握网站图形界面设计的工具和技术；

素养目标：具备网页界面规划、制作能力。

教学条教学做一体化教室、宽带网络、超星学习通、华信资源网、QQ学习群、

件、环境微信群、良好学风、优秀传统文化传播氛围等。

网站界面设计的规范

教学重点

教学难点网站界面设计的特点、WEB端界面设计规范

互动讲授法、案例演示法

教学方法

教学内容与教学设计

一、教学内容：第9章网页界面设计-2.WEB端典型界面设计与

制作

二、教学过程流程设计：

二、教学过程流程设计：主要采用逻辑归纳型教学过程流程设计，

便于课程整体特征的显示、便于学生建立对界面设计课程的整体学

习概念。

•IXg1-

目;

教学内容与教学设计

教学内容与教学设计

1.开始上课

利用学习通平台现场签到考勤

2.导引

分类网页界面展示，引出本课。

3.教师应用教育技术媒体手段进行教学内容讲解展示

(1)互联网网站类型详解

(2)网页界面制作流程

4.简单归纳

课程学习方法引导。

5.类似事实

教师讲解典型web界面设计任务实施

学生应用教育技术媒体手段收集分析素材

6.分析应用

学生完成典型web界面设计与制作

7.归纳

教师归纳，进一步激励和完成教学；课程小结。

三、教学重难点的讲解：

1.教学重点

借助媒体展示讲解、借助直观媒体、通过图表、表格对比分

析课程性质、考核方式、学习方法等突出重点一一课程介绍。

2.教学难点分析

web界面课主要通过直观教学，联系实际经典案例效果展

示从价值观、情感打动等角度进行达成。

教学内容与教学设计

教学反思、后记

周课次第9次课学时2学时0理论口实验

教学章节

/任务/模

块第9章网页界面设计一一导航区

名称

知识目标：了解网站界面设计的基本思想和原则；

教学目标能力目标：掌握网站图形界面设计的工具和技术；

素养目标：具备网页界面规划、制作能力。

教学条教学做一体化教室、宽带网络、超星学习通、华信资源网、QQ学习群、

件、环境微信群、良好学风、优秀传统文化传播氛围等。

网站界面中导航区的设计与制作

教学重点

教学难点导航区的功能与交互考虑

互动讲授法、案例演示法

教学方法

教学内容与教学设计

一、教学内容：第9章网页界面设计-导航区

二、教学过程流程设计：主要采用逻辑归纳型教学过程流程设计，

便于课程整体特征的显示、便于学生建立对界面设计课程的整体学

习概念。

教学内容与教学设计

1.开始上课

利用学习通平台现场签到考勤

2.导引

分类网页界面展示，引出本课。

3.教师应用教育技术媒体手段进行教学内容讲解展示

(1)互联网网站常见导航类型

(2)导航的设计与制作

4.简单归纳

课程学习方法引导。

5.类似事实

教师讲解典型常见导航设计任务实施

学生应用教育技术媒体手段收集分析素材

6.分析应用

学生完成常见导航的设计与制作

7.归纳

教师归纳，进一步激励和完成教学；课程小结。

三、教学重难点的讲解：

1.教学重点

借助媒体展示讲解、借助直观媒体、通过各类型对比分析突出

重点网站界面中导航区的设计与制作。

2.教学难点分析

教学城混在于导航区的功能与交互考虑，综合利用网络新

媒体专业策划所长攻克难点。

教学反思、后记

教学内容与教学设计

周课次第10次课学时2学时0理论口实验

教学童节

/任务/模

块任务：第9章网页界面设计一一Banner区

名称

知识目标：了解网站界面设计的基本思想和原则；

教学目标能力目标：掌握网站图形界面设计的工具和技术；

素养目标：具备网页界面规划、制作能力。

教学条教学做一体化教室、宽带网络、超星学习通、华信资源网、QQ学习群、

件、环境微信群、良好学风、优秀传统文化传播氛围等。

网站界面中Banner区的设计与制作

教学重点

教学难点Banner区的功能与交互考虑

互动讲授法、案例演示法

教学方法

教学内容与教学设计

一、教学内容：第9章网页界面设计-Banner区

二、教学过程流程设计：主要采用逻辑归纳型教学过程流程设计，

便于课程整体特征的显示、便于学生建立对界面设计课程的整体学

习概念。

1.开始上课

利用学习通平台现场签到考勤

2.导引

分类网页界面展示，引出本课。

3.教师应用教育技术媒体手段进行教学内容讲解展示

(1)互联网网站常见Banner区类型

(2)Banner区的设计与制作

4简.单归纳

课程学习方法引导。

5.类似事实

教师讲解典型常见Banner设计任务实施