After Effects移动UI交互动效设计与制作(全彩慕课版)
作 者: 陈力,李平 著
出版时间: 2021
内容简介
本书全面的介绍了UI界面动效设计,通过由浅入深的讲解方法,以知识点的介绍和典型案例的制作讲解为主,使读者更容易理解相应的知识点,并能够在此基础上掌握UI动效的制作和表现方法。全书共分为5章,分别是:UI动效设计基础、掌握After Effects基础操作、关键帧基础动效制作、蒙版动效制作与输出、UI元素动效、界面切换转场动效和UI界面动效。本书配套的多媒体教学光盘中不但提供了本书所有实例的源文件和素材,还提供了所有实例的多媒体教学视频,以帮助读者迅速掌握使用After Effects进行UI动效制作的精髓,可以让新手才能够零起步,进而跨入高手行列。本书案例丰富、讲解细致,注重激发读者兴趣和培养动手能力,适合作为从事UI设计人员的参考手册。
目录
目 录
第 1章 UI动效设计基础
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 体现设计师优势
1.3 如何设计动效?
1.3.1 首先需要有一个创意想法
1.3.2 根据想法进行丰满实现
1.4 动效设计的类型有哪些?
1.4.1 转场过渡
1.4.2 层级展示
1.4.3 空间扩展
1.4.4 关注聚焦
1.4.5 内容呈现
1.4.6 操作反馈
1.5 动效设计制作软件有哪些?
1.6 基础动效类型
1.6.1 基础动效
1.6.2 属性变化
1.6.3 运动节奏
1.6.4 基础动效组合应用
1.7 本章小结
第 2章 掌握After Effects基础操作
2.1 After Effects概述
2.2 After Effects工作界面
2.2.1 认识After Effects工作界面
2.2.2 工具栏
2.2.3 “项目”面板
2.2.4 “合成”窗口
2.2.5 “时间轴”面板
2.2.6 其他面板
2.3 After Effects的基本操作
2.3.1 创建项目文件
2.3.2 在项目文件中创建合成
2.3.3 保存和关闭项目文件
2.3.4 After Effects中的基本工作流程
2.4 素材的导入与管理操作
2.4.1 导入素材的基本方法
2.4.2 导入PSD格式素材
实战——通过导入PSD格式文件创建合成
2.4.3 导入AI格式素材
实战——通过导入AI格式文件创建合成
2.4.4 素材的管理操作
2.4.5 嵌套合成
2.5 认识“时间轴”面板
2.5.1 “音频/视频”选项
2.5.2 “图层基础”选项
2.5.3 “图层开关”选项
2.5.4 “转换控制”选项
2.5.5 “父级和链接”选项
2.5.6 “时间控制”选项
2.6 After Effects中的图层
2.6.1 认识不同类型的图层
2.6.2 图层的混合模式
实战——快速制作图片切换动效
2.7 本章小结
第3章 关键帧基础动效制作
3.1 了解关键帧
3.1.1 理解帧与关键帧
3.1.2 关键帧的创建方法
3.2 关键帧的编辑操作
3.2.1 选择关键帧
3.2.2 移动关键帧
3.2.3 复制关键帧
3.2.4 删除关键帧
实战——制作火焰循环动效
3.3 基础“变换”属性
3.3.1 “锚点”属性
3.3.2 “位置”属性
实战——制作背景图片滑动切换动效
3.3.3 “缩放”属性
3.3.4 “旋转”属性
3.3.5 “不透明度”属性
实战——制作APP启动界面动效
3.4 关于运动路径
3.4.1 将直线运动路径调整为曲线运动路径
3.4.2 运动自定向
实战——制作飞机飞行动效
3.5 关于图表编辑器
3.5.1 认识图表编辑器
3.5.2 设置对象的缓动效果
实战——制作圆球弹跳缓动动效
3.6 本章小结
第4章 蒙版动效制作与输出
4.1 形状的应用
4.1.1 关于路径形状
4.1.2 创建路径群组
4.1.3 设置路径形状属性
实战——制作简单的圆环Loading动效
4.2 创建蒙版动效
4.2.1 蒙版动效原理
4.2.2 形状工具
4.2.3 钢笔工具
4.2.4 轨道遮罩
实战——制作iOS系统解锁文字遮罩动效
4.2.5 设置蒙版属性
实战——制作聚光灯动效
4.2.6 蒙版的叠加处理
实战——制作二维码扫描动效
4.3 在After Effects中渲染输出动画
4.3.1 认识渲染工作区
4.3.2 理解渲染设置选项
4.3.3 渲染输出
实战——将动效渲染输出为视频文件
4.3.4 配合Photoshop输出GIF文件
实战——将动效输出为GIF动画图片
4.3.5 将动画嵌入到手机模板
实战——将动画嵌入到手机模板中
4.4 本章小结
第5章 UI元素动效
5.1 图标动效
5.1.1 图标在UI界面中的作用
5.1.2 图标动效的常见表现形式
5.1.3 制作天气图标动效
实战——制作天气图标动效
5.1.4 制作日历图标动效
实战——制作日历图标动效
5.2 加载进度条与开关按钮动效
5.2.1 常见的加载进度条表现方式
5.2.2 制作常见的矩形进度条动效
实战——制作常见的矩形进度条动效
5.2.3 开关按的功能特点
5.2.4 制作开关按钮动效
实战——制作开关按钮动效
5.3 文字动效
5.3.1 文字动效的表现优势
5.3.2 文字动效的常见表现形式
5.3.3 制作手写文字动效
实战——制作手写文字动效
5.4 Logo动效
5.4.1 Logo动效概述
5.4.2 Logo动效的表现优势
5.4.3 Logo动效需要注意的问题
5.4.4 制作电商Logo动效
实战——制作电商Logo动效
5.5 工具栏动效
5.5.1 关于工具栏动效设计
5.5.2 制作工具栏图标旋转展开动效
实战——制作工具栏图标旋转展开动效
5.6 本章小结
第6章 界面切换转场动效
6.1 界面切换转场动效的核心规则
6.1.1 转场动效自然流畅
6.1.2 动效层次分明
6.1.3 关联是过渡动效的重要功能
6.1.4 快速的界面切换过渡
6.1.5 动效表现效果要清晰
6.1.6 制作登录转场动效
实战——制作登录转场动效
6.2 常见的界面切换转场动效
6.2.1 弹出
6.2.2 测滑
6.2.3 渐变放大
6.2.4 其他
6.2.5 制作图片翻页切换动效
实战——制作图片翻页切换动效
6.3 导航菜单切换动效
6.3.1 交互式动态导航菜单的优势
6.3.2 导航菜单的设计要点
6.3.3 制作侧滑导航菜单动效
实战——制作侧滑导航菜单动效
6.4 本章小结
第7章 UI界面动效
7.1 动效设计的作用与常见效果
7.1.1 动效设计的作用
7.1.2 常见的UI界面交互动效
7.1.3 制作天气界面动效
实战——制作天气界面动效
7.1.4 制作界面加载动效
实战——制作界面加载动效
7.2 UI界面交互动效设计规范
7.2.1 界面动效设计要点
7.2.2 通过动效设计提升UI界面用户体验
7.2.3 制作通话界面动效
实战——制作通话界面动效
7.3 优秀的界面动效有哪些特点
7.3.1 表现当前系统状态
7.3.2 使界面中的链接元素具有触感
7.3.3 界面转场动效要求快速而流畅
7.3.4 使用动效表现界面中的变化
7.3.5 注意界面动效的细节表现
7.3.6 制作APP应用欢迎动效
实战——制作APP应用欢迎动效
7.4 本章小结