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

《移动UI交互设计与动效制作》

配套教学教案

第1讲

课时内容

移动UI交互设计基础

授课时间

180分钟

课时

4

 了解UI设计



了解移动UI交互设计



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

教学目标



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



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



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

 理解移动UI交互的原型设计

教学重点

 移动UI交互设计的需求分析

 移动UI交互的操作流程设计

教学难点

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

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

教学设计

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

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

教学内容

讨论问题：1、你理解的交互设计是什么？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

1.1

了解UI设计

1.1.1 什么是UI设计

1.1.2 移动UI设计

1.1.3 移动UI设计的特点

1.2

了解移动UI交互设计

1.2.1 什么是交互

1.2.2 什么是交互设计

1.2.3 移动UI交互的特点

1.2.4 了解交互设计师

1.3

移动UI交互设计的内容和习惯

1.3.1 需要考虑的内容

1.3.2 需要遵循的习惯

1.3.3 用户体验与交互设计

1.4

移动UI交互设计的基本流程

1.5

需求分析

1.5.1 主动需求与被动需求

1.5.2 需求分析的流程

1.6

操作流程设计

1.6.1 操作流程的分类

1.6.2 操作流程的设计原则

1.7

信息架构设计

1.7.1 信息架构概述

1.7.2 信息架构设计的方法

1.8

原型设计

1.8.1 原型设计概述

1.8.2 原型设计的流程

1、 了解UI设计

2、 了解移动UI交互设计

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

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

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

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

7、 理解移动UI交互的原型设计

根据本章所学习的移动UI交互设计基础知识，打开自己手机中的各种App，仔细观察在这些App应用中哪些地方使用了交互设计，表现方式是什么样的。

 App中的交互设计

列举某款App中哪些功能或界面使用了交互设计。

 表现形式

简单描述该App中交互设计的表现形式。

小结

作业

第2讲

课时内容

UI元素交互设计

授课时间

240分钟

课时

6

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

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

 理解图标交互的意义

教学目标

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

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

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

 理解并掌握UI中表单元素的交互设计

 图标元素的交互设计

教学重点

 导航元素的交互设计

 表单元素的交互设计

教学难点

图标元素的交互设计

1、 教学思路：（1）通过案例分析与理论知识讲解相结合；（2）通过案例的制作练习掌握不同UI元素的设计。

2、 教学手段：（1）通过知识点讲解使读者理解不同UI元素交互设计的相关知识；（2）通过课堂案例的制作掌握不同UI元素的设计；（3）通过课后习题提高学生的实际教学设计

应用能力。

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

教学内容

讨论问题：1、UI中哪些元素可以实现交互？

2、移动UI中常见的交互有哪些？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

2.1

UI交互元素——文字

2.1.1 关于文字交互

2.1.2

UI中的字体应用

2.1.3 控制字体数量

2.1.4 体现文字层次感

2.1.5 文字排版方式

2.2

UI交互元素——图标

2.2.1 图标的作用

2.2.2 图标的表现形式及适用场景

2.2.3 实战——设计相机应用图标

2.3 图标交互的意义

2.3.1 预见性

2.3.2 美观性

2.3.3 统一性

2.3.4 如何保持图标的统一性

2.3.5 实战——设计线框功能图标

2.4

UI交互元素——按钮

2.4.1

真实按钮与伪按钮

2.4.2 常见交互按钮样式与应用

2.4.3 如何设计出色的交互按钮

2.4.4 实战——设计微渐变按钮

2.5

UI交互元素——图片

2.5.1

UI中常用图片比例

2.5.2

UI中常见图片排版方式

2.5.3 实战——设计图片展示界面

2.6

UI交互元素——导航

2.6.1 底部标签导航

2.6.2 舵式导航

2.6.3 选项卡式导航

2.6.4 侧边式导航

2.6.5 实战——设计侧边交互导航界面

2.7

UI交互元素——表单

2.7.1 文本输入表单元素

2.7.2 搜索表单的常见表现形式

2.7.3 搜索表单的不同交互状态

2.7.4 实战——设计登录界面

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

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

3、 理解图标交互的意义

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

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

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

