移动UI交互设计与动效制作 教案全套

《移动UI交互设计与动效制作》配套教学教案常见交互按钮样式与应用如何设计出色的交互按钮实战——设计微渐变按钮UI交互元素——图片UI中常用图片比例UI中常见图片排版方式实战——设计图片展示界面UI交互元素导航底部标签导航舵式导航选项卡式导航侧边式导航实战——设计侧边交互导航界面UI交互元素表单文本输入表单元素搜索表单的常见表现形式搜索表单的不同交互状态实战——设计登录界面

1、理解并掌握UI中文字元素的交互设计

2、理解并掌握UI中图标元素的交互设计

3、理解图标交互的意义

4、理解并掌握UI中按钮元素的交互设计

5、理解并掌握UI中图片元素的交互设计

6、理解并掌握UI中导航元素的交互设计

7、理解并掌握UI中表单元素的交互设计根据本章所学习的UI元素交互设计相关知识，完成一个App的图标和界面的设计具体要求和规范如下内容/题材/形式可以是美食、影视等不同类型的App设计要求在Photoshop中完成该App的启动图标和功能图标设计，并且完成该App中多个界面的设计，需耍包含启动界面、登录界面、首界面、导航菜单等多个界面加载进度交互动效了解加载等待动效常见加载进度动效表现形式实战——制作加载等待动效文字交互动效文字动效的表现优势常见文字动效表现形式实战——制作动感遮罩文字动效图标交互动效常见图标动效表现形式实战——制作相机图标动效实战——制作线框图标动效导航菜单交互动效交互导航菜单的优势交互导航菜单的设计要点.3实战——制作测滑导航菜单交互动效

1、理解交互动效与UI设计

2、掌握使用动效表现UI交互

3、理解并掌握开关按钮交互动效的表现和制作

4、理解并掌握加载进度交互动效的表现和制作

5、理解并掌握文字交互动效的表现和制作

6、理解并掌握图标交互动效的表现和制作

7、理解并掌握导航菜单交互动效的表现和制作根据本章所学习的UI元素交互动效知识，完成一个或多个UI元素交互动效的设计制作，具体要求和规范如下内容/题材/形式按钮、加载进度条、导航菜单等不同的UI元素设计要求根据本章所学习的知识，在AfterEffects中完成一种UI元素交互动效的制作，要求表现效果流畅、自然课时内容移动UI交互设计基础授课时间180分钟课时4教学目标0了解UI设计0了解移动UI交互设计0理解移动UI交互设计的内容和习惯0理解移动UI交互设计的需求分析0理解移动UI交互的操作流程设计0理解移动UI交互的信息架构设计0理解移动UI交互的原型设计教学重点0移动UI交互设计的需求分析0移动UI交互的操作流程设计教学难点理解移动UI交互的信息架构设计教学设计

1、教学思路:通过对UI设计和移动UI设计的介绍，了解两者之间的相同点以及区别，从而引入移动UI交互设计的相关基础知识

2、教学手段通过理论知识讲解与案例分析相结合来讲解移动UI交互设计的基础知识

3、教学资料及要求根据相关的内容整理移动UI图片案例以及交互案例教学内容讨论问题

1、你理解的交互设计是什么？内容大纲具体可结合本项目的PPT课件进行配合讲解了解UI设计什么是UI设计移动UI设计移动UI设计的特点了解移动UI交互设计什么是交互什么是交互设计移动UI交互的特点了解交互设计师移动UI交互设计的内容和习惯需要考虑的内容需要遵循的习惯用户体验与交互设计移动UI交互设计的基本流程需求分析主动需求与被动需求

5、掌握界面交互动效的制作作业根据本章所学习的UI元素交互动效知识完成一个界面转场交互动效的设计制作，具体要求和规范如下内容/题材/形式界面转场交互动效设计要求根据本章所学习的知识，在AfterEffects中完成一个界面转场交互动效的制作，要求表现效果流畅、自然

1.

5.2需求分析的流程操作流程设计操作流程的分类操作流程的设计原则信息架构设计信息架构概述信息架构设计的方法原型设计原型设计概述原型设计的流程小结

1、了解UI设计

2、了解移动UI交互设计

3、理解移动UI交互设计的内容和习惯

