动效设计 - 最美UI

大厂硬核干货！深入分析弹性动效的应用及原理

弹性是动态设计领域中一种常见的表达方式。不同于影视特效、动画 CG 等设计输出即为最终产物的生产环境，UI 动效始终面临着动效还原带来的种种问题，弹性动效的还原就是其中之一。

动效设计弹性动效设计工具

这些小小的改变，能够让UI动效更上一层楼

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分，经过仔细打磨的 UI动效对于整个界面的提升是显著的。

UI动效动效设计用户体验经验分享转场动效

谷歌设计师：只要掌握这两个方法，帮你做好动效设计！

今天这篇文章，讲的又是大家感兴趣的动效知识。现如今，动效对于品牌的传达变得越来越重要，所以我想尽可能多的去搜集动效相关的资料，跟大家一起，紧跟趋势，把这块的能力掌握好。

UI动效动效设计移动端动效谷歌设计

别轻易说你会动效！这10个动画误区你都犯过吗？

10个动效案例，让大家避开动效误区。一、走路在做走路动画的时候，除了要把脚与地面的接触做出来，更应该要注意的是身体不同部位的跟随与节奏。

AE动效 MG动效动效设计

如何用最经典的迪士尼动画设计原则赋予 UI 灵性？

学习动画的同学应该都知道迪士尼的动画设计12原则吧？这可能是传统动画领域，最为重要、价值不可估量的原则之一。它是 Ollie Johnston 和 Frank Thomas 在他们的书《生命的幻觉》中所提出的。虽然这些原则最初是应用

ui设计交互动画动效设计

老司机干货！4个技巧让你玩转轻量级动效

MG 全称是 Motion Graphic（动态图形），是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态图形在视觉表现上使用的是基于平面设计的规则，而在技术上使用的是动画制作手段。简单来说

MG动效动效设计轻量级动效

基础科普！最常见的四种移动端功能性动效全面总结

功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味，本文就来谈谈这四种功能性动效在移动端的使用。

AE动效 MG动效 UI动效功能性动效动效设计移动端动效

看似花哨的UI概念动效，并不只是为了耍酷而存在

在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用，什么样的动效更优秀等等，这样的探讨层出不穷。在 UI 所涉及到的各种动画和动效当中，概念动效是被讨论的最多的话题。充满实验性的概念

UI动效 UI动画 ui设计分享动效设计用户体验

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

作为2019年第一个爆款刷屏 H5 项目，「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面，也包含了不少有意思的动效。大家应该能想到，这些动效的设计是出自我们设计团队，但你可能没想到的是，实现这些动效

UI动效动效交付动效设计网易UEDC 网易云音乐网易设计

动效到底有哪些作用？来看高手的全面总结！

编者按：本文由负责Material Design 动效设计的谷歌设计师撰写，帮助大家深入理解动效的作用，才能做出更好的动效设计。

UI动效动效设计微动效谷歌设计师

用一篇文章，帮你掌握基础实用的动效技能

对如今的 UX 设计师来说，会点动效基本已是常规操作了。作为 UX 设计师，动效可以辅助的产出可以涵盖界面交互动效、项目宣传 MG动画、产品吉祥物表情包、年终汇报 PPT 等等。这些技能点虽然广，但是只需要掌握基础

AE动效 UI动效动效动效设计教程经验分享

超实用！18种常用AE表达式解析

很多朋友面对AE表达式望而生畏，不过再难的东西都会有它最本质的规则，如果你理解了基本的原理和常用的表达式命令，这也许会提高你的工作效率。我通过自己对AE表达式的理解，尝试用最简单的语言解释一些看似复杂的操

AE动效 AE表达式动效设计

高手都在用！9个实用小技巧提升你的动效设计功力

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初

UI动效功能性动效动效设计微交互微动效移动端动效

只需要懂点高中物理知识，就能让你做出优秀动画！

化繁为简，是解决难题的好办法。今天的文章将会教你如何拆分一个动画，以及如何使得动画符合一般物理学规律而变得生动。

