具体描述
这是一本关于互联网动效设计的实战教程图书,介绍了移动互联网时代体验动效设计行业的发展趋势。本书分为7 章,通过文字和视频两种教学形式相结合,让大家对UI 前期的行业、技能以及部门工作协同等知识有所了解,同时对动效软件的操作和动效案例的制作有较全面的掌握。本书除了文字介绍外,还有近20 个视频教学案例,由浅入深地教会读者使用After Effects 制作动效,且在学习之余,为读者分享了一些关于思维导图、分镜头绘制、前端开发等相关知识,以及工作过程中可能会遇到的一些困难解决方案和风险规避方法等。本书适于传统UI 设计师、在校相关专业学生或者希望系统学习UI 动效设计的人学习使用。
作者简介
毕康锐,江西南昌大学艺术与设计专业学士,武汉华中科技大学计算机软件工程硕士。江西南昌人。先后担任江西南昌大学科技学院数字媒体研究所讲师,广东工大用户体验设计学科特邀教师。深圳设计联合会成员 、 中国 用户体验专业协会(UXPA)成员、2017年UXPA中国用户体验设计大赛评委。先后曾服务于奥地利 Woduschegg & partener 设计咨询事务所、华为软件技术、腾讯ISUX、VIVO UED用户体验设计团队。中国首部红色动漫连续剧《安源小子》后期特效合成部门负责人。近十年对于移动互联网UI 动效(Motion Graphic)领域的研究和探索较为专注,包括 Rom平台、APP、互联网营销视频、HTML5营销案、特效后期合成等领域。
目录信息
1.1 认识UI 014
1.1.1 UI 操作系统的发展简介 014
1.1.2 UED 团队的构成与介绍 017
1.1.3 UI 的应用领域分析 018
1.1.4 UI 设计师的自我修养 025
1.2 认识UI 动效 028
1.2.1 孕育中的UI 动效 029
1.2.2 UI 动效行业的现状与发展 030
1.2.3 UI 动效的应用领域分析 032
1.2.4 让设计有意义地存在 037
1.3 如何玩转UI 动效 038
1.3.1 系统设备的准备 038
1.3.2 我的切身学习体会 039
1.3.3 螺旋提升计划 040
1.3.4 建造你的灵感弹药库 042
1.3.5 如何正确看待“审美” 044
1.3.6 嘿!你着什么急 044
1.4 UI 动效制作的工具介绍 045
1.4.1 二维/ 原型类动画工具 045
1.4.2 3D 类动画工具 049
1.4.3 After Effects 052
02 动手之前先动脑——如何提炼你的设计思维 055
2.1 全局考量 056
2.1.1 设计师和美工,仅一步之遥 056
2.1.2 “先整体后局部”的思考程序 057
2.1.3 美观,不代表一定优质 058
2.1.4 设计该有温度 059
2.2 如何构思你的动效方案 059
2.2.1 你真的懂得如何去“看”吗 060
2.2.2 绘制你的动画分镜头 062
2.2.3 可行性评估 065
2.2.4 可拓展性和pin牌感 066
2.2.5 构思期间的进展同步 066
2.3 思维导图构建和灵感提炼 067
2.3.1 什么是思维导图 067
2.3.2 如何绘制你的思维导图 071
2.3.3 养成灵感提炼的习惯 072
03 教你如何快速玩转After Effects——五大学习阶段全修炼073
3.1 半小时,熟悉After Effects 系统的基本操作 074
3.1.1 认识After Effects 的基本面板 074
3.1.2 如何将PSD 文件导入After Effects 075
3.1.3 如何将AI 文件导入After Effects 077
3.1.4 如何将Sketch 文件导入After Effects 080
3.1.5 新建工程文件与相关参数设置 083
3.1.6 顶部工具栏的认识 084
3.1.7 图层编辑区域的介绍 084
3.1.8 红条出现,别慌 087
3.2 一小时,熟悉界面基本操作技巧 088
3.2.1 新建固态层(Solid Layer) 088
3.2.2 “嵌套”功能的使用 089
3.2.3 创建“父子关联” 090
3.2.4 SHY 和 SOLO 091
3.2.5 关于“MASK”( 遮罩)功能的介绍 094
3.2.6 3D Layer(3D 层) 099
3.2.7 实战:After Effects 摄像机的操作 101
3.3 两小时,学会形状图层的运用 101
3.3.1 如何创建Shape Layer 102
3.3.2 Contents 属性的使用 103
3.3.3 关于路径图形的创建 114
3.3.4 Anchor Point(图层轴心点) 115
3.3.5 如何创建文字层 116
3.3.6 Null Object( 空对象) 的创建和使用 117
3.3.7 “木偶图钉”工具的使用 118
3.3.8 图层的复制、截断和去首尾处理 120
3.4 一小时,让你的UI 动起来 122
3.4.1 帧与关键帧 122
3.4.2 关键帧的创建与使用 123
3.4.3 曲线动画效果的制作 126
3.5 聊聊渲染 130
3.5.1 After Effects 渲染面板的介绍 130
3.5.2 不同的渲染输出方式介绍 132
04 动效大爆炸——H5动效的实现方式与Material Design动画 135
4.1 了解HTML5 136
4.1.1 什么是HTML5 136
4.1.2 前端工程师的介绍 138
4.1.3 动画实现大揭秘1:原生动画 139
4.1.4 动画实现大揭秘2:CSS3 动画 145
4.1.5 动画实现大揭秘3:CSS2 + JavaScript 149
4.1.6 动画实现大揭秘4:Canvas + SVG 150
4.1.7 动画实现大揭秘5:WebGL 154
4.1.8 动画实现大揭秘6:另辟蹊径 156
4.2 Material Design 动画,你必须要知道的 160
4.2.1 什么是Material Design 动画 160
4.2.2 影响Material Design 动画的客观属性 161
4.2.3 Material Design 的动画表现形式 163
4.2.4 Material Design 动画设计的注意事项 168
05 游戏有外挂,动效有脚本——不同动效插件的介绍与使用方法 173
5.1 概述 174
5.2 Shape Fusion(融合效果脚本插件) 174
5.2.1 Shape Fusion 的安装与加载方法 175
5.2.2 Shape Fusion 的使用与操作流程 176
5.3 Mt. Mograph Motion(图形动画脚本插件)178
5.3.1 面板区域的介绍 179
5.3.2 动画命令的介绍 180
5.4 Bodymovin(After Effects 动画转HTML5的脚本插件) 185
5.4.1 关于Lottie 工具的介绍 186
5.4.2 Bodymovin 的安装与加载方式 186
5.4.3 如何在Bodymovin 中完成动画的渲染输出 189
06 手把手教你玩动效——动效制作方法的视频全解析 193
6.1 概述 194
6.2 基础篇 194
6.2.1 水波纹加载动画 195
6.2.2 界面构成五部曲 196
6.2.3 LOGO 诞生记 197
6.2.4 圆环波普棉花糖 198
6.2.5 线体ICON 变形计 199
6.2.6 水滴融合Loading(有插件+ 无插件双实现版本)200
6.2.7 灵动的文字百叶窗 201
6.2.8 生长的自行车 202
6.2.9 液态流体的LOGO 203
6.3 进阶篇 204
6.3.1 图形切割 204
6.3.2 2D 卡通的爆炸LOGO 206
6.3.3 电击的LOGO 207
6.3.4 动感涂鸦字体LOGO 208
6.3.5 HUD 炫动光环 209
6.4 Gao级篇 210
6.4.1 Hologram 全息手表演示动效 211
6.4.2 QQ 会员15 周年加速特权篇动效方案 212
6.4.3 粒子LOGO 动画 21313
07 踏上不归路,就请坚持到底 215
7.1 自学,究jing有多难 216
7.2 关于Performance Flow(演绎过程) 220
7.3 我的个人学习建议 222
后记 224
· · · · · · (收起)
读后感
用户评价
我最近在负责一个老旧App的界面重构工作,用户反馈最大的问题就是界面卡顿、交互生硬。我把这本书当作了“救命稻草”来啃。我最欣赏它关于“性能优化”和“感知流畅度”的章节。作者没有回避现实世界的限制,坦诚地讨论了在不同设备和性能约束下,如何做出“最好的妥协”。他分享的很多实战经验,比如如何利用异步加载优化首屏体验,如何通过微动效掩盖数据请求的延迟,这些都是教科书上看不到的“江湖智慧”。读完之后,我立刻着手优化了几个核心页面的动效,用户反馈立竿见影,操作的愉悦感有了质的飞跃。这本书不仅仅是关于“漂亮”,更是关于“好用”和“高效”,真正做到了技术与艺术的完美融合。
这本书的排版和插图设计也值得大书特书一番。在这个信息爆炸的时代,一本技术类书籍如果内容再晦涩难懂,就更容易被束之高阁。但《UI动效大爆炸》完全没有这个问题。它的色彩搭配既专业又不失活力,大量的代码示例和效果图都清晰地标注了关键点,对比效果一目了然。我特别欣赏作者在展示复杂交互流程时所采用的流程图和状态机模型,这极大地帮助我理清了不同状态之间的切换逻辑,避免了在实际开发中因为状态混乱而引入的Bug。对于像我这样需要同时兼顾设计和前端实现的“斜杠青年”来说,这本书无疑是节省了大量摸索的时间。它提供了一套完整的、可落地的实现思路,从概念到交付,环环相扣,让人感觉每一步都有章可循,踏实得很。
坦白说,市面上关于动效的书籍很多,很多都大同小异,要么过于理论化,要么就是个简单的效果合集。但《UI动效大爆炸》的独特之处在于它构建了一个完整的“动效设计体系”。作者非常注重“一致性”和“品牌感”的建立,他教导我们如何将动效语言融入到整个品牌体验中,让每一个微小的交互都在讲述同一个故事。书中对于如何建立团队内部的动效规范也给出了非常实用的建议,这对于管理设计流程和协作效率极有帮助。我最大的收获是学会了如何用“克制”的美学去处理动效,知道什么时候该“大张旗鼓”,什么时候应该“润物细无声”。这本书让我从一个“动画制作者”成长为一个具有系统思考能力的“动效策略师”。如果你想在UI动效领域建立起自己独特且深刻的理解,这本书绝对是值得反复研读的经典之作。
这本书简直是视觉盛宴,拿到手里就爱不释手。我之前对用户界面设计还停留在基础阶段,总觉得那些炫酷的动效离自己很远,操作起来也复杂得让人望而却步。可是这本书,它就像一位耐心的老前辈,一步步把我领进了这个充满创意的世界。作者的讲解非常细腻,哪怕是对动效原理一窍不通的新手,也能很快明白其中的奥秘。我特别喜欢它对“动效心理学”的阐述,这让我明白了为什么某些动效能让人感到愉悦,而另一些却会惹人厌烦。书中列举的案例分析更是精彩绝伦,从一个简单的按钮点击反馈到复杂的页面切换,都剖析得淋漓尽致。读完后,我感觉自己的设计思维一下子被打开了,不再是生硬地堆砌动画效果,而是开始思考如何用动效来优化用户体验,让产品“活”起来。那种成就感,真是难以言喻。我强烈推荐给所有想让自己的作品脱颖而出的设计师们,它绝对是一本能让你功力大增的宝典。
说实话,我抱着试试看的心态买了这本书,没想到里面蕴含的知识深度远超我的预期。我本以为它会是那种浮于表面的“速成指南”,教你几个现成的代码片段,然后就结束了。结果呢?它深入到了动效背后的数学原理和设计哲学。尤其是关于“时间函数”和“缓动曲线”的讲解部分,作者用非常形象的比喻和清晰的图示,把原本枯燥的数学概念变得生动有趣。我过去总是依赖于一些工具库默认的曲线,但现在我能根据不同的情境,自己定制出最恰当的运动轨迹了。这不仅仅是技术上的提升,更是一种设计理念的升华。作者对细节的把控到了令人发指的地步,哪怕是一个微小的过渡,他都能告诉你如何通过精确的节奏控制,来引导用户的注意力。这本书不只是教你“怎么做”,更重要的是教你“为什么这么做”,这种底层逻辑的梳理,对于想成为高级设计师的人来说,价值千金。
噱头
书籍名称是《动效大爆炸》,个人觉得《AE的安装与脚本介绍》更合适一些。
坑逼啊,还不如介绍Ae的工具书,全书基本无干货,前面一堆大牛推荐,他们不看吗瞎眼吗,初级动效水平的也都不用看了 浪费时间
这书真的很水,不知道这个作者其它能力怎么样,只是想说,如果能以书来评价作者能力,那么给1星真的足够了,内容讲的真的很浅。。
坑逼啊,还不如介绍Ae的工具书,全书基本无干货,前面一堆大牛推荐,他们不看吗瞎眼吗,初级动效水平的也都不用看了 浪费时间