交互界面设计课程标准-美术设计与制作专业

1、交互界面设计课程标准【课程名称】交互界面设计。【适用专业】中等职业学校美术设计与制作专业。1. 前言1.1课程性质本课程是中等职业学校美术设计与制作专业多媒体设计与制作方向的一门专业技能课程。其功能是使学生了解交互界面设计与制作的基本理念，掌握交互界面设计与制作所需要的基础知识和方法，具备交互界面设计的基本技能。本课程是计算机辅助设计、UI 界面设计等课程的后续课程，也是学生学习其他后续课程的基础。1.2设计思路本课程的总体设计思路是遵循任务引领、做学一体的原则，参照教育部1+X WEB前端开发证书（初级）职业标准的相关内容，根据美术设计与制作专业工作任务与职业能力分析，以交互界面设计与制作的

2、相关工作任务要求为依据设置。课程内容的选取围绕交互界面设计与制作应具备的职业能力要求，同时充分考虑本专业中职学生对本课程相关理论知识的需要，并融入教育部1+X WEB前端开发证书（初级）职业标准的相关考核内容与要求。课程内容的组织以交互界面设计的步骤流程和方法为主线，包括响应式交互网站制作、CSS动效制作、 JS 动效制作等3 个学习任务。以任务为引领，通过任务整合相关知识、技能与态度。本课程建议教学课时数为144 学时。2. 课程目标通过本课程的学习，学生能具备交互界面设计与制作的基础知识，掌握交互界面设计与制作的基本方法和技能，达到教育部1+X WEB前端开发证书（初级）职业标准的相关要求

3、，具体达成以下职业素养和职业能力目标。职业素养目标：逐渐养成认真负责、严谨细致、静心专注、精益求精的职业态度；树立科学健康的审美观，积极向上的审美情趣，在学习和实践中不断加强艺术修养和信息化素养；养成良好的团队合作意识，积极参与团队学习与实践，主动协助同伴完成任务，提高人际沟通能力；在进行交互界面设计的过程中，严格遵守各个实训室的使用规定和计算机的操作规范，养成良好的职业习惯和科学的工作态度。职业能力目标：? 能利用互联网资源、搜索完成交互设计需求分析报告? 能依据需求分析报告要求，正确使用响应式页面制作工具? 能通过 CSS盒模型技术完成页面元素的布局控制? 能依据交互设计的要求完成CSS交

4、互动画效果创建117?能根据交互设计的要求运用前端框架jQuery 技术完成交互设计?能根据交互设计的要求制作有交互特征的HTML5网页? 能根据交互设计的要求科学有序地完成设计流程和各个制作步骤? 能结合设计稿，流畅清晰地陈述设计理念? 能根据自主学习和研究性学习需要，运用信息化手段收集和处理信息3. 课程内容和要求学习任务技能与学习要求知识与学习要求1. 交互界面制作需1. 交互界面设计的定义和要素求分析? 简述交互界面设计的定义? 能针对交互作品? 简述交互界面设计发展过程中各阶段的使用场景调研分呈现样式析其交互界面设?记住交互界面设计的要素计特征? 简述交互界面设计的种类? 能通过优秀

5、交互2. 交互界面设计的方法界面案例调研，?简述交互界面设计与产品形象的关系归纳分析不同终?列举交互呈现的方式端交互界面设计?列举不同终端交互设计的特征的特征3. 盒模型的原理与组成? 了解盒模型的概念? 简述盒模型边框、 内边距、外边距、 背景、1. 响应式2.盒模型布局设计宽与高的含义交互网站4.与制作盒模型属性的设置方法制作?能熟练根据盒模?了解多元素运用盒模型时外间距的相互型原理对网站的关系页头、页脚、导?了解内间距在控制内联元素布局时的作航菜单、 banner用进行制作?了解盒模型长、宽尺寸在包含边框、内、?能熟练根据盒模外边距后的计算方法型原理制作卡片5.盒模型制作卡片式布局的方法

6、式布局?记住盒模型绝对定位、相对定位的设置方?能熟练根据盒模法型原理制作 TAB?简述盒模型设置绝对定位、相对定位对文布局档流的影响?记住盒模型定位的设置方法6. 盒模型制作 TAB切换式布局的方法?了解锚点的含义参考学时6101183. 移动端响应式布局设计与制作? 能熟练运用响应式布局知识进行移动端自适应网页的制作? 能熟练运用浏览器开发者工具对制作的网页进行查看与调试4. FLEX 弹性布局设计与使用? 能熟练根据FLEX 弹性布局原理对移动端网站的页脚进行制作? 能熟练根据FLEX 弹性布局原理对移动端网站的导航菜单进行制作? 能熟练根据FLEX 弹性布局原理对移动端网站的卡片式布局进

