动效设计 - 优设网 - 学设计上优设

设计师必学的73个基础动效设计！附全面系统的免费入门教程

今天就为大家介绍一个动效设计合集网站，并推荐一系列AE基础动效入门学习的高质量免费教程，一起来看看吧~

夏花生 4.1w 人阅读 2022/07/04 动效教程 动效设计

1

想让设计更酷炫？先学会 6 种常用的动效落地方案（附插件下载）

本文给大家分享在可视化设计中最常用的 6 种动效落地方案，手把手教你如何配合开发将小动效在页面中展示出来。

Mr.小六 2.9w 人阅读 2022/05/07 3D神器 动图格式

2

如何让动效又快又好落地？我分析了这5种格式的优缺点！

本文总结了5种常用的动图格式，以及输出动图过程遇到的问题和解决方法，帮助大家选择合适的动图格式。

ALEI 4.8w 人阅读 2022/02/10 UI设计 动图格式

3

比Lottie还好用！腾讯新晋免费动效设计神器 PAG

如何辅助设计师设计高性能炫酷的动画、如何将动画准确无误的还原到终端 APP 上是业界不断探索和解决的问题。

ISUX 6.1w 人阅读 2022/01/07 PAG 动效神器

4

腾讯出品！AE 动效设计必备指南（附超多神器和技巧）

本文从 AE 的插件、操作以及落地三个方面，为大家整理了一波实用技巧。

ISUX 11.7w 人阅读 2021/10/25 AE动效 AE设计

5

网易出品「你的人格主导色」，是如何从零开始做动效设计的？

前段时间大家有被《你的人格主导色》这个 H5 刷屏了吧，今天我来和大家聊聊这个项目中动效设计是怎么落地的。

土拨鼠 5.2w 人阅读 2021/07/06 UI设计 你的主导色

6

7000+超详细干货！系统掌握动效设计模式（上）

本文将基于界面整体设计框架，结合用户心智模式，系统介绍动效设计需要考虑到的全部维度。

京东JellyDesign 5.3w 人阅读 2021/01/29 动效 动效设计

7

动效不知如何落地？看完腾讯高手的经验就明白了

有很多朋友问移动端实现动效的方法，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。

土拨鼠 4.3w 人阅读 2020/08/25 动效落地 动效设计

8

Lottie 动效设计完全指南：渐变修复

之前的文章已经介绍了 Lottie 是什么，以及如何导入/导出设计文件，那么今天就为大家讲解如何修复渐变。

土拨鼠 5.6w 人阅读 2020/04/07 Lottie Lottie动效

9

比阿里犸良还强大！Lottie动效设计完全指南

之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。

土拨鼠 5.8w 人阅读 2019/08/18 AE动效 Lottie

10

比阿里犸良还强大！Lottie动效设计完全指南（导入篇）

本文将以一个实际动效案例的导入流程为例，帮助大家了解高效导入设计文件的方法。

程远 5.3w 人阅读 2019/07/25 AE动效 Lottie

11

比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）

最近阿里推出的动效神器「犸良」刷屏设计圈，但是很少人知道犸良依靠的是更加强大的Lottie，用它做起动效来，简直如虎添翼，今天这篇教你用好这个神器！

程远 12.0w 人阅读 2019/07/15 Lottie 动效设计

12

超全面！大厂都在用的 Tab Bar 图标动效设计类型总结

相信很多人都会留意到手机QQ 切换底部标签栏时有趣的动画效果，Tab bar 作为整个 APP 的第一触点，该如何做好它的动效设计，有哪些动效设计类型和组合方式？本文腾讯设计师为你全面揭秘！

DD🚀 7.5w 人阅读 2019/07/08 IDfor 动效设计

13

如何让动效完美还原？送你两个超厉害的免费插件！

作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量高效的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUXAEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组高效插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 ...

程远 6.4w 人阅读 2019/03/16 AEUX AE动效

14

跪了！揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

作为2019年第一个爆款刷屏 H5 项目，「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面，也包含了不少有意思的动效。大家应该能想到，这些动效的设计是出自我们设计团队，但你可能没想到的是，实现这些动效的前端代码也有一大部分是设计师「写」的哦。据不完全统计，可能有上万行之多，为什么会这么多，看完文章就知道了。

程远 5.6w 人阅读 2019/02/27 2018 听歌报告 UI动效

15

过稿神器！动效视觉堪比苹果宣传片的3D样机DesignCamera

@WOOD短腿木：老话说得好，人靠衣装设计靠包装。无论你是UI设计师/UX设计师/App独立开发者，一个好的展示模板能让你的作品瞬间提升气质，在交稿时俘获甲方爸爸躁动的心。今天神器小分队带来的这个神器，可以帮你快速生成UI界面的3D展示效果；无需学建模、无需学AE，只需要简单几步，就能产出堪比苹果宣传片的展示动效，简直方便到没朋友。

