资源介绍
视频数量：6个
总时长：2小时41分
课程介绍：
UI动效设计进阶指南
你有没有遇到过这样的场景：打开一个网页或者App，某个图标突然"呼吸"了一下，某个按钮被按下时优雅地弹了一下，页面切换时元素像水流一样滑过去——你心里冒出一句"这个动画真舒服"，然后忍不住多看两秒。好的UI动效就是有这样的魔力，它不像花哨的特效那样抢眼球，却能让整个产品的体验质感提升一个档次。但反过来你也见过不少翻车案例：动画卡顿、节奏拖沓、跟用户操作完全对不上，甚至在加载的时候转圈转得让人烦躁。动效做好了是加分项，做差了就是减分项，差距就在细节和功夫里。
这门课就是为那些已经掌握了After Effects基础操作、想要专门攻破UI动效设计的人准备的。课程总时长两个半小时左右，分成六个章节，每一节都围绕一个真实的工作场景展开讲解，带着你从零开始一步步完成实际项目。课程的特别之处在于，它不会花时间讲那些零散的知识点，而是用一个个完整的动画案例串起所有需要掌握的技能，让你在做项目的过程中自然就把技法练熟了。
课程一开始会先帮你准备好三件趁手的"兵器"：Motion Tools Pro、Bodymovin和Overlord。Motion Tools Pro是免费的，安装简单，但它能在After Effects里帮你快速处理各种形状层的操作，省去大量重复劳动。Bodymovin是导出Lottie动画的关键桥梁，学过UI动效的人都知道，Lottie格式是现在前端开发最青睐的动画方案，几乎所有主流App和网站都在用它。Overlord虽然需要付费，但它的价值在于能直接把Illustrator里的矢量图层无缝导入到AE中，免去了手动重建形状的繁琐过程。这三个工具搭配使用，能让你的动画制作效率翻上好几倍。课程里会演示它们的安装和基本配置，跟着操作就行，不用担心门槛问题。
准备好工具之后，就进入第一个实战项目了。课程会带你做一个Wi-Fi图标的循环动画，这个案例看似简单，实际上包含了UI动效里最基础也最核心的几个要素：循环节奏、缓动曲线、图层关系处理。你会先在Illustrator里检查和整理矢量源文件，确认尺寸是标准的800×800，然后在After Effects里创建对应大小的合成，设置好帧速率和时间线。接下来就是关键的动画制作环节——怎么让Wi-Fi信号的弧线从内向外依次亮起，怎么控制每一层之间的时间间隔，怎么用缓动函数让动画看起来自然而不是机械的匀速运动。这些听起来不难的细节，恰恰是区分业余和专业的分水岭。课程里会一步步带你调参数、做对比，让你直观感受到不同设置带来的效果差异。
完成图标动画之后，课程会进入更复杂的领域：角色动画和插画动画。这一节的内容特别实用，因为很多UI设计师接到客户需求时，并不仅仅是做一个按钮的微交互，而是需要为整个页面甚至整个品牌做一套完整的动效方案。课程通过一个真实的客户案例——一个网站加载动画——来讲解怎么处理这种需求。你会看到一个加载动画是怎么从最初的草图概念，变成一个首尾相接、完美循环的Lottie动画。讲师会详细解释为什么加载动画必须做到起点和终点完全一致，这样无论用户网速快慢，动画在等待期间都能保持流畅自然。这种细节是很多教程不会讲的，但实际工作中却非常重要。
文本动画和面向客户的动画制作是另一大重点。UI动效中文字动画无处不在——标题的淡入、按钮文字的弹跳、滚动时的逐字显现，每一种都有不同的处理思路。课程会演示几种常用的文字动画技巧，包括怎么用预设效果快速出活儿，怎么根据品牌调性定制独特的文字动效。同时，讲师会分享一些跟客户沟通的实战经验，比如怎么在动画中预留可替换的文本层，怎么设置好参数让客户后期能自己调整字号字色，这些看似跟技术无关的"软技能"，往往是新手最容易忽略的部分。
进阶的部分会讲到复杂动画和工作流管理。当动画元素变多、时间线变长、文件体积变大的时候，怎么保持条理清晰，怎么高效协作，怎么避免修改一个参数导致整个动画崩盘，这些都是实打实的工程问题。课程里会展示一些专业动画师的工作习惯和文件组织方式，比如怎么分层命名、怎么用预合成整理逻辑、怎么用表达式简化重复操作。学完这些，你的制作流程会从"手忙脚乱"变成"井井有条"，再复杂的项目也能稳住阵脚。
最后一节是关于Bodymovin的详细讲解和导出选项的全面介绍。Lottie动画的导出并不只是点一个按钮那么简单，分辨率设置、帧率选择、文件压缩、兼容性测试，每一个选项都会影响最终呈现在前端的效果。课程会把这些设置项逐一拆开来讲，告诉你什么场景下应该选什么参数，为什么要这样选，以及怎么检查导出后的文件是否有问题。这一部分内容对于想要把动画真正交付给开发人员的设计师来说至关重要，很多动画"看起来好看但上线之后一塌糊涂"，问题往往就出在导出环节。
整门课学完之后，你能建立起一套完整的UI动效工作流程：从接到需求、梳理概念、制作动画、优化细节，到最终导出可用的Lottie文件交给开发，每一步都知道该做什么、怎么做、为什么要这么做。你不再需要对着时间线发呆不知道从哪儿下手，也不再害怕客户提出的修改需求，因为你的文件结构足够清晰，参数调整足够灵活。这门课适合那些已经会用After Effects基本工具、想要专攻UI动效方向的设计师，也适合那些在工作中经常需要自己出动画方案、需要跟开发协作交付的UI设计师和产品设计师。如果你平时只是做一些简单的图标微交互，想要挑战更复杂的项目，这门课正好是一个合适的台阶。
动效设计不是一门玄学，它是有方法、有规律、有最佳实践的。这门课的价值在于，它把这些散落在不同地方的经验和技巧，浓缩成了一条清晰的成长路径，让你可以少走弯路，更快地达到专业水准。