交互界面设计课程标准
【课程名称】
交互界面设计。
【适用专业】
中等职业学校美术设计与制作专业。
1. 前言
1.1 课程性质
本课程是中等职业学校美术设计与制作专业多媒体设计与制作方向的一门专业技能课程。其功能是使学生了解交互界面设计与制作的基本理念，掌握交互界面设计与制作所需要的基础知识和方法，具备交互界面设计的基本技能。本课程是计算机辅助设计、UI界面设计等课程的后续课程，也是学生学习其他后续课程的基础。
1.2 设计思路
本课程的总体设计思路是遵循任务引领、做学一体的原则，参照教育部1+X WEB前端开发证书（初级）职业标准的相关内容，根据美术设计与制作专业工作任务与职业能力分析，以交互界面设计与制作的相关工作任务要求为依据设置。
课程内容的选取围绕交互界面设计与制作应具备的职业能力要求，同时充分考虑本专业中职学生对本课程相关理论知识的需要，并融入教育部1+X WEB前端开发证书（初级）职业标准的相关考核内容与要求。
课程内容的组织以交互界面设计的步骤流程和方法为主线，包括响应式交互网站制作、CSS动效制作、JS动效制作等3个学习任务。以任务为引领，通过任务整合相关知识、技能与态度。
本课程建议教学课时数为144学时。
2. 课程目标
通过本课程的学习，学生能具备交互界面设计与制作的基础知识，掌握交互界面设计与制作的基本方法和技能，达到教育部1+X WEB前端开发证书（初级）职业标准的相关要求，具体达成以下职业素养和职业能力目标。
职业素养目标：
逐渐养成认真负责、严谨细致、静心专注、精益求精的职业态度；树立科学健康的审美观，积极向上的审美情趣，在学习和实践中不断加强艺术修养和信息化素养；养成良好的团队合作意识，积极参与团队学习与实践，主动协助同伴完成任务，提高人际沟通能力；在进行交互界面设计的过程中，严格遵守各个实训室的使用规定和计算机的操作规范，养成良好的职业习惯和科学的工作态度。
职业能力目标：
⚫能利用互联网资源、搜索完成交互设计需求分析报告
⚫能依据需求分析报告要求，正确使用响应式页面制作工具
⚫能通过CSS盒模型技术完成页面元素的布局控制
⚫能依据交互设计的要求完成CSS交互动画效果创建
⚫能根据交互设计的要求运用前端框架jQuery技术完成交互设计
⚫能根据交互设计的要求制作有交互特征的HTML5网页
⚫能根据交互设计的要求科学有序地完成设计流程和各个制作步骤
⚫能结合设计稿，流畅清晰地陈述设计理念
⚫能根据自主学习和研究性学习需要，运用信息化手段收集和处理信息
3. 课程内容和要求
学习任务技能与学习要求知识与学习要求参考学时
1.响应式交互网站制作1.交互界面制作需
求分析
⚫能针对交互作品
使用场景调研分
析其交互界面设
计特征
⚫能通过优秀交互
界面案例调研，
归纳分析不同终
端交互界面设计
的特征
1.交互界面设计的定义和要素
⚫简述交互界面设计的定义
⚫简述交互界面设计发展过程中各阶段的
呈现样式
⚫记住交互界面设计的要素
⚫简述交互界面设计的种类
2.交互界面设计的方法
⚫简述交互界面设计与产品形象的关系
⚫列举交互呈现的方式
⚫列举不同终端交互设计的特征
6
2.盒模型布局设计
与制作
⚫能熟练根据盒模
型原理对网站的
页头、页脚、导
航菜单、banner
进行制作
⚫能熟练根据盒模
型原理制作卡片
式布局
⚫能熟练根据盒模
型原理制作TAB
布局
3.盒模型的原理与组成
⚫了解盒模型的概念
⚫简述盒模型边框、内边距、外边距、背景、
宽与高的含义
4.盒模型属性的设置方法
⚫了解多元素运用盒模型时外间距的相互
关系
⚫了解内间距在控制内联元素布局时的作
用
⚫了解盒模型长、宽尺寸在包含边框、内、
外边距后的计算方法
5.盒模型制作卡片式布局的方法
⚫记住盒模型绝对定位、相对定位的设置方
法
⚫简述盒模型设置绝对定位、相对定位对文
档流的影响
⚫记住盒模型定位的设置方法
6.盒模型制作TAB切换式布局的方法
⚫了解锚点的含义
10
⚫简述盒模型溢出隐藏的作用
⚫记住盒模型显示与隐藏的设置方法
3.移动端响应式布局设计与制作
⚫能熟练运用响应式布局知识进行
移动端自适应网
页的制作
⚫能熟练运用浏览器开发者工具对
制作的网页进行
查看与调试7. 移动端响应式布局的基本要求与方法
⚫记住移动端、平板、PC端网站的边界尺寸
⚫记住设置@media实现屏幕范围辨识的方
法
⚫记住设置Meta标签实现移动设备辨识的
方法
⚫了解子元素设置百分比的参照关系
⚫记住元素设置百分比的方法
8. 浏览器开发者工具使用的基本要求与方法
⚫了解浏览器开发者工具查看元素的方法
⚫了解浏览器开发者工具修改元素代码与
属性的方法
⚫记住浏览器开发者工具网页视图
（WebView）切换的方法
4
4. FLEX弹性布局设计与使用
⚫能熟练根据FLEX弹性布局
原理对移动端网
站的页脚进行制
作
⚫能熟练根据FLEX弹性布局
原理对移动端网
站的导航菜单进
行制作
⚫能熟练根据FLEX弹性布局
原理对移动端网
站的卡片式布局
进行制作9. FLEX容器的概念与属性
⚫了解flex容器的概念
⚫说出容器的主轴与交叉轴的区别
⚫了解容器的起点位置与结束位置
10. FLEX容器项目元素的设置方法
⚫简述子元素缩放的设置方法
⚫简述项目排列顺序的含义前端响应式布局
⚫简述FLEX容器的水平、垂直布局的设置
方法
⚫简述容器内项目元素的对齐属性、分布属
性的设置方法
11. FLEX弹性布局移动端网站页脚的制作方法
⚫简述移动端网站页脚的特点
⚫说出移动端和PC端页脚设计与制作的差
异
⚫了解元素的self属性设置实现单独改变
特定元素的方法
12. FLEX弹性布局移动端导航菜单的制作方法
⚫简述移动端网站导航菜单的特点
⚫识别移动端和PC端导航菜单设计与制作
的差异
16
⚫了解改变元素横、竖排列方向实现导航菜单切换的方法
13. FLEX弹性布局移动端卡片式布局的制作方法
⚫简述移动端网站卡片式布局的特点
⚫说出移动端和PC端卡片式布局设计与制作的差异
⚫了解改变元素排列顺序对卡片版面重布置的方法
⚫了解改变元素缩放设置对卡片版面重布置的方法
5. Bootstrap前端框架应用
⚫能熟练运用
Bootstrap 网格
系统制作响应式
模块
⚫能熟练运用
Bootstrap 制作
响应式导航栏⚫能熟练运用
Bootstrap 制作
卡片式布局
⚫能熟练运用
Bootstrap 制作
banner 14. bootstrap前端框架的基本概念
⚫简述Bootstrap的获取与配置的方法
⚫了解Bootstrap CSS的排版定义规则
15. Bootstrap 网格系统制作响应式模块的方
法
⚫了解Bootstrap 网格系统的概念
⚫了解Bootstrap 网格系统的工作原理
⚫了解网格选项的设置方法
⚫记住基本网格的结构
⚫记住响应式列重置的方法
⚫记住偏移列的设置方法
⚫记住列排序的设置方法
16. Bootstrap 制作响应式导航栏的方法
⚫记住默认导航栏的设置方法
⚫记住响应式导航栏的设置方法
⚫记住导航栏中表单、按钮、文本、链接的
设置方法
⚫记住组件对齐方式、固定到顶部、固定到
底部、静态、反的设置方法
17. Bootstrap制作卡片式布局的方法
⚫了解Bootstrap 缩略图式卡片的制作方
法
⚫了解Bootstrap 多媒体对象卡片的制作
方法
18. Bootstrap 制作banner的方法
⚫了解轮播（Carousel）插件的导入方法
20
⚫了解轮播（Carousel）插件的使用方法⚫了解轮播（Carousel）插件选项与属性的设置方法
⚫了解轮播（Carousel）插件的事件动作设置方法
2.CSS动效制作1.鼠标交互动效制
作
⚫能熟练运用CSS
技术制作鼠标交
互效果
⚫能熟练设置
transition属
性制作过渡动画
1. 鼠标交互动效的基本概念
⚫了解CSS简单动画的实现原理
⚫记住transition属性的设置方法
⚫记住hover 选择器的使用方法
⚫说出鼠标的滑入、滑出、悬停、点击、释
放、双击等动作的含义
⚫识别元素的初始状态、激活状态、过程状
态、结束状态、失效状态的含义
2. 鼠标交互动效的制作方法
⚫记住CSS基本选择器的使用方法
⚫了解CSS高级选择器的使用方法
⚫记住CSS 临近、后代选择器的使用方法
⚫了解触发元素中包含a标签的处理方法
8
2.CSS3 animation
动画制作
⚫熟练运用
animation属性
制作单属性变化
动画
⚫熟练运用
animation属性
制作多属性变化
动画
3. CSS3 animation帧动画的基本概念
⚫简述帧动画的概念
⚫了解帧动画时间轴的概念
⚫简述动画起始状态、结束状态设置的必要
性
4. CSS3 animation帧动画的制作方法
⚫记住animation动画的设置步骤
⚫记住@keyframe的定义方法
⚫记住animation的时间、次数、速度曲线、
延迟、播放时间、结束状态、播放状态等
属性的设置方法
16
动画制作
⚫熟练运用
transform属性
制作2D形变动
画
⚫熟练运用
transform属性
5. transform 2D动画的制作方法
⚫记住transform的平移设置方法
⚫记住transform的缩放设置方法
⚫记住transform的旋转设置方法
⚫记住transform的倾斜设置方法
6. transform 3D动画的制作方法
⚫简述X、Y、Z轴的定义
⚫记住X、Y、Z轴的旋转效果
16