程远 12.3w 人阅读 2019/01/28 3D建模 DesignCamera

16

优设专访！火遍追波的设计工作室Zajno Crew是如何设计动效的？

@N可可洛N、@爆炒地瓜：设计工作室 Zajno Crew，拥有一支年轻的设计团队，他们创新、大胆，大刀阔斧的展开工作，创立三年时间就在美国和乌克兰先后创立分部，他们的设计作品在专业平台 Dribbble、Behance、CSS Design Awards 上备受好评，他们热爱分享，分享案例效果图的时候也能将设计背景、设计思路一一展示，强烈为大家推荐 Zajno Crew！Dribbble：https://dribbble.com/zajno△ Zajno Crew Dribbble页面优...

程远 2.5w 人阅读 2018/12/03 优设专访 设计团队

17

基础科普超全面的 APP 动效设计必备知识总结

如今丰富细腻的 App 动效遍布移动端优秀应用界面中，为用户提供了良好的动态沉浸式体验，动效设计在产品研发过程中也越来越被认可和重视。通过本文，你将轻松了解到关于动效设计的一些必备知识：究竟为什么要设计动效？它的意义和价值是什么？

程远 5.4w 人阅读 2018/04/10 交互体验 动效

18

产品动效超全面！产品动效设计全方位科普手册

本文主要讲述了为什么做动效，好的动效设计的标准是什么，如何做动效设计，以及如何使自己设计的动效完美落地。看完本文你会学到：1. 为什么需要动效设计？什么是动效设计？

程远 3.9w 人阅读 2017/11/17 动效设计 动效软件

19

交互动效超全面！腾讯出品的交互微动效设计指南

本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。一. 本指南的适用范围本指南适用于UI界面中交互微动效，属于功能性动效。与聚焦于提供娱乐体验的动效（如动画影片、游戏动效等）不同，功能性动效的设计，有清晰的逻辑目的，聚焦于帮助用户理解当前所处的状态。

程远 3.9w 人阅读 2017/07/03 动效设计 微动效

20

动效可用性超实用！12 条提高产品可用性的动效设计原理（附案例）

本文将市面上最常被使用的动效进行了一次总结并逐条阐明这些设计背后的原理，每条原理后面我都会为朋友们选出一些大家最常用的 App 作为例子，顺手打开就能体验啦。缓动（Easing）、偏移量和延迟（Offset & Delay）主要与时间相关。父子关系（Parenting）用于阐述元素之间的关系。

程远 3.2w 人阅读 2017/06/05 动效 动效设计

21

动效表达式学习动效设计表达式，你应该从这5个开始

@Damon_Yuen ：如果你是一位AE新手，表达式对你来说可能会有点可怕。我经历了一段时间，才能慢慢开始自己在AE中使用表达式，而不是去从Google里面复制粘贴。想进阶学习的话，来试试这5个AE表达式，它会让你的工作流程更加高效。

程远 2.9w 人阅读 2016/06/20 动效表达式 动效设计

22

动效灵感让界面动起来！3个移动动效设计必备的灵感收集站

扁平化的兴起，现在越来越流行动效设计，特别对于移动端，对交互动效要求是很高的，今天为大家整理一些以展示动效为主的网站，对交互设计师来说是很好的灵感发源地。UI MovementUI movement此站更新比较快，主要展示移动APP的动效界面为主。Design PatternsDesign Patterns是Codepen的一个频道，主要对一些交互友好的代码集合到一起，并分类，设计师可以很方便的从里面找自己想看的动效元素，而且已经实现了代码编写，还能真实拿来使用。

程远 5.3w 人阅读 2015/10/21 动效设计 灵感网站

23

动效灵感实用小技巧！iPhone上看到好的动效设计，如何保存成GIF？

俞静：经常在网上看到一些介绍手机APP动效设计的文章，一直好奇这些动态图片是怎么保存下来的。今天把这个小技能分享出来，UI设计师和想学优秀动效的同学记得收藏！自己在日常工作中也有看到好的动效设计要保存下来的需求——留着APP太占手机空间，删了APP要用的时候又无法跟开发描述清楚。

程远 3.0w 人阅读 2016/05/23 gif动画 ps技巧

24

动效落地超实用！如何准确的向工程师传达动效设计？

@TCWison （阿里高级视觉设计师）：随着软件与终端的发展，如今的用户体验设计中动效的作用正变得越发重要，也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中，相信大家常会有这样的疑问：怎样才能将自己精心设计的动态效果，准确的传达给工程师，避免实现的偏差呢？下面我想根据自己的经验，抛砖引玉，和大家聊一下这个话题。

