UI移动端界面动画创意与实现

本书内容涉及手机、移动设备的UI动效设计基础、自然反馈动效设计、层级关系动效设计、愉悦的等待动效设计及打造活力视觉动效设计。

前言
第1章 动效设计基础知识1
1.1 什么是动效设计2
1.2 动效设计方法2
1.2.1 理解动效2
1.2.2 动态设计举例2
1.3 动效在界面设计中的用途3
1.3.1 观察系统状态3
1.3.2 导航和过渡4
1.3.3 使用者的视觉反馈4
1.3.4 加深印象5
1.3.5 增强操控感5
1.4 动效设计原则5
1.4.1 舒适度的建立5
1.4.2 令人愉悦的提示功能6
1.4.3 额外增加界面活力6
1.4.4 吸引用户的注意力6
1.4.5 让等待变得更愉快7
1.4.6 界面衔接的延续感7
1.5 动效制作要素8
1.5.1 响应的反馈8
1.5.2 快速灵敏8
1.5.3 简明清晰9
1.5.4 目的性9
1.5.5 过渡流畅自然9
1.5.6 关联性10
1.5.7 增强操纵10
1.5.8 引导帮助10
1.5.9 升华体验11
1.6 动效设计重点11
1.6.1 材质与空间11
1.6.2 运动轨迹11
1.6.3 时间表现力12
1.6.4 个性化元素12
1.6.5 导向设计12
1.6.6 背景关系13
1.6.7 交互共鸣13
1.6.8 情感表现14
1.6.9 聚焦动效14
1.7 动效设计表现手法14
1.7.1 拉伸与挤压14
1.7.2 期望15
1.7.3 入场15
1.7.4 连续动作与姿态对应16
1.7.5 重叠与跟随动作16
1.7.6 动势渐进/渐出16
1.7.7 次级运动17
1.7.8 节奏时态17
1.7.9 夸张18
1.7.10 立体造型18
1.7.11 吸引力18
1.8 动效设计趋势19
1.8.1 个性化元素19
1.8.2 有趣的运动方式19
1.8.3 交互反馈的生命力20
1.9 动效设计常用的软件20
1.9.1 Adobe After Effects20
1.9.2 Adobe Photoshop21
1.9.3 Adobe Animate（Flash）21
1.9.4 pixate21
1.9.5 Hype 322
第2章 自然反馈动效设计23
2.1 登录框输入动效设计24
2.2 照片操作动效设计25
2.3 名片界面动效设计27
2.4 书写动效设计29
2.5 密码输入动效设计31
2.6 邮箱登录界面动效设计33
2.7 图像切换动效设计36
2.8 拨号界面动效设计38
2.8.1 绘制触控元件39
2.8.2 制作结果动画40
2.9 翻滚动效设计42
2.9.1 制作主视觉动效42
2.9.2 制作触控动效44
2.10 确认按钮动效设计45
2.10.1 制作触控按钮45
2.10.2 制作结束动效47
2.11 开关控件动效设计48
2.11.1 绘制控件图形49
2.11.2 绘制切换动画50
2.12 换歌界面动效设计52
2.12.1 制作光盘控件效果52
2.12.2 制作装饰动画53
2.13 滑动解锁动效设计54
2.13.1 编辑状态动画55
2.13.2 绘制触控图形56
2.14 刷新动效设计57
2.14.1 制作滑动效果57
2.14.2 制作拉伸动效58
2.14.3 添加文字动画59
第3章 层级关系动效设计61
3.1 收音机启动界面动效设计62
3.2 相册界面切换动效设计64
3.3 票务界面动效设计66
3.4 音乐播放界面动效设计68
3.4.1 制作选择动画68
3.4.2 绘制控制动画元素69
3.5 好友列表动效设计70
3.5.1 制作动效元素71
3.5.2 处理动画细节71
3.6 分享动效设计72
3.6.1 处理主体动画效果73
3.6.2 制作跟随元素动画74
3.7 图表数据动效设计75
3.7.1 处理细节元素动画76
3.7.2 制作主体状态动画77
3.8 手表界面切换动效设计78
3.8.1 绘制主界面动画78
3.8.2 制作触控动画79
3.9 卡片切换动效设计80
3.9.1 制作主体动画81
3.9.2 处理触控元素动画82
3.10 系统提示动效设计83
3.10.1 绘制主体动效元素84
3.10.2 制作主界面反馈动画86
3.10.3 制作文字动画87
3.11 功能交互动效设计88
3.11.1 制作状态栏动画88
3.11.2 制作主体动画控件89
3.11.3 处理反馈动画91
3.12 卡片式登录界面动效设计92
3.12.1 制作触控动画92
3.12.2 制作输入状态93
3.12.3 编辑确认动画95
3.12.4 制作切换动画96
3.13 待机滑动动效设计98
3.13.1 制作主体状态动画98
3.13.2 添加文字动画99
3.13.3 制作细节元素动画100
3.13.4 制作结果动画101
3.14 备忘便签动效设计102
3.14.1 为素材图像添加装饰102
3.14.2 制作滑动动画103
3.14.3 制作进度条进度动画105
3.14.4 为进度条进度动画添加装饰105
第4章 愉悦的等待动效设计107
4.1 时钟插件动效设计108
4.2 上传图示动效设计109
4.3 抽奖转盘动效设计111
4.4 数据应用loading动效设计113
4.4.1 绘制界面状态113
4.4.2 制作loading动画115
4.5 卡通加载动效设计116
4.5.1 制作进度条动效116
4.5.2 制作气球动画117
4.6 加载进度条动效设计119
4.6.1 绘制进度条动画119
4.6.2 制作转圈动画120
4.7 提示动效设计123
4.7.1 制作触发动效123
4.7.2 制作回应动效124
4.8 对错控件动效设计125
4.8.1 制作正确动画效果125
4.8.2 绘制出错动画效果126
4.9 时间过渡动效设计127
4.9.1 编辑转换效果128
……