7、行制作? 简述盒模型溢出隐藏的作用? 记住盒模型显示与隐藏的设置方法7. 移动端响应式布局的基本要求与方法? 记住移动端、 平板、 PC端网站的边界尺寸? 记住设置 media实现屏幕范围辨识的方法? 记住设置 Meta 标签实现移动设备辨识的方法? 了解子元素设置百分比的参照关系4? 记住元素设置百分比的方法8. 浏览器开发者工具使用的基本要求与方法? 了解浏览器开发者工具查看元素的方法? 了解浏览器开发者工具修改元素代码与属性的方法? 记住浏览器开发者工具网页视图（WebView）切换的方法9. FLEX 容器的概念与属性? 了解 flex 容器的概念? 说出容器的主轴与交叉轴的区别? 了

8、解容器的起点位置与结束位置10. FLEX 容器项目元素的设置方法? 简述子元素缩放的设置方法? 简述项目排列顺序的含义? 简述 FLEX 容器的水平、垂直布局的设置方法? 简述容器内项目元素的对齐属性、分布属性的设置方法1611. FLEX弹性布局移动端网站页脚的制作方法? 简述移动端网站页脚的特点? 说出移动端和 PC 端页脚设计与制作的差异? 了解元素的 self 属性设置实现单独改变特定元素的方法12. FLEX弹性布局移动端导航菜单的制作方法? 简述移动端网站导航菜单的特点? 识别移动端和 PC 端导航菜单设计与制作的差异119? 了解改变元素横、竖排列方向实现导航菜单切换的方法13

9、. FLEX弹性布局移动端卡片式布局的制作方法? 简述移动端网站卡片式布局的特点? 说出移动端和 PC 端卡片式布局设计与制作的差异? 了解改变元素排列顺序对卡片版面重布置的方法? 了解改变元素缩放设置对卡片版面重布置的方法14. bootstrap前端框架的基本概念? 简述 Bootstrap 的获取与配置的方法? 了解 Bootstrap CSS 的排版定义规则15. Bootstrap网格系统制作响应式模块的方法?了解 Bootstrap网格系统的概念5. Bootstrap前端框? 了解 Bootstrap 网格系统的工作原理架应用? 了解网格选项的设置方法? 能熟练运用? 记住基本网

10、格的结构Bootstrap网格? 记住响应式列重置的方法系统制作响应式? 记住偏移列的设置方法模块? 记住列排序的设置方法? 能熟练运用16. Bootstrap制作响应式导航栏的方法Bootstrap制作20?记住默认导航栏的设置方法响应式导航栏? 记住响应式导航栏的设置方法? 能熟练运用? 记住导航栏中表单、按钮、文本、链接的Bootstrap制作设置方法卡片式布局? 记住组件对齐方式、固定到顶部、固定到? 能熟练运用底部、静态、反色的设置方法Bootstrap制作17. Bootstrap制作卡片式布局的方法banner? 了解 Bootstrap 缩略图式卡片的制作方法? 了解 Boo

11、tstrap 多媒体对象卡片的制作方法18. Bootstrap制作 banner 的方法? 了解轮播（ Carousel ）插件的导入方法1201. 鼠标交互动效制作? 能熟练运用 CSS 技术制作鼠标交互效果? 能熟练设置 transition 属性制作过渡动画2.CSS3animation动画制作2.CSS 动? 熟练运用效制作animation属性制作单属性变化动画? 熟练运用 animation 属性制作多属性变化动画3.transform变 形动画制作? 熟练运用 transform 属性制作 2D形变动画? 熟练运用 transform 属性? 了解轮播（ Carousel ）插

12、件的使用方法? 了解轮播（ Carousel ）插件选项与属性的设置方法? 了解轮播（ Carousel ）插件的事件动作设置方法1. 鼠标交互动效的基本概念? 了解 CSS简单动画的实现原理?记住 transition属性的设置方法? 记住 hover 选择器的使用方法? 说出鼠标的滑入、滑出、悬停、点击、释放、双击等动作的含义?识别元素的初始状态、激活状态、过程状8态、结束状态、失效状态的含义2.鼠标交互动效的制作方法? 记住 CSS基本选择器的使用方法? 了解 CSS高级选择器的使用方法? 记住 CSS 临近、后代选择器的使用方法? 了解触发元素中包含 a 标签的处理方法3. CSS3