7、 理解并掌握UI中表单元素的交互设计

根据本章所学习的UI元素交互设计相关知识，完成一个App的图标和界面的设计，具体要求和规范如下。

 内容/题材/形式

可以是美食、影视等不同类型的App。

 设计要求

在Photoshop中完成该App的启动图标和功能图标设计，并且完成该App中多个界面的设计，需要包含启动界面、登录界面、首界面、导航菜单等多个界面。

小结

作业

第3讲

课时交互设计与用户体授课时间

内容

验

360分钟

课时

8

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

 理解界面交互设计

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

教学 理解什么是沉浸感以及沉浸感设计原则

目标

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

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

 了解移动UI与网站UI的交互差异

教学 可用性设计

重点

 情感化设计

 界面交互设计

教学优秀的UI界面交互所具有的特点

难点

1、 教学思路：（1）通过案例分析与理论知识讲解相结合；（2）通过对课堂案例的讲解掌握使用Adobe XD设计影视App界面、美食App界面、音乐App界面、家具App界面的方法和技巧；（3）最后通过课后习题消化所学软件知识，提高对移动交互设计的理解。

（1）通过知识点讲解使读者理解不同UI元素交互设计的相关知识；（2）通教学2、 教学手段：过课堂案例的制作掌握使用Adobe XD设计UI界面的方法和技巧；（3）通过课后习题提设计

高学生的实际应用能力。

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

教学内容

讨论问题：1、你理解的用户体验是什么？

2、UI交互中的用户体验表现在哪些方面？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

3.1

UI交互设计与用户体验

3.1.1 用户体验概述

3.1.2 基础体验类型

3.1.3 交互设计的作用

3.1.4 交互设计的5要素

3.2 界面交互设计

3.2.1 交互设计模式

3.2.2 合理的交互设计提升转化率

3.2.3 独特的UI交互技巧

3.3 可用性设计

3.3.1 什么是可用性

3.3.2 可用性的表现

3.3.3 实战——使用Adobe XD设计影视App界面

3.4 沉浸感设计

3.4.1 什么是沉浸感

3.4.2 沉浸感设计原则

3.4.3 实战——使用Adobe XD设计美食App界面

3.5 情感化设计

3.5.1 什么是情感化设计

3.5.2 互联网产品的情感化设计

3.5.3

UI情感化设计细节

3.5.4 实战——使用Adobe XD设计音乐App界面

3.6 优秀的UI界面交互具有哪些特点

3.6.1 明确系统状态

3.6.2 让按钮和操控拥有触感

3.6.3 有意义的转场动效

3.6.4 帮助用户开始

3.6.5 强调界面的变化

3.6.6 需要注意的细节

3.7 移动UI与网站UI的交互差异

3.7.1 设备尺寸不同

3.7.2 交互方式不同

3.7.3 使用环境不同

3.7.4 网络环境不同

3.7.5 基于位置服务的精细度不同

3.7.6 实战——使用Adobe XD设计家具App界面

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

2、 理解界面交互设计

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

小结

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

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

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

7、 了解移动UI与网站UI的交互差异

根据本章所学习的交互设计与用户体验知识，完成一个移动App界面的设计，具体要求和规范如下。

 内容/题材/形式

可以是美食、影视等不同类型的App。

作业

 设计要求

在Adobe XD中完成该App中多个界面的设计和制作，并且在Adobe XD的“原型”模式中制作出该App中多个界面之间的切换交互动效。

第4讲

课时内容

UI元素交互动效

授课时间

360分钟

课时

8

 理解交互动效与UI设计

 掌握使用动效表现UI交互

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

教学目标

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

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

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

 理解并掌握导航菜单交互动效的表现和制作

 开关按钮交互动效

 加载进度交互动效

教学重点

 文字交互动效

 图标交互动效

 导航菜单交互动效

教学难点

使用动效表现UI交互

1、 教学思路：（1）通过案例分析与理论知识讲解相结合；（2）通过对课堂案例的讲解掌握使用After Effects制作不同UI元素交互动效的方法和技巧；（3）最后通过课后习题消化所学软件知识，提高对UI元素交互动效的理解。