AE动效 UI动效功能性动效动效设计

Uber高级产品设计师告诉你，她是如何完成100天动画设计挑战的

编者按：百日挑战是一个很火的活动，旨在通过坚持每日练习提高自己的设计能力。但在过程中很多人会因为没有计划，或者思维枯竭而放弃。本文作者将会在文章中列举大量案例以及设计思路，非常详细的介绍她是如何完成这

动效设计百日挑战自学方法设计师专访

写给新人的App动效设计方案基础科普

什么是动效移动APP交互动效：包括那些能够为产品赋予生机的动态的界面元素及视觉效果，这些交互效果通常与特定的响应行为相关，甚至包括那些与交互行为没有直接关联的临时状态。

ui设计动效动效设计

终极指南！超全面的UI动效基本规则总结

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯，交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言，都是一个不可多得的重要组成部分。但是当我浏览相关的文

动效设计微动效经验分享转场动效

花两个月时间做的动画宣传片，为你揭秘制作全过程

有一个 UI 设计师，用了两个多月时间做了一部 Element 动画宣传片，他到底经历了什么？

Element 动效设计动画宣传片组件库饿了么

做好直接用！动效神器 Lottie 基础入门教学

疫情期间，在线生活迎来爆发，视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。

AE动效 Lottie 动效动效设计神器神器下载

一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）

大家好，我是彩云。在动画落地的过程中，配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享，将会讲到Lottie这个插件怎么来的，为什么会叫Lottie？使用过程中有哪些需要注意的？具体又该如何正确使用？

AE动效 Lottie 动效动效设计落地动效

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

大家在使用Lottie输出矢量渐变图形的时候，应该有遇到过设计的渐变效果无法正常显示的问题。无论你设计的效果是什么样的，导出以后都变成了黑白渐变。那么这个问题可以修复吗？答案是肯定的。

Lottie Lottie动效动效设计

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

我在上一篇文章《动效设计没那么难！让谷歌动效设计师带你入门》当中，已经通过实际的案例，分享了动效设计并不难的原因。我们着力推动 Material Design ，我也希望设计师能够更好地使用我所熟悉和喜爱的 Material

AE动效 Google Material Design UI动效动效设计动效设计培训

让动效更酷炫！4 个常见且常用的 SVG 交互动画方法

本文介绍了 4 种常见的 SVG 交互动画方法，帮你了解 SVG 交互动画的原理和简单方法。

SVG SVG动画交互动画交互设计动效设计

超全面！写给设计师的动效知识库

Motion Graphic 也称为 Mg 或者 Mograh，通常翻译为动效或者动态图形。动效是什么？

AE动效 MG动效动效设计

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

一直有很多朋友会问一些关于移动端实现动效的方法，平时也会给大家做一些解答，但是可能没有那么系统性，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。

动效落地动效设计移动端动效

动效设计没那么难！让谷歌动效设计师带你入门

编者按：UI中动效设计本没有那么玄乎，作为 Google 旗下 Material Design 团队中动效设计的负责人之一，Jonas Naimark 对于动效本身有着更为透彻的认知，这也促成了今天的这篇文章。动效不难，想入门很简单！

AE动效 Material Design 交互动画加载动画动效设计经验分享

想让交互更走心？这4种可见状态微交互技巧一定要学会

在经典的尼尔森十大启发式当中，「系统状态可见性」可以说是如今交互设计领域当中，最为重要的原则之一。通过向用户展现当前的状态，让用户拥有对系统的控制权，建立用户对于产品的信任感，这也是这种设计启发式的最

交互设计动效设计微交互用户体验设计经验分享

深度分析12条经典动效设计原理，提升产品可用性！

大家好，我是Clippp，今天分享的文章是「动效」设计。动效在产品设计中扮演着重要角色，它的好坏与否直接影响了用户的使用体验。

UI动效 ui设计动效设计微动效

B 端产品如何做动效设计？用实战案例告诉你！

在无限的信息体量和有限的用户浏览范围之间求得平衡，让用户看到全部创作中他最想看到的那一面。