4、理解移动UI交互设计的需求分析

5、理解移动UI交互的操作流程设计

6、理解移动UI交互的信息架构设计

7、理解移动UI交互的原型设计作业根据本章所学习的移动UI交互设计基础知识，打开自己手机中的各种App仔细观察在这些App应用中哪些地方使用了交互设计，表现方式是什么样的App中的交互设计列举某款App中哪些功能或界面使用了交互设计表现形式简单描述该App中交互设计的表现形式课时内容UI兀素交互设计授课时间240分钟课时6教学目标0理解并掌握UI中文字元素的交互设计0理解并掌握UI中图标元素的交互设计0理解图标交互的意义0理解并掌握UI中按钮元素的交互设计0理解并掌握UI中图片元素的交互设计0理解并掌握UI中导航元素的交互设计0理解并掌握UI中表单元素的交互设计教学重点0图标元素的交互设计0导航元素的交互设计0表单元素的交互设计教学难点图标元素的交互设计教学设计

1、教学思路

（1）通过案例分析与理论知识讲解相结合；

（2）通过案例的制作练习掌握不同UI元素的设计

2、教学手段

（1）通过知识点讲解使读者理解不同UI元素交互设计的相关知识；

（2）通过课堂案例的制作掌握不同UI元素的设计；

（3）通过课后习题提高学生的实际应用能力

3、教学资料及要求收集不同UI元素的交互动效图片，来加深学员对知识点的理解，拓展实际应用能力教学内容讨论问题

1、UI中哪些元素可以实现交互？

2、移动UI中常见的交互有哪些？内容大纲具体可结合本项目的PPT课件进行配合讲解UI交互元素文字关于文字交互UI中的字体应用控制字体数量体现文字层次感文字排版方式UI交互元素图标图标的作用图标的表现形式及适用场景实战——设计相机应用图标图标交互的意义预见性美观性统一性如何保持图标的统一性实战——设计线框功能图标UI交互元素按钮真实按钮与伪按钮课时内容督设计与用户体授课时间360分钟课时8教学目标0理解UI交互设计与用户体验0理解界面交互设计0理解可用性设计以及可用性的表现0理解什么是沉浸感以及沉浸感设计原则0理解什么是情感化设计以及情感化设计细节0理解优秀的UI界面交互所具有的特点0了解移动UI与网站UI的交互差异教学占

八、、0界面交互设计0可用性设计0情感化设计教学难点优秀的UI界面交互所具有的特点教学设计

1、教学思路

（1）通过案例分析与理论知识讲解相结合；

（2）通过对课堂案例的讲解掌握使用AdobeXD设计影视App界面、美食App界面、音乐App界面、豕具App界面的力法和技巧；

（3）最后通过课后习题消化所学软件知识，提高对移动交互设计的理解

2、教学手段

（1）通过知识点讲解使读者理解不同UI元素交互设计的相关知识；

（2）通过课堂案例的制作掌握使用AdobeXD设计UI界面的方法和技巧；

（3）通过课后习题提高学生的实际应用能力

3、教学资料及要求收集不同UI元素的交互动效图片，来加深学员对知识点的理解，拓展实际应用能力教学内容讨论问题

1、你理解的用户体验是什么？

2、UI交互中的用户体验表现在哪些方面？内容大纲具体可结合本项目的PPT课件进行配合讲解UI交互设计与用户体验用户体验概述基础体验类型交互设计的作用交互设计的5要素界面交互设计交互设计模式合理的交互设计提升转化率独特的UI交互技巧可用性设计什么是可用性可用性的表现实战——使用AdobeXD设计影视App界面沉浸感设计什么是沉浸感沉浸感设计原则

3.

4.3实战——使用AdobeXD设计美食App界面情感化设计什么是情感化设计互联网产品的情感化设计UI情感化设计细节实战——使用AdobeXD设计音乐App界面优秀的UI界面交互具有哪些特点明确系统状态让按钮和操控拥有触感有意义的转场动效帮助用户开始强调界面的变化需要注意的细节移动UI与网站UI的交互差异设备尺寸不同交互方式不同使用环境不同网络环境不同基于位置服务的精细度不同实战——使用AdobeXD设计家具App界面小结

