本书内容涉及手机、移动设备的UI动效设计基础、自然反馈动效设计、层级关系动效设计、愉悦的等待动效设计及打造活力视觉动效设计。
n
1. 选题背景
UI（界面设计）已经从之前的功能性设计为主转变为功能和体验兼具的设计，除了功能外，用户体验也与配色、动画等紧密联系在一起。应用的功能性可以满足用户某方面的硬性需求，而更具情感性的用户体验则可以满足用户对情感的需求，比如界面中的动效。动效的出现使整个界面更加富有色彩感，更能体现人性化的操作。
本书在编写过程中，以After Effects软件为主，通过基础知识与大量实例相结合的形式，向读者传授非常实用的动效设计知识，通过对这些内容的学习，读者可以全面提升设计水平。
2. 本书内容
本书是一本专为从事动效设计的读者而编写的增强型实例图书，所有案例都是作者多年设计工作的积累。本书的最大特点是实例的实用性强，理论与实践结合紧密，精选常见的、实用的动效设计案例进行技术剖析和操作详解。
全书按照由浅入深的写作方法，从界面动效设计基础到自然反馈动效设计、层级关系动效设计、愉悦的等待动效设计再到打造活力视觉动效，以精华基础知识为辅，大量的精品实例为主，全面地讲解了动效的制作技法。
本书以“基础知识+特效解析+贴心提示+视频教学”的形式，清晰地讲述了动效在整个设计中的可用性及可操作性。书中制作的实例可用于实际工作中，制作思路也是可以借鉴的。
3. 资源下载
本书资源可以登录机械工业出版社华章分社的网站（www.hzbook.com）下载，搜索到本书，然后在页面上的“资源下载”模块下载即可。
4. 作者及售后
本书由王红卫主编，同时参与编写的还有张四海、余昊、贺容、王英杰、崔鹏、桑晓洁、王世迪、吕保成、蔡桢桢、王红启、胡瑞芳、王翠花、夏红军、杨树奇、王巧伶、陈家文、王香、杨曼、马玉旋、张田田、谢颂伟、张英、石珍珍、陈志祥等。在创作过程中，由于时间仓促，错误在所难免，希望广大读者批评指正。
如果在学习过程中发现问题或有更好的建议，欢迎发邮件至smbook@163.com与我们联系。
编 者
2018年9月
计算机\图形图像
以After Effects CC 2018为工具
“动效基础知识+特效解析+贴心提示+视频教学”
AE在UI移动端的动效设计个典型实例讲解58
界面动效设计基础 / 自然反馈动效设计 / 层级关系动效设计
愉悦的等待动效设计 / 活力视觉动效设计
提供素材云盘下载
包含工程文件、高清语音教学视频
通过基础知识与大量的精选实例相结合的形式，向读者传授非常实用的动效设计知识
以58个常用的典型实例讲授AE在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 Effects 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章 打造活力视觉动效 151
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
