第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 Eftects 20
1.9.2 Adobe Photoshop 21
1.9.3 Adobe Animate （Flash） 21
1.9.4 pixate 21
1.9.5 Hype 3 22
第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
4.9.2制作动画元素 128
4.10云存储动效设计 130
4.10.1绘制状态动画 130
4.10.2制作提示效果 132
4.11加载动效设计 133
4.11.1制作主体图形动画 133
4.11.2制作装饰动画 135
4.12数据加载动效设计 136
4.12.1编辑状态动画 136
4.12.2制作提示元素 138
4.13圆环进度动效设计 139
4.13.1绘制圆形动画 139
4.13.2添加文字跟随动画 140
4.14下载进度动效设计 141
4.14.1制作下载进度图形动画 142
4.14.2绘制动画装饰图形 144
4.14.3添加文字跟随动效 144
4.15刷新动效设计 145
4.15.1绘制手指图形 146
4.15.2制作刷新动画 146
4.15.3绘制纸风车 148
第5章 打造活力视觉动效 152
5.1天气界面装饰动效设计 152
5.2卡片切换动效设计 154
5.3指南针动效设计 156
5.4 WiFi扫描图示动效设计 158
5.5写实风扇动效设计 160
5.6导航动效设计 161
5.6.1制作动画路径 161
5.6.2绘制导航动画元素 163
5.7平板电脑界面动效设计 164
5.7.1制作中间部分动画 164
5.7.2绘制边缘图形动画 165
5.8点赞动效设计 167
5.8.1制作图形动画 167
5.8.2制作文字动画 168
5.9运动统计动效设计 169
5.9.1绘制触控元件 170
5.9.2制作状态动画 172
5.10频谱动效设计 174
5.10.1制作频谱动画 174
5.10.2制作进度条 175
5.11图案解锁动效设计 176
5.11.1制作界面滑动效果 177
5.11.2制作装饰图形动效 178
5.12天气状态动效设计 179
5.12.1制作太阳动画 179
5.12.2制作闪电动画 181
5.13动感滑动动效设计 182
5.13.1制作发光动效 182
5.13.2绘制界面动效 183
5.13.3制作文字动画 185
5.14天气插件动效设计 186
5.14.1绘制插件元素 187
5.14.2制作文字动画 188
5.14.3制作下雨动效 190
5.15状态反馈动效设计 191
5.15.1绘制基础图形 192
5.15.2制作界面动画 193
5.15.3处理细节效果 195
5.15.4绘制触控元件 195