13、animation帧动画的基本概念? 简述帧动画的概念? 了解帧动画时间轴的概念? 简述动画起始状态、结束状态设置的必要性4. CSS3 animation 帧动画的制作方法16? 记住 animation 动画的设置步骤? 记住 keyframe 的定义方法? 记住 animation 的时间、次数、速度曲线、延迟、播放时间、结束状态、播放状态等属性的设置方法5. transform 2D动画的制作方法? 记住 transform 的平移设置方法? 记住 transform 的缩放设置方法? 记住 transform 的旋转设置方法16? 记住 transform 的倾斜设置方法6. tra

14、nsform 3D动画的制作方法? 简述 X、 Y、Z 轴的定义? 记住 X、 Y、Z 轴的旋转效果121制作 3D旋转木?归纳说出 transform的 3D 平移设置方法马特效?归纳说出 transform的 3D 缩放设置方法? 熟练运用?归纳说出 transform的 3D 旋转设置方法transform 属性?归纳说出 transform的 3D 倾斜设置方法制作 3D旋转魔?归纳说出 transform的 3D 透视视图设置方特效方法?举例说明 transform 3D 视距的含义7. 3D 旋转木马特效的制作方法? 说出旋转木马顶视图的含义? 了解半径和图片宽度之间的角度关系?

15、了解每旋转一张图与角度变化的关系8. 3D 旋转魔方特效的制作方法?了解六个平面组成的六面体与ZYX旋转角度的关系? 了解 translate Z 设置对平面之间距离变化的影响? 了解让魔方旋转的 transform 设置方法1. banner 动效制作的基础知识?了解 banner 滚屏动效的用途1. banner动效制作?说出典型banner 动效案例?熟练运用jQuery?简述典型 banner 动效实现的原理制作24banner2. banner 动效的制作方法轮 播 特banner 动效效果图制作效?利用 HTML5以及 jQuery实现 banner 动效3.JS 动效案例制作制作

16、3.购物车动效制作的基本知识? 了解购物车在电子商务网站中的用途2. 购物车动效制作?说出典型的购物车交互案例?能 运 用jQuery?简述典型的购物车交互逻辑流程元素操作技术制244.购物车动效的制作方法作购物车的动效?购物车效果图制作?利用 HTML5以及 jQuery实现购物车动效案例制作总课时1444.教学活动设计参考教学活动名称教学活动设计1221. 教师布置任务： 自选一上海知名产品， 对其同类产品进行调研分析，完成交互设计需求分析报告。（ 1）了解调研产品的风格特征、用户画像。（ 2）调研同类产品交互场景中的品牌特征。教学活动一：（ 3）交互设计合理，并针对不同终端进行交互设计分

17、析。上海 Style 2.教师举例分析：产品介绍包含的要素有标题、种类、图片、文产品介绍交互字介绍、价格、用户体验、购买、收藏等。需求分析3.学生通过网络、书籍参查等方法，完成作业。4. 学生调研成果汇报：学生介绍自己的分析报告。学生将自己的分析成果，以恰当的形式口述汇报。5. 教师总结评价：教师依据资料的完整程度、分析的逻辑性、个人见解的呈现、排版的合理性和表述的效果进行打分1. 教师布置任务： 教师以天猫为例， 介绍我国电子商务发展历史，以及全球领先的情况，布置“为上海优品设计购物车”的任务。2. 教师示范讲解：教师示范讲解标志设计的要领，强调重点和难点。教学活动二：3.教师组织同学们讨论

18、总结出购物车设计的推进流程，引导学习上海优品 购购物车交互设计分析方法和思考方法。物车设计4.学生分组尝试：学生以4 5 人为小组进行讨论，选定产品，利用课后进行查证调研后，每人绘制 1 个购物车页面的设计草图，并最终选出一个，以规范HTML5的形式表现。5. 作品上传平台，教师组织评价：学生互评，社团师生参与评价，教师综合点评设计成果、设计过程合理性及团队合作5. 实施建议5.1教材编写建议（ 1）以本课程标准为依据编写教材。（ 2）教材应该充分体现以岗位为目标，以任务为引领的课程设计思路。（ 3）教材编写应打破传统的学科界线和教学方法，把基础学科的训练项目分解到具体的工作任务中去， 真正体现“在做中学， 在做中会”的理念， 使学习目标明确， 更具实用性。（ 4）教材编写应注意到本学科的快速发展和变化，在教学内容和教学手段上都注意到前瞻性。争取将本学科的新知识、新技术、新材料、新发展融入教材中。（ 5）教材应力求文字简练，指令明确。要充分考虑美术设计作为视觉艺术的特点，配备适量的直观图片和代码资料或者提供相应的网络链接。（ 4）各学校可依据具体的