B端产品产品设计动效落地动效设计

为什么越来越流行的酷炫动效，你不一定要学？

写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年，其中提到：「我不认为 Dribbble 解决了什么问题，你期望在 400*300px 的矩形中解决多少现实中的问题？Dribbble

AE动效 UI动效动效设计

历时2个月，整理了这篇动效落地输出指南！

针对动效输出的选择变得越来越多，然而作为设计师仅仅对动效输出有所了解，往往产出的结果还是不尽如人意。了解动效落地背后的原理，可以帮助我们在设计的前期阶段，就了解应该如何做设计才能更容易的对接和落地。

动效落地动效设计

腾讯设计师：减少页面跳转的10个方法总结

我们在进行设计的时候，往往遇到以下的场景：这就是信息的无限性和手机屏幕的有限性之间的矛盾，如何把信息合理的展示给用户，需要我们重新对信息进行组织分类，使信息能更高效有序地被用户认知。在进行信息设计的

App设计交互设计功能性动效动效设计微动效腾讯设计

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

一直有很多朋友会问一些关于移动端实现动效的方法，平时也会给大家做一些解答，但是可能没有那么系统性，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。

动效落地动效设计移动端动效

想让交互更走心？这4种可见状态微交互技巧一定要学会

在经典的尼尔森十大启发式当中，「系统状态可见性」可以说是如今交互设计领域当中，最为重要的原则之一。通过向用户展现当前的状态，让用户拥有对系统的控制权，建立用户对于产品的信任感，这也是这种设计启发式的最

交互设计动效设计微交互用户体验设计经验分享

用一篇文章，让你掌握「微交互」的基础知识！

编者按：本文总结了微交互的基础知识和三大作用，作者用大量优秀的微交互案例演示让你直观感受到微交互的强大，适合对微交互不熟悉的新人学习。

交互设计动效设计微交互情感化设计

通过这篇文章，帮你彻底搞懂微交互

一、微交互到底是什么？微交互通常关注于单个事件或者单个任务，这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的目的是让用户感觉顺畅、愉悦，设计师借此创造出吸引人或者令人高兴的瞬间，或者说，让用户

交互设计动效设计微交互用户体验经验分享

如何做好微交互，增加产品魅力值？

之所以喜欢这篇文章，并将它翻译出来，其原因是文中的那些动画打动了我，仔细思考每一个动画都能让自己产生很多联想和灵感，借此分享给大家，也是希望大家能有所收获。

交互动画动效设计微交互用户体验用户测试经验分享

内部教程！超详细的支付宝设计规范之交互篇

一、可用性价值动效很容易被象成某种增强愉悦的东西，自身并不具备什么价值。常常被当做可有可无部分，通常作为最后一步点缀。实际上，动效是一种更高级的设计展现形式：表达界面元素在交互事件下的行为动作。它在用

交互设计产品设计规范动效动效设计支付宝用户体验

阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效

阿里作为中国互联网企业的标杆，不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业，在各个专业领域，给专业人员提供了优质的工具与服务。对设计师而言，无论是每年一度的 UCAN大会，还是 Kitchen、语雀、

UI动效动效神器动效设计犸良

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

动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展

Lottie 动效设计动效还原犸良

想用 Lottie 做动画？先收下这份常见错误和解决方法总结

Lottie 是 Airbnb 推出的一种 SVG 动画解决方案，它可以跨平台播放，并解决了动画落地难的问题。当设计师做完动画只需使用 bodymovin 将动画导出成文件再传给前端，前端就能非常快速地引入文件和播放动画。对于 Lo

Lottie 动效落地动效设计

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

上一篇文章《比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）》已经系统地为大家讲解了 Lottie 动效的基本知识，相信很多同学都跃跃欲试了。而在我们使用 AE 制作动效的过程中，往往会遇到很多问题，第一个大

AE动效 Lottie 动效导入动效设计懿凡设计犸良

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

动效导出类型一般情况下我们导出的动效可以分为三种类型。 1. 纯矢量图形动效

AE动效 Lottie 动效动效设计