做动效 After Effects跨平台UI动效设计教程
定 价:128 元
- 作者:张鼎(Keith)
- 出版时间:2023/12/1
- ISBN:9787121469558
- 出 版 社:电子工业出版社
- 中图法分类:TP391.413
- 页码:308
- 纸张:
- 版次:01
- 开本:16开
在 5G 时代,互联网行业流行“全栈设计师”(什么都要会)。目前, UI 设计是互联网行业乃至整个智能设备行业不可或缺的环节,而动效设计在其中的作用越来越重要,不会做动效设计的 UI 设计师的就业会有很大的局限性。因此,UI 动效设计是互联网设计师未来必备的一项技能。本书从理论、行业、实战三大环节入手,旨在梳理一条尽可能完整的跨越平台、贯穿用户体验始终的动效设计全链条。从早期的动效设计,到目前主流的智能设备 UI 动效设计,再到未来的创新动效设计形态,本书系统性地梳理动效设计的几大价值和完整细致的分类,以帮助读者更系统、更全面地学习动效设计,理解、思考动效设计的真正价值。在工具实战方面,本书以专题模块的形式,提取了几种常见、实用的动效类型,并紧密结合案例进行讲解,以帮助读者更快、更好地掌握软件的使用方法。本书的内容从入门到深入,从理论到实战,适合院校设计专业(如交互设计、动画设计等)的学生,刚进入用户体验设计领域的职场新人,以及已有一定行业工作经验但希望能更系统、更深入地学习动效设计的设计师阅读。另外,本书也可以作为设计培训机构的培训教材。
张鼎,毕业于同济大学,曾在华为、小鹏汽车、浦发银行等公司担任交互与动效设计师,目前就职于字节跳动;10余年来深耕用户体验与动效设计,参与设计的产品涵盖多种软/硬件形态和平台,包括华为旗舰智能手机Mate系列、智能电动轿跑小鹏P7、AR智能眼镜,以及众多跨移动端与Web端的软件产品;对跨平台设备的用户体验和动效设计具有丰富的实战设计经验。
第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