2、 教学手段：（1）通过知识点讲解使读者理解UI元素交互动效的相关知识；（2）通教学设计

过课堂案例的制作掌握使用After Effects制作UI元素交互动效的方法和技巧；（3）通过课后习题提高学生的实际应用能力。

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

教学内容

讨论问题：1、常见的UI元素交互动效有哪些？

2、UI元素交互动效的表现形式？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

4.1 交互动效与UI设计

4.1.1

UI动效概述

4.1.2 优秀的交互动效具有哪些特点

4.1.3 交互动效的优势是什么

4.1.4 功能型动效与展示型动效

4.2 使用动效表现UI交互

4.2.1 转场过渡

4.2.2 层级展示

4.2.3 空间扩展

4.2.4 关注聚焦

4.2.5 内容呈现

4.2.6 操作反馈

4.3 开关按钮交互动效

4.3.1 开关按钮的功能与特点

4.3.2 实战——制作开关按钮交互动效

4.4 加载进度交互动效

4.4.1 了解加载等待动效

4.4.2 常见加载进度动效表现形式

4.4.3 实战——制作加载等待动效

4.5 文字交互动效

4.5.1 文字动效的表现优势

4.5.2 常见文字动效表现形式

4.5.3 实战——制作动感遮罩文字动效

4.6 图标交互动效

4.6.1 常见图标动效表现形式

4.6.2 实战——制作相机图标动效

4.6.3 实战——制作线框图标动效

4.7 导航菜单交互动效

4.7.1 交互导航菜单的优势

4.7.2 交互导航菜单的设计要点

4.7.3 实战——制作测滑导航菜单交互动效

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

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

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

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

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

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

7、 理解并掌握导航菜单交互动效的表现和制作

根据本章所学习的UI元素交互动效知识，完成一个或多个UI元素交互动效的设计制作，具体要求和规范如下。

 内容/题材/形式

按钮、加载进度条、导航菜单等不同的UI元素

 设计要求

根据本章所学习的知识，在After Effects中完成一种UI元素交互动效的制作，要求表现效果流畅、自然。

小结

作业

第5讲

课时内容

界面交互动效

授课时间

360分钟

课时

8

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

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

教学目标

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

 理解交互动效设计规范

 掌握界面交互动效的制作

教学重点

 界面交互动效表现形式

 界面转场交互动效

教学难点

界面交互动效的制作

1、 教学思路：（1）通过案例分析与理论知识讲解相结合；（2）通过对课堂案例的讲解掌握使用After Effects制作智能家居App界面转场动效、界面功能展开动效、登录转场交互动效和界面图片翻页交互动效的方法和技巧；（3）最后通过课后习题消化所学软件知识，提高对界面交互动效的理解。

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

2、 教学手段：堂案例的制作掌握使用After Effects制作界面交互动效的方法和技巧；（3）通过课后习题提高学生的实际应用能力。

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

教学内容

讨论问题：1、界面动效的表现形式有哪些？

2、界面转场有哪些形式？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

5.1 如何设计界面交互动效

5.1.1 首先需要有一个创意想法

5.1.2 根据想法进行丰满实现

5.1.3 实战——制作智能家居App界面转场动效

5.2 界面交互动效表现形式

5.2.1 常见界面动效表现形式

5.2.2 实战——制作界面功能展开动效

5.3 界面转场交互动效

5.3.1 常见的界面转场动效形式

5.3.2 界面转场交互动效设计要求

5.3.3 实战——制作登录转场交互动效

5.4 界面交互动效设计规范

5.4.1 界面动效设计要点

5.4.2 通过交互动效设计提升界面用户体验

5.4.3 实战——制作界面图片翻页交互动效

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

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

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

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

小结

5、 掌握界面交互动效的制作

根据本章所学习的UI元素交互动效知识，完成一个界面转场交互动效的设计制作，具体要求和规范如下。

 内容/题材/形式

界面转场交互动效

 设计要求

根据本章所学习的知识，在After Effects中完成一个界面转场交互动效的制作，要求表现效果流畅、自然。

作业