程远 3.0w 人阅读 2015/03/04 动效设计 经验分享

25

动效落地深入浅出！交互+前端共同撰写的动效设计合作指南

UI动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。但是如何做出可交付能落地的动效，却成了很多人不得不面对的难题。本系列的动效设计合作指南由交互设计师+前端工程师撰写而成，帮你做出好用能用的动效设计。

程远 2.3w 人阅读 2017/06/18 动效交付 动效设计

26

菜单 优设网uisdc.com 优设网 - 学设计上优设

开通优设VIP星球

尊享13项VIP特权 持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

领取更多设计师实用特权

您还未登录

登录后即可体验更多功能

动效设计 《从零开始学习动效设计》

26 篇文章 1401993 位观众

用户研究

常见的用研方法+专业的用研报告

查看专题

大厂神器

顶尖团队出品，质量有保障

查看专题

设计流程

从业余新人跨入专业设计师的那道坎

查看专题

设计史太浓

看故事，学设计

查看专题

免费图库

高质量的免费可商用图片都在这儿了！

查看专题

正序 倒序

夏花生 4.1w 人阅读 2022/07/04 动效教程动效设计

Mr.小六 2.9w 人阅读 2022/05/07 3D神器动图格式

ALEI 4.8w 人阅读 2022/02/10 UI设计动图格式

ISUX 6.1w 人阅读 2022/01/07 PAG动效神器

ISUX 11.7w 人阅读 2021/10/25 AE动效AE设计

土拨鼠 5.2w 人阅读 2021/07/06 UI设计你的主导色

京东JellyDesign 5.3w 人阅读 2021/01/29 动效动效设计

土拨鼠 4.3w 人阅读 2020/08/25 动效落地动效设计

土拨鼠 5.6w 人阅读 2020/04/07 LottieLottie动效

土拨鼠 5.8w 人阅读 2019/08/18 AE动效Lottie

程远 5.3w 人阅读 2019/07/25 AE动效Lottie

程远 12.0w 人阅读 2019/07/15 Lottie动效设计

DD🚀 7.5w 人阅读 2019/07/08 IDfor动效设计

程远 6.4w 人阅读 2019/03/16 AEUXAE动效

程远 5.6w 人阅读 2019/02/27 2018 听歌报告UI动效

程远 12.3w 人阅读 2019/01/28 3D建模DesignCamera

程远 2.5w 人阅读 2018/12/03 优设专访设计团队

程远 5.4w 人阅读 2018/04/10 交互体验动效

程远 3.9w 人阅读 2017/11/17 动效设计动效软件

程远 3.9w 人阅读 2017/07/03 动效设计微动效

程远 3.2w 人阅读 2017/06/05 动效动效设计

程远 2.9w 人阅读 2016/06/20 动效表达式动效设计

程远 5.3w 人阅读 2015/10/21 动效设计灵感网站

程远 3.0w 人阅读 2016/05/23 gif动画ps技巧

程远 3.0w 人阅读 2015/03/04 动效设计经验分享

程远 2.3w 人阅读 2017/06/18 动效交付动效设计

发评论！每天赢奖品

点击 登录 后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们

Figma+Framer

已累计诞生 261 位幸运星

发表评论

2018-07-15 来自 优设惊喜部 ChickOS

↓ 下方为您推荐了一些精彩有趣的文章热评 ↓

大家都在看

AI绘画

9篇文章

大厂实战案例复盘

13篇文章

字体设计

32篇文章

免费图库

43篇文章

新拟态设计

8篇文章

设计史太浓

87篇文章

B 端产品设计

菜单优设网 - 学设计上优设

尊享13项VIP特权持续新增

动效设计《从零开始学习动效设计》

正序倒序

ISUX 6.1w 人阅读 2022/01/07 PAG 动效神器

ISUX 11.7w 人阅读 2021/10/25 AE动效 AE设计

土拨鼠 5.6w 人阅读 2020/04/07 Lottie Lottie动效

土拨鼠 5.8w 人阅读 2019/08/18 AE动效 Lottie

程远 5.3w 人阅读 2019/07/25 AE动效 Lottie

程远 12.0w 人阅读 2019/07/15 Lottie 动效设计

DD🚀 7.5w 人阅读 2019/07/08 IDfor 动效设计

程远 6.4w 人阅读 2019/03/16 AEUX AE动效

程远 5.6w 人阅读 2019/02/27 2018 听歌报告 UI动效

程远 12.3w 人阅读 2019/01/28 3D建模 DesignCamera

程远 3.0w 人阅读 2016/05/23 gif动画 ps技巧

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

2018-07-15 来自优设惊喜部 ChickOS

微信扫码添加管理员招财

微信号：扫码添加