交互界面设计课程标准-美术设计与制作专业
《移动界面交互设计》课程标准
《移动界面交互设计》课程标准移动界面交互设计课程标准1. 课程目标本课程旨在培养学生在移动设备上设计和开发交互界面的能力。
通过研究本课程，学生将掌握以下技能：- 理解移动界面交互设计的基本原理和概念- 掌握移动界面设计工具的使用方法- 研究用户研究和用户体验设计的方法- 设计和开发具有良好用户体验的移动应用界面2. 课程内容2.1 基础知识- 移动应用界面设计概述- 移动设备特性与限制- 移动交互设计原则2.2 工具使用- 移动界面设计工具介绍与使用方法- 响应式设计技术及适配2.3 用户研究与用户体验设计- 用户研究方法和技巧- 用户需求分析与用户故事编写- 信息架构设计与用户流程设计- 用户界面原型设计与评估2.4 移动应用界面设计与开发- 移动应用界面设计规范- 图标和视觉元素设计- 动效设计与交互效果实现- 界面开发与调试技巧3. 评估与考核本课程的评估方式包括但不限于以下几种：- 课堂作业：完成各类设计和开发任务- 个人项目：设计和开发一个移动应用界面原型并展示演示- 学术论文：撰写一篇关于移动界面交互设计的研究论文学生将根据作业、项目和论文的成绩综合评定课程成绩。
4. 参考资料- Norman, D. A. (2013). The design of everyday things. Basic books.- Cooper, A., Reimann, R., & Cronin, D. (2014). About face: The essentials of interaction design. John Wiley & Sons.- Tidwell, J. (2011). Designing interfaces: Patterns for effective interaction design. "O'Reilly Media, Inc.".以上为《移动界面交互设计》课程的基本标准和内容安排。
《界面设计》课程标准
界面设计课程标准1. 课程简介界面设计是一门旨在教授学生创建用户友好和吸引人的数字界面的课程。
本课程旨在培养学生的视觉设计能力以及在用户体验和用户界面设计方面的技能和知识。
该课程将涵盖用户界面设计的基本原则、设计工具的使用、人机交互的最佳实践以及最新的界面设计趋势等。
学生将通过讲座、案例研究、实践项目和小组讨论等学习方式来掌握这些知识和技能。
2. 课程目标本课程的主要目标是：•培养学生的视觉设计能力，使他们能够创建具有吸引力和良好用户体验的界面。
•教授学生界面设计的基本原则和最佳实践，包括布局、色彩、字体、图标等方面的设计。
•培养学生在用户体验设计方面的技能，包括用户研究、用户测试和用户反馈等。
•了解最新的界面设计趋势和工具，以保持与行业的发展保持同步。
•提供实践项目，让学生能够将所学知识应用到实际设计中，并提供反馈和指导以提高他们的设计能力。
3. 课程大纲3.1 界面设计基础•介绍界面设计的基本概念和原则•研究用户体验的重要性•学习人机交互的基本原则和最佳实践•探讨常见的界面设计错误和如何避免它们3.2 设计工具和资源•介绍各种常用的界面设计工具，如Adobe XD，Sketch，Figma等•学习如何使用这些工具进行界面设计•提供设计资源和模板，帮助学生快速开始他们的设计项目3.3 色彩和排版•探讨色彩在界面设计中的重要性•学习如何选择适合的配色方案•研究字体的选择和排版原则，以确保良好的可读性和美观性3.4 图标和图形•学习如何设计和使用图标和图形来增强用户界面的可视化效果•探索各种图标和图形库，以及其在界面设计中的应用3.5 用户研究和测试•介绍用户研究的基本方法和技巧•学习如何进行用户测试和分析测试结果•强调用户反馈的重要性，并提供如何获取和利用用户反馈的指导3.6 响应式设计和移动界面•探讨响应式设计的原理和最佳实践•研究移动界面设计的特点和挑战•学习如何设计适应不同终端和屏幕尺寸的界面3.7 最新的界面设计趋势•了解最新的界面设计趋势和创新•学习如何跟随行业的发展并应用到自己的设计项目中4. 评估和考核方式本课程的评估和考核方式将包括以下几个方面：•日常作业和练习：包括设计项目和小组讨论•设计作品展示和评估：学生将展示自己的设计作品，并接受同学和教师的评估和反馈•期末考试：考查学生对界面设计基础知识和原则的理解5. 参考资料•Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design.O’Reilly Media.•Shneiderman, B., & Plaisant, C. (2010). Designing the user interface: Strategies for effective human-computerinteraction. Addison-Wesley Professional.•Preece, J., Sharp, H., & Rogers, Y. (2019). Interaction design: Beyond human-computer interaction. Wiley.•Brown, D., Macanufo, J., & Nickisch, C. (2009).Gamestorming: A playbook for innovators, rulebreakers, and changemakers.O’Reilly Media.以上是《界面设计》课程的标准。
1.(游戏界面(UI)设计)课程标准
1.(游戏界面(UI)设计)课程标准D重庆工程学院《游戏界面与UI设计》课程标准课程代码： 2014030032适用专业：数字媒体艺术课程学时： 32学时课程学分： 2分编制人：审核人：审批人：日期：教授创作，训练学生的相互配合能力，培养学生的职业道德、团队协作意识以及良好的审美意识，使学生在艺术学习和实践中陶冶情操，并培养学生具备积极思考问题、主动学习、良好的团队合作精神、获取知识能力、设计创意思维能力、结构分析、感悟能力和欣赏能力等素质，达到职业游戏动漫美工初级设计水平。
4.具体目标：知识目标：了解游戏行业美术设计师岗位要求并掌握卡通游戏界面的设计制作规范。
能力目标：能熟练掌握游戏界面制作流程和方法技巧，以及游戏界面的设计制作能力达到行业岗位的基本要求。
素质目标：（1）具有热爱所学专业、爱岗敬业的精神和强烈的法律意识；（2）具有胜任设计工作的良好的业务素质和身心素质；（3）具有运用所学知识分析和解决问题的能力；（4）具有自学能力、获取信息的能力，以及一定的组织、管理能力。
（5）培养学生的团结合作能力；运用所学知识分析和解决问题的能力，创新设计思维，美术欣赏造型审美的能力。
三、课程设计思路1.课程设置依据本专业基于知识、能力、素质要求与行业、企业专家共同研讨紧紧围绕游戏行业发展和艺术职业岗位需要高素质、高技能的游戏策划设计人才的要求设计了本门课程并对课程体系结构进行合理安排。
本课程不单单采用一门教材进行教学，而是结合当代市场对游戏策划的要求，把每一个教学环节作为一项真实的项目来进行安排，结合我院学生的具体情况和高职教学要求对教材内容进行合理的整合删减，切实的做到“任务驱动，项目主体，教、学、做”一体化的课程设计理念。
为了更好的达到和实现我们的课程目标，经过分析和整合，在对教学内容的选取上我们根据游戏行业中各企业岗位的任职要求，游戏策划师职业资格标准和学生实际水平结合职业性，实践性，开放性。
教学内容的合理选择和结合，更好的适应我院学生的发展和对职业岗位的需求。
《交互设计基础》课程标准
《交互设计基础》课程标准课程代码：建议课时数：256 学分：16适用专业：影视动画专业先修课程：数字媒体软件基础后续课程：数字影像设计一、前言（一）课程的性质《交互设计基础》课程是数字媒体艺术方向的主干课程，是一门综合性较强的课程，知识点多，具有学科与技术的统一性，发展前景好，渗透性强，应用范围广等特点，也是核心课程。
课程任务是使学生了解人机交互的概念、不同时期的用户界面特点、理解用户界面设计的基本原则和方法；根据软件技术发展的趋势，以基于Photoshop的软件应用系统为例，结合当前主流界面实现技术，让学生熟练掌握软件进行界面设计的主要过程和可用性评价方法，并在参与实际项目开发制作实训过程中加强实践能力，达到学生毕业就能够顶岗工作的目的。
本课程应该在数字媒体软件基础之后，数字影像创作之前开设。
（二）设计思路注重实际设计的应用，改革强化实训教学。
本课程以社会对于互动媒体设计人才网页手机等用户界面设计能力的实际需求为课程开设依据。
课程内容选择以“新”为标准，紧扣网站，手机，游戏界面设计等最新的发展状况，以实际案例的形式贯穿整个教学，并结合高职类院校学生的学习规律，由浅入深。
本课程首先从理论基础入手，通过对具体设计实例的解析，完成最后的项目任务。
具体操作流程是首先在课堂上精讲课程的基本概念、操作方法，然后通过大量的上机练习来锻炼学生的操作能力，这样，在老师精心为教学设计的任务的驱动下，学生通过任务驱动方式下的自主学习与协作学习、讨论学习、探究学习等方式来完成任务，在探求解决问题的途径中，学生既学到了知识，又培养了动手实践能力和与人合作能力，更重要的是提高了学生的探索创新精神，使学生学会学习。
在完成任务的过程中，学生始终处于主动的主体地位，教师是学生学习的组织者、服务者和导航者。
在学生掌握基础知识的前提下，教师鼓励创新创造创意，为学生创意提供平台，在班级相互交流，提高学生人文内涵，从而创造出优秀的作品。
1.(游戏界面(UI)设计)课程标准
游戏界面与UI设计课在整个教学的过程中，运用启发、引导和实践的方式，通过进行游戏造型设计基础知识点的逐步讲解并实例绘制教授创作，训练学生的相互配合能力，培养学生的职业道德、团队协作意识以及良好的审美意识，使学生在艺术学习和实践中冶情操，并培养学生具备积极思考问题、主动学习、良好的团队合作精神、获取知识能力、设计创意思维能力、结构分析、感悟能力和欣赏能力等素质，达到职业游戏动漫美工初级设计水平。
2.知识目标：
游戏界面与UI设计基础概念讲解、基础造型平面构成点线面的形式美原理、二维空间、三维空间、多维空间的造型表现、色彩构成基础知识与色环、色彩的表示、对比、彩度对比、明度对比、色彩调和、填色与色彩构成、色彩构成的综合应用等等知识。
3.能力目标：
让学生逐步地具有一定的游戏策划审美的能力，可以独立完成游戏策划的设计与制作，对各种游戏策划的要求都能处理。
（2）师资条件
①应具备研究生和讲师以上学历，能综合运用各种教法设
计课程，掌握新技术，具有较强的专业能力新知识，
②有丰富的行业经验，具有相关职业书和教师书，
有一定的企业一线工作经验。
2、实施建议
（1）教材选用或编写建议
目前游戏界面UI与设计的优秀教材并不多，建议选用教材容上理论与案例实践操作结合，书籍和光盘素材资源配套教材资料。在教案编写上结合教师教学实践和学生认知水平设计，体现“学生为主体”，围绕学生知识的学习以及职业能力培养组织教学。
（3）具有运用所学知识分析和解决问题的能力；
（4）具有自学能力、获取信息的能力，以及一定的组织、管理能力。
（5）培养学生的团结合作能力；运用所学知识分析和解决问题的能力，创新设计思维，美术欣赏造型审美的能力。
三、课程设计思路
交互界面设计课程标准-美术设计与制作专业
交互界面设计课程标准【课程名称】交互界面设计。
【适用专业】中等职业学校美术设计与制作专业。
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.交互界面设计的方法⚫简述交互界面设计与产品形象的关系⚫列举交互呈现的方式⚫列举不同终端交互设计的特征62.盒模型布局设计与制作⚫能熟练根据盒模型原理对网站的页头、页脚、导航菜单、banner进行制作⚫能熟练根据盒模型原理制作卡片式布局⚫能熟练根据盒模型原理制作TAB布局3.盒模型的原理与组成⚫了解盒模型的概念⚫简述盒模型边框、内边距、外边距、背景、宽与高的含义4.盒模型属性的设置方法⚫了解多元素运用盒模型时外间距的相互关系⚫了解内间距在控制内联元素布局时的作用⚫了解盒模型长、宽尺寸在包含边框、内、外边距后的计算方法5.盒模型制作卡片式布局的方法⚫记住盒模型绝对定位、相对定位的设置方法⚫简述盒模型设置绝对定位、相对定位对文档流的影响⚫记住盒模型定位的设置方法6.盒模型制作TAB切换式布局的方法⚫了解锚点的含义10⚫简述盒模型溢出隐藏的作用⚫记住盒模型显示与隐藏的设置方法3.移动端响应式布局设计与制作⚫能熟练运用响应式布局知识进行移动端自适应网页的制作⚫能熟练运用浏览器开发者工具对制作的网页进行查看与调试7. 移动端响应式布局的基本要求与方法⚫记住移动端、平板、PC端网站的边界尺寸⚫记住设置@media实现屏幕范围辨识的方法⚫记住设置Meta标签实现移动设备辨识的方法⚫了解子元素设置百分比的参照关系⚫记住元素设置百分比的方法8. 浏览器开发者工具使用的基本要求与方法⚫了解浏览器开发者工具查看元素的方法⚫了解浏览器开发者工具修改元素代码与属性的方法⚫记住浏览器开发者工具网页视图（WebView）切换的方法44. 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标签的处理方法82.CSS3 animation动画制作⚫熟练运用animation属性制作单属性变化动画⚫熟练运用animation属性制作多属性变化动画3. CSS3 animation帧动画的基本概念⚫简述帧动画的概念⚫了解帧动画时间轴的概念⚫简述动画起始状态、结束状态设置的必要性4. CSS3 animation帧动画的制作方法⚫记住animation动画的设置步骤⚫记住@keyframe的定义方法⚫记住animation的时间、次数、速度曲线、延迟、播放时间、结束状态、播放状态等属性的设置方法163.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动效案例制作242. 购物车动效制作⚫能运用jQuery元素操作技术制作购物车的动效3. 购物车动效制作的基本知识⚫了解购物车在电子商务网站中的用途⚫说出典型的购物车交互案例⚫简述典型的购物车交互逻辑流程4. 购物车动效的制作方法⚫购物车效果图制作⚫利用HTML5以及jQuery实现购物车动效案例制作24总课时1444. 教学活动设计参考教学活动名称教学活动设计教学活动一：《上海Style》产品介绍交互需求分析1. 教师布置任务：自选一上海知名产品，对其同类产品进行调研分析，完成交互设计需求分析报告。
UI设计课程标准
《UI设计》课程标准一、课程概况二、专业对课程要求《UI设计》是数字媒体应用技术专业的专业课程, UI即是User Interface的简称, 泛指用户的操作界面, 包含移动APP, 网页, 智能穿戴设备等。
UI设计主要指界面的样式, 美观程度。
UI主题界面设计是一门在电子设备, 新兴媒体上运用平面设计的综合性学科, 以往平面设计多数是印刷品, 今天移动设备的兴起, 应用如: 手机上的企业APP主题宣传品, 企业电子杂志APP版, 企业门户网站手机版, 企业微信宣传品设计, 精细的ICON图标表现, 和一些特色风格的主题APP界面设计等, 都是企业形象宣传的一部分, 是属于APP或手机网页方面, 视觉界面部分的设计, 为大多数互联网类公司培养研发部门和市场部门的视觉设计师。
三、课程培养目标随着计算机硬件的飞速发展, 过去的软件程序已经不能适应用户的要求。
软件产品在激烈的市场竞争中, 仅仅有强大的功能是远远不够的, 不足以战胜强劲的对手。
随着技术领域的逐步拓展, 产品生产的人性化意识日趋增强, 越来越多的企业开始注重交互设计、用户测试方面的投入, UI设计领域“三足鼎立”的局面将越来越成为大势所趋。
这也就意味着兼具美术设计、程序编码、市场调查、心理学分析等诸多方面综合能力的UI设计师将拥有更为广阔的发展前景。
“UI”热是近几年来兴起的潮流, 近几年国内很多从事手机, 软件, 网站, 增值服务等企业和公司都设立了这个部门。
还有很多专门从事UI设计的公司也应运而生。
正是鉴于目前UI行业的发展状况, 本专业第一次开设《UI设计》课程。
1.总体目标《UI设计》是数字媒体专业平面设计岗位方向课, 该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识, 还重在给学生开拓新的专业知识面, 认知一个新的设计领域, 从而拓展职业能力和就业选择面。
此课程的目的与任务是要求学生对UI设计意义、功能有初步的了解, 掌握UI设计的基本形式, 来龙去脉, 市面上的一些案例, 训练学生在设计主题UI方面注重画面的形式美感和使用舒适度方面的设计, 使学生具备主要常用的一些APP主题界面的设计能力和精细ICON图标的表现能力。
产品界面设计课程标准
《产品界面设计》课程标准1.课程性质与设计思路1.1课程的性质《产品界面设计》课程是产品造型设计专业的专业核心课程之一。
通过对产品交互界面设计的训练，掌握产品界面的设计流程与方法，培养学生的对于产品界面的造型、色彩、标识、排列等的合理设计能力，提高设计软件表现力。
先修课程为设计素描、设计色彩等。
后续课程为产品改良设计、产品开发与设计等。
1.2设计思路该课程以社会对于产品造型设计人才的产品界面设计能力的实际需求为课程开设依据。
以总体规划、视觉要素设计、立体造型设计的工作流程为课程内容的选择标准。
以实际产品界面设计案例的制作与表现任务为载体，并结合高职类院校学生的学习规律，由浅入深编排课程内容。
建议课程在第二学年第一学期开设。
学时数为48学时,3学分。
2.课程目标通过本课程学习，学生能够具备产品界面的设计与制作的技能，培养人性化设计意识，并掌握相关的设计软件的操作，独立完成产品用户界面的设计和表现工作，以适应社会对本职业能力的要求。
2.1职业能力培养目标I能按照产品界面开发的设计流程来进行设计工作l能够使用相关设计软件进行设计开发2.2知识目标l掌握产品界面设计的基础知识；l掌握产品界面设计中色彩的运用；l掌握产品界面设计中图形图像的运用I掌握产品界面设计中的建模与渲染方法l熟悉完整的产品界面设计流程。
2.3素质目标l培养学生实践动手操作能力；l树立科学的设计创新意识；l形成以人为本”的设计观念。
3.课程内容和要求学习内容教学要求序号模块教学单元/项目能力要求知识要求课时1基础模块产品界面设计基础l 了解产品界面设计的基本相关概念I界面设计的发展l界面构成要素I界面设计原则I常用工具软件介绍8产品界面设计中的造型语义I能够把握产品界面设计与产品整体风格统一I产品整体风格I产品界面设计与产品整体风格统一的案例解读产品界面设计中的色彩I能够按照基本配色原理进行产品界面的配色I色彩的作用、基本原理I优秀界面配色案例解读产品界面设计中的图形图像I能够按照图形图像的处理技巧与创意设计方法进行产品界面设计I图形图像的作用、分类I图形图像的处理技巧与创意设计I图形图像在界面设计中运用案例解读产品界面设计中的材质l能够根据界面操作的人性化需要进行产品界面的材质设计选择l材质的分类、特性及适用环境l不同材质在界面设计中的案例解读2创意设计模块产品界面设计中的排列l能够进行复杂界面的编排设计l产品界面中的多按键的排列设计l界面排列设计案例203实践模块完整设计案例演绎I能够按照设计的流程方法对不同类型产品界面进行设计I数码产品界面设计实践案例I软件产品界面设计实践案例164•实施建议4.1教材及参考资料选用4.1.1教材选用及编写建议选用教育部高等学校高职高专产品造型设计专业教学指导委员会十五”规划教材,同时也可以由一线教师与行业专家依据本课程标准编写教材基本要求为：1、教材依据本课程内容标准编写教材，将知识学习与能力培养紧密结合。
《UI界面设计》课程标准
《UI界面设计》课程标准一、课程名称UI界面设计二、适用专业计算机平面设计双精准建设专业三、课程性质与任务本课程是计算机平面设计双精准建设专业的一门专业技能课程和专业核心课程。
本课程是依据计算机平面设计双精准建设专业人才培养目标和相关职业岗位（群）的能力要求而设置的，对本专业所面向的UI设计师所需要的知识、技能、和素质目标的达成起支撑作用。
其功能是使学生了解UI界面设计的基本概念，掌握UI界面设计所需的基本知识和方法，具备UI界面设计的基本技能。
本课程是平面设计工程、图形图像处理等课程的后续课程，为学生学习其他后续课程奠定扎实基础。
四、课程设计（一）设计思路本课程的设计遵循任务引领，做学一体的原则，并参照“界面设计初级职业技能等级标准”考证标准的相关内容进行打造。
与此同时，也会根据计算机平面设计双精准建设专业的工作任务和职业能力分析，融入“界面设计初级职业技能等级标准”证书的相关考核内容。
1.紧扣课程特点UI界面设计是指对PC端和移动端网页界面的人机交互、操作逻辑、界面美观的整体设计。
UI界面设计重要的特点是注重测试客户体验过程，不能凭设计师的喜好和审美来评判，要满足广大目标客户的使用便捷性需求。
这就要求UI界面设计这门课程内容需要紧扣时代发展，注重对目标客户的审美把握，以企业项目为导向，贴近市场，满足客户需求。
2.明确导向目标任何行为实践都是以目标为导向的。
宏观角度讲，现代专业教育的核心任务是促进学生全面发展。
受此目标指引，应根据UI界面设计课程特点，进一步细化微观层次的教学目标，如知识传授、技能锻炼、素质提升等，继而有针对性地选取导向企业项目，融入1+X证书课程内容，借此提高教学针对性、实效性。
从根本上讲，UI界面设计课程教学是一个循序渐进的过程，既需要综合考查学生个性差异和既有水平，也要遵循以人为本、因材施教原则，合理设计课程项目。
3.创新教学手段基于企业项目导向的UI界面设计课程设计，本身就是一种创新实践行为。
《交互设计》课程标准
《交互设计》课程标准一、课程概述1.课程性质《交互设计》是数字媒体应用技术专业针对UI设计关键岗位，经过对企业岗位典型工作任务的调研和分析后，选择真实工作项目为教学载体，根据数字媒体公司应用性人才的实际要求，重构课程内容，归纳总结出来的为适应UI设计岗位要求的移动产品交互设计能力而设置的一门专业核心课程。
2.课程任务《交互设计》课程通过对“交互设计入门”、“需求分析”、“信息架构和用户流程”、“低保真APP原型设计制作”、“AxureRP基础交互”、“动态面板高级应用”、“高级交互”、“高保真APP原型设计制作”8个教学项目的学习，在学生具备一定的审美和移动界面设计能力的基础上，主要培养学生移动互联网交互页面设计的专业能力，以及团队协作、综合分析、创新创意等综合素质和能力，为后期课程如《毕业设计与答辩》提供移动产品交互设计的思想与设计方法。
3.课程要求《交互设计》课程主要采用“项目导向，任务驱动，案例教学，理论实践一体化课堂”的教学模式开展教学，课程的理论实践一体化教学全部安排在设施先进的理实一体教室进行，教学中以学生自主学习为主，采用多种学习素材及教学手段，教师全程负责答疑解惑、指导项目制作，充分调动师生双方的积极性，达成教学目标。
二、教学目标1.知识目标（1）了解交互设计的基本概念，交互设计的核心设计思想（2）掌握交互设计流程、需求分析、搭建信息架构与用户流程（3）掌握低保真手绘原型的绘制，（4）掌握AxureRP软件，通过项目学习掌握交互高保真原型制作和原型测试；2.能力目标（1）能进行用户体验研究；（2）能搭建信息架构和用户流程（3）能绘制低保真原型；（4）能运用AxureRP软件设计交互原型图（5）能展示产品交互设计思想（6）能够解决交互设计中的常见问题。
3.素质目标（1）培养较好的自主学习能力；（2）培养按时交付作品的时间观念；（3）培养精益求精的工匠精神；（4）培养较好的审美能力、创新能力和团队协作能力；（5）培养较好的查阅资源能力；（6）培养积极进取和乐观的人生态度；（7）培养沟通表达能力；（8）培养分析问题、解决问题的能力。
《版面设计》课程标准
《版面设计》课程标准一、适用对象全日制中等职业学校艺术设计与制作专业在读生，学制三年二、适用专业全日制中等职业学校艺术设计与制作专业三、课程性质本课程是艺术设计与制作专业的专业基础课课程。
本课程是依据艺术设计与制作专业人才培养目标和相关职业岗位群的能力要求而设置的，对本专业所面向的平面设计师、界面设计师、创意设计等相关岗位群所需要的知识、技能和素质目标的达成起支撑作用。
在课程设置上，前导课程有《海报设计》，后续课程有《VI设计》。
四、课程目标（一）总体目标本课程属于专业基础课,本课程主要介绍、讲解版式设计的基础知识、基本制作方法、适用软件等内容。
其中重点讲解版式的布局、视觉流程、节奏控制等。
通过课程的学习，使学生掌握运用PS、AI、CDR等平面设计软件进行版式设计，能够完成独立完成报纸、杂志、书籍、画册、产品样本、挂历、招贴、唱片封套、企业形象（CI）和网页等版式设计全过程的制作。
（二）知识目标本门课程是让掌握将各种视觉元素进行有机的排列组合，将理性思维个性化地表现出来，它的设计原理和理论贯穿于每一个平面设计的始终。
（三）技能目标能熟练地运用PS、AI等软件对文字图案等元素进行编排设计。
（四）素质养成目标通过分组完成项目任务，培养学生团队协作精神，锻炼学生沟通交流、自我学习的能力（五）证书目标通过对编排基本知识的学习，巩固设计基础能力，对接初级平面设计师证书。
五、参考学时与学分（一）学时本课程的教学内容由基础模块、职业模块和拓展模块三个部分构成。
1.基础模块是由各专业学生必修的基础性内容和应该达到的基本要求，教学时数为20学时。
2.职业模块是适应学生学习相关专业需要的限定选修内容，各学校根据实际情况进行选择和安排教学，教学时数为16学时。
3.拓展模块是满足学生个性发展和继续学习需要的任意选修内容，教学时数不作统一规定。
（二）学分每学时1学分六、设计思路理实一体化教学是适应中职学生的一种有效教学模式，这种模式不是将理论和实践简单地累加，更不是知识点的机械编排。
ui设计专业课程内容
ui设计专业课程内容
UI设计专业课程内容包括：
1. 基础课程：包括素描、色彩、平面构成、立体构成、手绘POP、Photoshop基础等。
2. 字体设计：学习不同风格的字体，了解字体的应用场景，掌握字体的设计技巧。
3. 图形设计：学习图形的分类、图形的创意、图形的应用等，掌握图形在UI设计中的应用技巧。
4. 图标设计：学习图标的分类、图标的风格、图标的设计技巧等，掌握不同风格的图标设计方法。
5. 界面设计：学习界面设计的原则、界面设计的流程、界面设计的规范等，掌握界面设计的方法和技巧。
6. 网页设计：学习网页设计的原则、网页设计的流程、网页设计的规范等，掌握网页设计的方法和技巧。
7. 移动界面设计：学习移动界面设计的原则、移动界面设计的流程、移动界面设计的规范等，掌握移动界面设计的方法和技巧。
8. 用户体验研究：学习用户体验研究的原则、用户体验研究的方法等，掌握用户体验研究的方法和技巧。
9. 设计心理学：学习设计心理学的原则、设计心理学的应用等，掌握设计心理学的方法和技巧。
10. 商业案例实战：通过实际项目案例，将所学知识应用于实践中，提升学生的实际操作能力。
以上是UI设计专业课程的主要内容，通过系统地学习这些课程，学生可以掌握UI设计的基本技能和知识，为未来的职业发展打下坚实的基础。
《数字媒体交互设计》课程标准
《数字媒体交互设计》课程标准一、课程描述本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作交互产品原型的能力。
课程布置方式以行业需求为出发点，抛出问题，分析问题，解决问题。
教学中模拟岗位工作情境，以案例任务驱动教学进程，围绕企业中UI设计师、Unity开发工程师的岗位能力进行针对性培养教学，做到与企业管理理念无缝对接。
课程所涉及教学案例，均取自市场一线工作任务，是本门课程做为校企合作的执行抓手。
课程从交互设计本身特点出发，有机融入相关思政建设内容，从实际应用角度设置线上思政互动教学，移动端思政应用方法实践等切实的思政教学内容，做到以思政带课堂，以知识促思政的教学思政闭环。
综上所述，本课程内容的总原则是立足市场，使教、学、用形成统一的整体，课程拥有自主的市场生命力，增强数字媒体应用技术专业学生未来的市场竞争力。
二、课程目标本课程以培养“UI设计师”、“Unity开发工程师”为目标，最大化完善学生对交互产品周边知识的学习理解，使学生未来可以有效的融入企业制作团队之中，与其他行业技术人员、市场人员做到高效能的沟通。
通过本课程的学习，在掌握交互设计师必备的理论基础和工作实践技能基础上，培养出自身的“知识自更新能力”，在课后继续保持对相关交互产品的“行业探索能力”。
课程以行业中的实际案例为教学导向，以交互式教学来反映交互设计本身的概念，使学生在学习过程中有强烈的知识沉浸感，并达到深刻理解“交互设计课程的精神与方法”的目的。
1 素质目标（1）坚定拥护中国共产党领导和我国社会主义制度，具有深厚的爱国情感和中华民族自豪感。
《用户交互界面设计》教学教案
《用户交互界面设计》教学教案一、课程概述本课程旨在教授学生用户交互界面设计的基本原理和技巧。
通过本课程的研究，学生将掌握用户交互界面设计的流程和方法，并能够运用所学知识设计出符合用户需求的优秀交互界面。
二、教学目标1. 了解用户交互界面设计的基本概念和原则；2. 掌握用户交互界面设计的流程和方法；3. 学会运用合适的工具和技术进行用户交互界面设计；4. 能够通过用户研究和测试，改进和优化交互界面设计；5. 培养学生的团队协作和问题解决能力。
三、教学内容1. 用户交互界面设计的概述和基本原则；2. 用户研究和需求分析；3. 信息架构和界面布局设计；4. 交互设计和可用性评估；5. 接口设计和视觉设计；6. 用户测试和反馈收集；7. 界面优化和改进。
四、教学方法1. 前导讲解：通过讲解理论知识和案例分析，介绍用户交互界面设计的基本概念和原则；2. 实践操作：引导学生使用相关工具和技术进行用户交互界面设计的实际操作，如界面绘制和模型构建；3. 小组讨论：组织学生进行小组讨论，分享设计思路和经验，并互相评价和改进设计方案；4. 项目实践：学生分为小组进行项目实践，在实际场景中应用所学知识进行交互界面设计；5. 阶段测试：进行中期和期末测试，评估学生对课程内容的掌握程度。
五、教学评价1. 平时表现：考察学生在课堂讨论、实践操作和小组合作中的参与度和表现；2. 项目报告：要求学生书写项目实践报告，包括需求分析、设计思路、界面展示和反馈收集等内容；3. 测试成绩：通过中期和期末测试评估学生对课程知识的掌握程度；4. 课堂作业：布置课堂作业以检验学生对理论知识的理解和掌握情况。
六、参考教材1. 《用户界面设计之美》- 刘伟2. 《交互设计之路》- 马云鹏3. 《用户中心设计》- 李虎以上是《用户交互界面设计》教学教案的概要内容，具体教学进度和细节会根据实际情况进行调整和完善。
相信通过本课程的学习，学生们将在用户交互界面设计领域有所突破和进步。
《版式设计》课程标准
《版式设计》课程标准课程名称：版式设计课程类别：专业必修课适用专业：美术设计与制作专业授课单位：适用对象：美术设计与制作专业学生学分：8学时：64一、课程性质本课程是美术设计与制作专业的专业核心课课程。
本课程是依据美术设计与制作专业人才培养目标和相关职业岗位群的能力要求而设置的，对本专业所面向的平面设计师、界面设计师、创意设计等相关岗位群所需要的知识、技能和素质目标的达成起支撑作用。
在课程设置上，前导课程有《字体创意设计》《图形创意及PS应用》《构成基础及CDR应用》《图案设计及Al应用》，后续课程有《包装设计》《VI设计》。
二、课程目标2.1总体目标通过学习该课程，使学生认识海报在现代视觉传达设计中的重要意义及地位，理解和掌握海报的基本概念、主要理论、设计程序和表现方法；要求学生掌握海报设计基础知识，重点掌握海报的审美、创意的视觉化表现和制作。
通过本课程的学习，使学生能达到基本的海报构思创意和设计制作初、中级水平。
2.2知识、技能、素质、证书目标2.2.1知识目标加强学生对海报的视觉心理、欣赏习惯及传播媒体的了解和认知，领悟海报的思想精髓，掌握海报的审美、创意。
2.2.2技能目标能熟练地运用PS、ΛI.C4D等软件把海报的构思创意进行设计与制作，并达到初、中级水平。
2.2.3素质养成目标通过分组完成项目任务，培养学生团队协作精神，锻炼学生沟通交流、自我学习的能力。
2.2.4证书目标中级平面设计师证书、1+X文创产品数字化设计证书。
三、参考学时与学分（一）学时：总学时108,计划18周，（二）学分：8学分四、设计思路4.1基于职业分析构建能力本位课程体系从行业分析入手，以对应岗位群工作任务和工作过程为逻辑起点和主线、融入职业资格、岗位能力，配套技能证书为内涵的教学内容改革和工作过程系统化知识的构建，对工作进行整体化分析，并以校企联合方式开发出工学结合、能力本位的课程体系。
4.2是以项目为载体创设学习情境根据典型工作任务涵盖的工作能力域，对典型工作任务进行“教学化”处理。
《UI界面设计》课程标准
《UI界面设计》课程标准一、课程简介UI界面设计是计算机相关专业的重要课程，旨在培养学生掌握UI界面设计的基本理论、方法和技能，使学生能够独立完成UI界面设计任务。
本课程涵盖了UI界面的基本概念、设计原则、色彩搭配、图标设计、布局规划、交互设计等多个方面，旨在帮助学生建立完整的UI界面设计知识体系。
二、课程目标1. 掌握UI界面设计的基本理论、方法和技能，能够独立完成UI界面设计任务；2. 了解UI界面的发展趋势和前沿技术，能够适应行业发展的需求；3. 培养学生的创新能力和团队合作精神，提高学生的综合素质。
三、教学内容与要求1. UI界面基本概念：介绍UI界面的基本概念、分类、作用和特点，让学生了解UI界面设计的背景和意义；2. 设计原则：介绍UI界面设计的基本原则，包括易用性、人性化、美观性、一致性等，让学生掌握设计的基本理念；3. 色彩搭配：讲解色彩在UI界面设计中的作用和运用技巧，让学生掌握色彩搭配的方法和技巧；4. 图标设计：介绍图标在UI界面设计中的作用和种类，让学生掌握图标设计的基本方法和技巧；5. 布局规划：讲解UI界面布局规划的基本方法和技巧，包括常见的布局类型、适用场景和优缺点等；6. 交互设计：介绍交互设计的基本概念和方法，包括用户需求分析、流程设计、信息架构设计等，让学生掌握交互设计的要点和技巧；7. 案例分析：通过案例分析，让学生了解实际UI界面设计的流程和方法，培养学生的实际操作能力；8. 实践操作：要求学生独立完成UI界面设计任务，培养学生的实践操作能力和创新能力。
四、教学方法与手段1. 理论讲授：通过课堂讲授，让学生了解UI界面设计的基本理论、方法和技能；2. 案例分析：通过案例分析，让学生了解实际UI界面设计的流程和方法，培养学生的实际操作能力；3. 实践操作：组织学生进行实践操作，培养学生的实践操作能力和创新能力；4. 互动讨论：鼓励学生进行互动讨论，激发学生的学习兴趣和积极性；5. 课外学习：鼓励学生利用课外时间进行自主学习和拓展学习，提高学生的学习效果。
《界面设计》课程标准
《界面设计》课程标准视觉传达艺术设计系多媒体设计与制作专业方向课程编号D030218学时80开课学期二年级第一学期课程性质必修课程名称界面设计考核方式考查，成绩构成：实训：70%，平时30%一、课程设计思路本课程以社会对于多媒体设计人才界面设计能力的实际需求为课程开设依据。
课程内容选择以“新”为标准，紧扣手机界面和网站界面设计最新的发展状况，以实际案例的形式贯穿整个教学，并结合高职类院校学生的学习规律，由浅入深。
本课程首先从理论基础入手，介绍手机界面和网页界面设计相关知识，再通过对具体设计实例的解析，介绍了界面设计各个要素设计的方法，阐明界面设计的常识、规范、流程与方法。
本课程在第三学开设。
总学时数为96 课时。
二、课程目标通过本课程学习，学生能认识到界面设计作为现代传媒的重要途径，其合理性与美观性直接影响用户的评价，从而促使学生提高界面的设计技能，通过人性化设计的方法来进行手机、网站用户界面设计，并掌握相关的设计软件的操作，独立完成图标、手机、网页等界面的设计和表现工作，以适应社会对本职业能力的要求。
1. 知识目标:①了解界面设计的含义、特性；②理解界面设计的出发点。
它包括：视觉、信息传达的基本原则和基本元素；③理解感知与情趣，感情与文化，传统与现代，世界性与民族性在界面设计中的作用；④深入理解平面构成要素和基本的构成原则；⑤理解色彩的构成原理和基本构成原则；⑥深入理解文字的编排与设计在界面设计中的作用；⑦深入理解字体的选择在在界面设计中的作用；⑧深入理解版式设计在界面设计中的重要性；2.能力目标:①掌握平面设计的设计方法和要素，并利用平面设计的原则和基本要素设计界面；②掌握色彩的构成原则，应用色彩的构成原则设计界面；③掌握图标、页面和动画效果的设计方法；④掌握手机界面设计的方法和技巧；⑤熟练掌握网页界面文字编排的设计方法和技巧；⑥掌握版式设计的原则和构成手法，进行版式设计和优化；⑦能按照网页开发的设计流程来进行网页界面设计工作；3.素质目标:①培养学生实践动手操作能力；②树立科学的设计创新意识；③形成“以人为本”的设计观念；④锻炼设计表达与语言表达能力。
- 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.交互界面设计的方法⚫简述交互界面设计与产品形象的关系⚫列举交互呈现的方式⚫列举不同终端交互设计的特征62.盒模型布局设计与制作⚫能熟练根据盒模型原理对网站的页头、页脚、导航菜单、banner进行制作⚫能熟练根据盒模型原理制作卡片式布局⚫能熟练根据盒模型原理制作TAB布局3.盒模型的原理与组成⚫了解盒模型的概念⚫简述盒模型边框、内边距、外边距、背景、宽与高的含义4.盒模型属性的设置方法⚫了解多元素运用盒模型时外间距的相互关系⚫了解内间距在控制内联元素布局时的作用⚫了解盒模型长、宽尺寸在包含边框、内、外边距后的计算方法5.盒模型制作卡片式布局的方法⚫记住盒模型绝对定位、相对定位的设置方法⚫简述盒模型设置绝对定位、相对定位对文档流的影响⚫记住盒模型定位的设置方法6.盒模型制作TAB切换式布局的方法⚫了解锚点的含义10⚫简述盒模型溢出隐藏的作用⚫记住盒模型显示与隐藏的设置方法3.移动端响应式布局设计与制作⚫能熟练运用响应式布局知识进行移动端自适应网页的制作⚫能熟练运用浏览器开发者工具对制作的网页进行查看与调试7. 移动端响应式布局的基本要求与方法⚫记住移动端、平板、PC端网站的边界尺寸⚫记住设置@media实现屏幕范围辨识的方法⚫记住设置Meta标签实现移动设备辨识的方法⚫了解子元素设置百分比的参照关系⚫记住元素设置百分比的方法8. 浏览器开发者工具使用的基本要求与方法⚫了解浏览器开发者工具查看元素的方法⚫了解浏览器开发者工具修改元素代码与属性的方法⚫记住浏览器开发者工具网页视图（WebView）切换的方法44. 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标签的处理方法82.CSS3 animation动画制作⚫熟练运用animation属性制作单属性变化动画⚫熟练运用animation属性制作多属性变化动画3. CSS3 animation帧动画的基本概念⚫简述帧动画的概念⚫了解帧动画时间轴的概念⚫简述动画起始状态、结束状态设置的必要性4. CSS3 animation帧动画的制作方法⚫记住animation动画的设置步骤⚫记住@keyframe的定义方法⚫记住animation的时间、次数、速度曲线、延迟、播放时间、结束状态、播放状态等属性的设置方法163.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动效案例制作242. 购物车动效制作⚫能运用jQuery元素操作技术制作购物车的动效3. 购物车动效制作的基本知识⚫了解购物车在电子商务网站中的用途⚫说出典型的购物车交互案例⚫简述典型的购物车交互逻辑流程4. 购物车动效的制作方法⚫购物车效果图制作⚫利用HTML5以及jQuery实现购物车动效案例制作24总课时1444. 教学活动设计参考教学活动名称教学活动设计教学活动一：《上海Style》产品介绍交互需求分析1. 教师布置任务：自选一上海知名产品，对其同类产品进行调研分析，完成交互设计需求分析报告。