电子工业出版社-网上书店

在 5G 时代，互联网行业流行“全栈设计师”（什么都要会）。目前， UI 设计是互联网行业乃至整个智能设备行业不可或缺的环节，而动效设计在其中的作用越来越重要，不会做动效设计的 UI 设计师的就业会有很大的局限性。因此，UI 动效设计是互联网设计师未来必备的一项技能。本书从理论、行业、实战三大环节入手，旨在梳理一条尽可能完整的跨越平台、贯穿用户体验始终的动效设计全链条。从早期的动效设计，到目前主流的智能设备 UI 动效设计，再到未来的创新动效设计形态，本书系统性地梳理动效设计的几大价值和完整细致的分类，以帮助读者更系统、更全面地学习动效设计，理解、思考动效设计的真正价值。在工具实战方面，本书以专题模块的形式，提取了几种常见、实用的动效类型，并紧密结合案例进行讲解，以帮助读者更快、更好地掌握软件的使用方法。本书的内容从入门到深入，从理论到实战，适合院校设计专业（如交互设计、动画设计等）的学生，刚进入用户体验设计领域的职场新人，以及已有一定行业工作经验但希望能更系统、更深入地学习动效设计的设计师阅读。另外，本书也可以作为设计培训机构的培训教材。

第1章 认识UI动效神器AfterEffects
1.1认识After Effects的面板与菜单...............................................2
1.1.1菜单栏......................................2
1.1.2工具栏.................................13
1.1.3项目面板组.....................................................................15
1.1.4【合成】面板............................................................17
1.1.5【时间轴】面板...................................................19
1.1.6【效果和预设】面板..............................25
1.1.7其他常用面板..........................................................26
1.2项目、合成与图层..........................................27
1.2.1新建与设置项目.................................................27
1.2.2新建与设置合成...............................................28
1.2.3图层通用属性........................................................28
1.2.4图层样式...........................................................................30
1.2.5图层类型...........................................................................30
1.3渲染发布...............................................................................47
1.3.1渲染输出设置..........................................................47
1.3.2导出图片序列........................................................50
1.4效果、关键帧与表达式..........................51
1.4.1常用的内置自带效果插件..............51
1.4.2表达式..............................63

第2章 动效基础知识
2.1动效设计简史............................................................67
2.1.1智能手机时代的来临..............................67
2.1.2从MIUI V5和iOS 7谈起.......................68
2.1.3后来者——Material Design
中的Animation（动画）...............70
2.1.4另立门派——记得Metro UI吗...............72
2.2动效的价值.....................................................................74
2.2.1动效的润滑与缓冲作用....................74
2.2.2使用动效展现层级/框架/逻辑.........................................79
2.2.3反作用力——动效反推界面设计...........................................82
2.2.4动效设计的灵魂——节奏感...............................83
2.2.5指尖的舞蹈——动效与交互动作的融合..........86
2.3UI动效设计的分类解析...........................91
2.3.1根据交互动作划分........................................91
2.3.2根据交互功能与场景划分.........98
2.3.3响应不同输入手段的反馈动效类型...................105

第3章 统一的韵律：智能手机系统的动效设计规范
3.1动效设计规范概述.......................................109
3.1.1定义设计DNA........................................................110
3.1.2划分系统层级......................................................112
3.1.3划分动效设计的颗粒度..................114
3.2动效设计规范在华为智能手机EMUI 3.0设计中的应用......................... 118
3.2.1点线之美：EMUI 3.0的动效设计DNA................... 118
3.2.2EMUI 3.0动效设计规范...................119
3.3案例：动画曲线精进 ............................ 121
3.3.1惯性往复动效.....................................................122
3.3.2压缩-3D翻转回弹动效...................129
3.3.3依次错落进场的组合动效......136

