交互界面设计课程标准-美术设计与制作专业
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
交互界面设计课程标准
【课程名称】
交互界面设计。
【适用专业】
中等职业学校美术设计与制作专业。
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
3.transform变形
动画制作
⚫熟练运用
transform属性
制作2D形变动
画
⚫熟练运用
transform属性
5. transform 2D动画的制作方法
⚫记住transform的平移设置方法
⚫记住transform的缩放设置方法
⚫记住transform的旋转设置方法
⚫记住transform的倾斜设置方法
6. transform 3D动画的制作方法
⚫简述X、Y、Z轴的定义
⚫记住X、Y、Z轴的旋转效果
16
制作3D旋转木
马特效
⚫熟练运用
transform属性
制作3D旋转魔
方特效⚫归纳说出transform的3D平移设置方法⚫归纳说出transform的3D缩放设置方法⚫归纳说出transform的3D旋转设置方法⚫归纳说出transform的3D倾斜设置方法⚫归纳说出transform的3D透视视图设置方法
⚫举例说明transform 3D视距的含义
7. 3D旋转木马特效的制作方法
⚫说出旋转木马顶视图的含义
⚫了解半径和图片宽度之间的角度关系
⚫了解每旋转一张图与角度变化的关系
8. 3D旋转魔方特效的制作方法
⚫了解六个平面组成的六面体与ZYX旋转角度的关系
⚫了解translate Z设置对平面之间距离变化的影响
⚫了解让魔方旋转的transform设置方法
3.JS动效
制作1. banner动效制作
⚫熟练运用
jQuery制作
banner轮播特
效
1. banner动效制作的基础知识
⚫了解banner滚屏动效的用途
⚫说出典型banner动效案例
⚫简述典型banner动效实现的原理
2. banner动效的制作方法
⚫banner动效效果图制作
⚫利用HTML5以及jQuery实现banner动效
案例制作
24
2. 购物车动效制作
⚫能运用jQuery
元素操作技术制
作购物车的动效
3. 购物车动效制作的基本知识
⚫了解购物车在电子商务网站中的用途
⚫说出典型的购物车交互案例
⚫简述典型的购物车交互逻辑流程
4. 购物车动效的制作方法
⚫购物车效果图制作
⚫利用HTML5以及jQuery实现购物车动效
案例制作
24
总课时144
4. 教学活动设计参考
教学活动名称教学活动设计
教学活动一:《上海Style》产品介绍交互需求分析1. 教师布置任务:自选一上海知名产品,对其同类产品进行调研分析,完成交互设计需求分析报告。
(1)了解调研产品的风格特征、用户画像。
(2)调研同类产品交互场景中的品牌特征。
(3)交互设计合理,并针对不同终端进行交互设计分析。
2. 教师举例分析:产品介绍包含的要素有标题、种类、图片、文字介绍、价格、用户体验、购买、收藏等。
3. 学生通过网络、书籍参查等方法,完成作业。
4. 学生调研成果汇报:学生介绍自己的分析报告。
学生将自己的分析成果,以恰当的形式口述汇报。
5. 教师总结评价:教师依据资料的完整程度、分析的逻辑性、个人见解的呈现、排版的合理性和表述的效果进行打分
教学活动二:《上海优品》购物车设计1. 教师布置任务:教师以天猫为例,介绍我国电子商务发展历史,以及全球领先的情况,布置“为上海优品设计购物车”的任务。
2. 教师示范讲解:教师示范讲解标志设计的要领,强调重点和难点。
3. 教师组织同学们讨论总结出购物车设计的推进流程,引导学习购物车交互设计分析方法和思考方法。
4. 学生分组尝试:学生以4~5人为小组进行讨论,选定产品,利用课后进行查证调研后,每人绘制1个购物车页面的设计草图,并最终选出一个,以规范HTML5的形式表现。
5. 作品上传平台,教师组织评价:学生互评,社团师生参与评价,教师综合点评设计成果、设计过程合理性及团队合作
5. 实施建议
5.1 教材编写建议
(1)以本课程标准为依据编写教材。
(2)教材应该充分体现以岗位为目标,以任务为引领的课程设计思路。
(3)教材编写应打破传统的学科界线和教学方法,把基础学科的训练项目分解到具体的工作任务中去,真正体现“在做中学,在做中会”的理念,使学习目标明确,更具实用性。
(4)教材编写应注意到本学科的快速发展和变化,在教学内容和教学手段上都注意到前瞻性。
争取将本学科的新知识、新技术、新材料、新发展融入教材中。
(5)教材应力求文字简练,指令明确。
要充分考虑美术设计作为视觉艺术的特点,配备适量的直观图片和代码资料或者提供相应的网络链接。
(4)各学校可依据具体的学情,调整教学单元的课时,更希望各学校设计出与本校密切相关的设计任务。
5.3 学习评价建议
(1)教学评价以课程标准为依据,同时适当考虑工作岗位实际要求,针对交互界面设计进行实战,作业以电脑绘制为形式,从中了解学生对交互界面设计知识掌握的程度,考核学习的效果。
(2)学生的考核评价可以通过以下方式实现,如课上提问、参与互动、学习态度占30℅,展览参观小结占10℅,实践作业占60℅为考核成绩,综合以上进行评价,评价时应侧重考核学生综合动手制作能力,运用所学知识解决实际、分析问题的能力。
(3)充分发挥考核评价的功能,既要发挥考核的评价功能,又要发挥考核的激励机制和引导作用,通过考核评价,营造出良好的学习环境,激发学生的学习兴趣,并使学生得到成功的体验,促进学生个性的发展。
5.4 资源利用
(1)充分利用多媒体展示会、国际互联网的资源,使学生在视频作品的拍摄和制作中吸取养料,加深对视频设计与制作课业的理解,以便有效完成课业。
(2)必须充分利用网络平台来进行最新学习资料的收集。
注重充分发挥多媒体的学习互动性优势。
让学生的学习具有主动性、趣味性,又有利于学生的思维与技能拓展。
(3)争取特定企业给予设计项目,使学生在做中学,学能用。
(4)充分利用上海市多媒体开放实训中心等基地的设备与师资,为学生创设多元化的教学空间。
(5)参观各大多媒体创意园区,让学生领略他们未来工作空间的氛围与环境,鼓舞与激励学生的职业理想。