通过本专题，您可以先学习基础的产品+交互动效基础，进而学习动效可用性原理、动效表达式等提高对动效的认识。另附上两个寻找和保存动效灵感的小技巧，帮你补充动效库。最后附上让动效落地的方法，让你的动效不止于酷炫。
2021-03-15更新
本文将基于界面整体设计框架，结合用户心智模式，系统介绍动效设计需要考虑到的全部维度。
有很多朋友问移动端实现动效的方法，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。
之前的文章已经介绍了 Lottie 是什么，以及如何导入/导出设计文件，那么今天就为大家讲解如何修复渐变。
之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。
本文将以一个实际动效案例的导入流程为例，帮助大家了解高效导入设计文件的方法。
最近阿里推出的动效神器「犸良」刷屏设计圈，但是很少人知道犸良依靠的是更加强大的Lottie，用它做起动效来，简直如虎添翼，今天这篇教你用好这个神器！
相信很多人都会留意到 手机QQ 切换底部标签栏时有趣的动画效果，Tab bar 作为整个 APP 的第一触点，该如何做好它的动效设计，有哪些动效设计类型和组合方式？本文腾讯设计师为你全面揭秘！
作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量高效的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUXAEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组高效插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 ...
作为2019年第一个爆款刷屏 H5 项目，「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面，也包含了不少有意思的动效。大家应该能想到，这些动效的设计是出自我们设计团队，但你可能没想到的是，实现这些动效的前端代码也有一大部分是设计师「写」的哦。据不完全统计，可能有上万行之多，为什么会这么多，看完文章就知道了。
@WOOD短腿木 ：老话说得好，人靠衣装设计靠包装。无论你是UI设计师/UX设计师/App独立开发者，一个好的展示模板能让你的作品瞬间提升气质，在交稿时俘获甲方爸爸躁动的心。今天神器小分队带来的这个神器，可以帮你快速生成UI界面的3D展示效果；无需学建模、无需学AE，只需要简单几步，就能产出堪比苹果宣传片的展示动效，简直方便到没朋友。
@N可可洛N、@爆炒地瓜：设计工作室 Zajno Crew，拥有一支年轻的设计团队，他们创新、大胆，大刀阔斧的展开工作，创立三年时间就在美国和乌克兰先后创立分部，他们的设计作品在专业平台 Dribbble、Behance、CSS Design Awards 上备受好评，他们热爱分享，分享案例效果图的时候也能将设计背景、设计思路一一展示，强烈为大家推荐 Zajno Crew！Dribbble：https://dribbble.com/zajno△ Zajno Crew Dribbble页面优...
如今丰富细腻的 App 动效遍布移动端优秀应用界面中，为用户提供了良好的动态沉浸式体验，动效设计在产品研发过程中也越来越被认可和重视。通过本文，你将轻松了解到关于动效设计的一些必备知识：究竟为什么要设计动效？它的意义和价值是什么？
本文主要讲述了为什么做动效，好的动效设计的标准是什么，如何做动效设计，以及如何使自己设计的动效完美落地。看完本文你会学到：1. 为什么需要动效设计？什么是动效设计？
本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。一. 本指南的适用范围本指南适用于UI界面中交互微动效，属于功能性动效。与聚焦于提供娱乐体验的动效（如动画影片、游戏动效等）不同，功能性动效的设计，有清晰的逻辑目的，聚焦于帮助用户理解当前所处的状态。
本文将市面上最常被使用的动效进行了一次总结并逐条阐明这些设计背后的原理，每条原理后面我都会为朋友们选出一些大家最常用的 App 作为例子，顺手打开就能体验啦。缓动（Easing）、偏移量和延迟（Offset & Delay）主要与时间相关。父子关系（Parenting）用于阐述元素之间的关系。
@Damon_Yuen ：如果你是一位AE新手，表达式对你来说可能会有点可怕。我经历了一段时间，才能慢慢开始自己在AE中使用表达式，而不是去从Google里面复制粘贴。想进阶学习的话，来试试这5个AE表达式，它会让你的工作流程更加高效。
扁平化的兴起，现在越来越流行动效设计，特别对于移动端，对交互动效要求是很高的，今天为大家整理一些以展示动效为主的网站，对交互设计师来说是很好的灵感发源地。UI MovementUI movement此站更新比较快，主要展示移动APP的动效界面为主。Design PatternsDesign Patterns是Codepen的一个频道，主要对一些交互友好的代码集合到一起，并分类，设计师可以很方便的从里面找自己想看的动效元素，而且已经实现了代码编写，还能真实拿来使用。
俞静：经常在网上看到一些介绍手机APP动效设计的文章，一直好奇这些动态图片是怎么保存下来的。今天把这个小技能分享出来，UI设计师和想学优秀动效的同学记得收藏！自己在日常工作中也有看到好的动效设计要保存下来的需求——留着APP太占手机空间，删了APP要用的时候又无法跟开发描述清楚。
@TCWison （阿里高级视觉设计师）：随着软件与终端的发展，如今的用户体验设计中动效的作用正变得越发重要，也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中，相信大家常会有这样的疑问：怎样才能将自己精心设计的动态效果，准确的传达给工程师，避免实现的偏差呢？下面我想根据自己的经验，抛砖引玉，和大家聊一下这个话题。
UI动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。但是如何做出可交付能落地的动效，却成了很多人不得不面对的难题。本系列的动效设计合作指南由交互设计师+前端工程师撰写而成，帮你做出好用能用的动效设计。
发表评论赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
扁平插画绘制专业教程
已累计诞生 61 位幸运星
发表评论
Wo~本文的评论还空着，快来抢沙发
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