第4章 智能感知动效在智能汽车UI 设计中的应用
4.1智能感知与智能汽车用户体验........................................149
4.1.1智能汽车：新的浪潮之巅.........149
4.1.2智能汽车的用户体验与UI设计....................................149
4.2智能汽车的感知体系与车机动效设计......................... 151
4.2.1智能汽车的感知体系...........................151
4.2.2动效——理想的实时动态信息传递方式....................... 151
4.3畅想：HUD是否是车机最理想的模式.......157
4.3.1HUD与智能汽车.............................................157
4.3.2浅谈HUD与动效设计..........................158
4.4智能汽车创意UI动效实战............162
4.4.1案例：使用Particular效果制作下雪与雪花堆积动效.......162
4.4.2案例：使用Particular效果制作下雨与雨花溅起动效..........................174

第5章 突破二维空间——3D动效在ARUI 设计中的应用
5.13D动效设计概述................................................ 191
5.1.1拟物化视觉风格时代的3D动效..................................... 191
5.1.2“轻3D”与“2 . 5D”——扁平化风格下的3D动效创新......................................193
5.23D动效在AR UI设计中的应用.........................................197
5.2.1浅谈AR眼镜的交互体系..............197
5.2.2新形态UI：悬浮在现实空间中的立体界面...198
5.2.3行业案例：“视族”AR智能眼镜的桌面动态图标设计......200
5.3案例：巧用3D图层做LED灯箱......................................... 203
5.3.1搭建基本框架...................................................203
5.3.2添加3D标题..........................................................206
5.3.3制作LED灯箱.......................................................210
5.3.4为5个LED屏幕盒子分配独立的屏幕内容..................215
5.3.5添加Particular效果................................218
5.3.6为5个LED屏幕盒子创建反射................................... 226
5.3.7模拟低分辨率LED屏幕的颗粒效果................ 228
5.3.8创建光缆生长逐个点亮LED屏幕的动画........ 230
5.3.9增加摄像机运动动画......................232
5.3.10增加细节.................................................................233

第6章 悬停的舞蹈：Hover（悬停）动效在Web端UI 设计中的应用
6.1Hover（悬停）动效概述............. 238
6.2Hover（悬停）动效在Web端UI设计中的应用............................................... 238
6.2.1Hover（悬停）动效的几大交互应用场景................................ 238
6.2.2Hover（悬停）动效在VR/AR交互中的回归............................ 244
6.3案例：做一组粒子聚散效果的Hover（悬停）动效................................ 245
6.3.1打开初始工程文件，完成前期准备工作................ 246
6.3.2制作第一组Hover（悬停）动效.................................. 247
6.3.3新建合成用于粒子动效.............250
6.3.4添加图片素材，作为发射器形状...........................................251
6.3.5用多张图片替换作为随机多样化的粒子样式.................................254
6.3.6制作Particular效果的粒子发射关键帧动画..........................................258
6.3.7复制辅助说明文字图层，创建粒子到文字的过渡动画.................261
6.3.8添加发光效果..................................................263
6.3.9为粒子起始发射添加上升运动趋势............................ 264
6.3.10将制作完成的粒子动画合成导入主场景合成..........................................266
6.3.11制作辅助说明文字呈粒子化消散的动效....................... 268

第7章 小空间，大天地：转场动效与数据可视化动效在智能手表中的应用
7.1“视觉连贯”转场动效与数据可视化动效概述..............................271
7.1.1“视觉连贯”转场动效概述............................................271
7.1.2数据可视化动效概述........................272
7.2转场动效与数据可视化动效在智能手表交互中的应用................... 273
7.2.1智能手表交互中的转场动效................................................. 273
7.2.2智能手表交互中的数据可视化动效............................................. 274
7.3案例：智能手表运动健身类App的立体地图数据可视化动效.................... 279
7.3.1创建3D地图............................................................280
7.3.2创建模拟用户跑步路线的发光轨迹动效........................ 285
7.3.3添加轨迹光线在穿梭过程中粗细变化的动效..........................................288
7.3.4添加轨迹光线在穿梭过程中颜色变化的动效..........................................289
7.3.5为粒子束轨迹光线创建结束时的关键帧.................................291
7.3.6为轨迹光线添加类似于虚线的断点分段效果.................. 292
7.3.7为轨迹路线添加发光等更丰富的视觉效果..........................................293
7.3.8创建镜头运动动画................................297
7.3.9添加数据辅助说明................................298

本书配套资源下载

对不起，暂无音视频资源！

做动效 After Effects跨平台UI动效设计教程