1、理解UI交互设计与用户体验

2、理解界面交互设计

3、理解可用性设计以及可用性的表现

4、理解什么是沉浸感以及沉浸感设计原则

5、理解什么是情感化设计以及情感化设计细节

6、理解优秀的UI界面交互所具有的特点

7、了解移动UI与网站UI的交互差异作业根据本章所学习的交互设计与用户体验知识，完成一个移动App界面的设计，具体要求和规范如下内容/题材/形式可以是美食、影视等不同类型的App设计要求在AdobeXD中完成该App中多个界面的设计和制作，并且在AdobeXD的“原型”模式中制作出该App中多个界面之间的切换交互动效课时内容UI元素交互动效授课时间360分钟课时8教学目标0理解交互动效与UI设计0掌握使用动效表现UI交互0理解并掌握开关按钮交互动效的表现和制作0理解并掌握加载进度交互动效的表现和制作0理解并掌握文字交互动效的表现和制作0理解并掌握图标交互动效的表现和制作0理解并掌握导航菜单交互动效的表现和制作教学重点0开关按钮交互动效0加载进度交互动效0文字交互动效0图标交互动效0导航菜单交互动效教学难点使用动效表现UI交互教学设计

1、教学思路

（1）通过案例分析与理论知识讲解相结合；

（2）通过对课堂案例的讲解掌握使用AfterEffects制作不同UI元素交互动效的方法和技巧；

（3）最后通过课后习题消化所学软件知识，提高对UI兀素交互动效的理解

2、教学手段

（1）通过知识点讲解使读者理解UI元素交互动效的相关知识；

（2）通过课堂案例的制作掌握使用AfterEffects制作UI元素交互动效的方法和技巧；

（3）通过课后习题提高学生的实际应用能力

3、教学资料及要求收集不同UI元素的交互动效图片，来加深学员对知识点的理解，拓展实际应用能力教学内容讨论问题

1、常见的UI元素交互动效有哪些？

2、UI元素交互动效的表现形式？内容大纲具体可结合本项目的PPT课件进行配合讲解交互动效与UI设计UI动效概述优秀的交互动效具有哪些特点交互动效的优势是什么功能型动效与展示型动效使用动效表现UI交互转场过渡层级展示空间扩展关注聚焦内容呈现操作反馈开关按钮交互动效开关按钮的功能与特点实战——制作开关按钮交互动效课时内容界面交互动效授课时间360分钟课时8教学目标0了解如何设计界面交互动效0掌握界面交互动效的表现形式0掌握转场交互动效的形式与设计要求0理解交互动效设计规范0掌握界面交互动效的制作教学重点0界面交互动效表现形式0界面转场交互动效教学难点界面交互动效的制作教学设计

1、教学思路

（1）通过案例分析与理论知识讲解相结合；

（2）通过对课堂案例的讲解掌握使用AfterEffects制作智能家居App界面转场动效、界面功能展开动效、登录转场交互动效和界面图片翻页交互动效的方法和技巧；

（3）最后通过课后习题消化所学软件知识，提高对.界面交互动效的理解

2、教学手段

（1）通过知识点讲解使读者理解界面交互动效的相关知识；

（2）通过课堂案例的制作掌握使用AfterEffects制作界面交互动效的方法和技巧；

（3）通过课后习题提高学生的实际应用能力

3、教学资料及要求收集不同UI元素的交互动效图片，来加深学员对知识点的理解，拓展实际应用能力教学内容讨论问题

1、界面动效的表现形式有哪些？

2、界面转场有哪些形式？内容大纲具体可结合本项目的PPT课件进行配合讲解如何设计界面交互动效首先需要有一个创意想法根据想法进行丰满实现实战——制作智能家居App界面转场动效界面交互动效表现形式常见界面动效表现形式实战——制作界面功能展开动效界面转场交互动效常见的界面转场动效形式界面转场交互动效设计要求实战——制作登录转场交互动效界面交互动效设计规范界面动效设计要点通过交互动效设计提升界面用户体验实战——制作界面图片翻页交互动效小结

1、了解如何设计界面交互动效

2、掌握界面交互动效的表现形式

3、掌握转场交互动效的形式与设计要求

4、理解交互动效设计规范。