交互界面设计课程标准
【课程名称】
交互界面设计。
【适用专业】
中等职业学校美术设计与制作专业。
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
