动效设计

前言 动画工具 LottieFiles 前不久更新了 Figma 插件，支持在 Figma 中快速创建单帧或多帧动画。其最新推出的极简动画设计工具 Lottie Creator 也正在公测中。 看得出，LottieFiles 正在为降低动画设计的技术门槛而努力。但这一切，都是得益于 Lottie 的出现。 我们工作中会使用很多工具产品，却鲜少关注产品的幕后，这篇文章就来带你全面了解一下 Lotti…

这个动效工具合集真的是够长啊！上半部分《要做动效？这75款动效工具让你无所不能（下）》中已经为你推荐了35款，剩下的40款工具就在下面： 36. REPAINTLESS.CSS Repaintless.css 使用FLIP 技术让动画更加平滑。虽然它还有提升的空间，但是对于注重性能和表现力的设计师而言，Repaintless.css 的效果已经非常不错了。   37. MIXITUP MixItU…

编者按：想学习动效设计？别以为只有复杂的AE 可以做。今天推荐的这10个软件都可以做出酷炫的动效设计，功能上各有优势，但效果丝毫不输AE哟（内附大量教程）。 随着技术的不断发展，动效越来越多的被应用于实际的项目中。手机、网页等等媒介都在大范围应用，那么问题就来了，为什么动效越来越吃香？它有哪些优势呢？ 首先要说明一点的是，动效之所以越来越吃香不是最近才流行的，而完完全全就是因为过去硬件设备承受不住…

动效是UI设计中最强有力的工具之一，它强化了界面的互动性和生命力。动效让用户可以更快地从界面获取反馈，提供更快更有效的微交互，让关键的要素脱颖而出，通过实时、动态的方式创造引人入胜的体验。巧妙的运用动效，能给整个体验带来更多的加成。考虑到屏幕尺寸和使用场景，在移动端上动效的作用就显得更加关键而有效了。 在我们之前的文章中曾经探讨过动效和UI设计之间的关系，以及它是如何催生高效的微交互。移动端设备的…

日常工作中，交互设计师不仅需要处理复杂的业务逻辑、排放各种层次的信息，还经常需要制作各类动效。除了用于可用性测试、方案汇报与演示之外，动效还承担着丰富页面效果、情感化表达等提升用户体验的作用。 按照目前的设计趋势，动效都趋向于细微化，主张动效本身不喧宾夺主，而是潜移默化地影响用户体验。动效设计需要和场景紧密结合，炫酷的效果往往并不实用。另一方面，动效设计出来之后还要能顺利被工程师所实现。很多优秀的…

Heyu：在上一篇文章《动效设计基础（一）：缓动与运动曲线》中，我们讨论了动效的几种常见形式以及缓动的重要性。那么，我们为什么要用动效呢？除了酷炫好玩以外，动效在用户体验设计中其实发挥着很重要的作用。在本文中，我们就来看看动效设计在用户界面设计中的应用。 一、吸引注意力 人类天生就对运动的物体格外注意，因此UI动效自然是吸引用户注意力的一种很有效的方法。在iOS锁屏上，唯一的动效就是“滑动并解锁”…

Heyu：作为设计师，我们经常接到这样的需求：XX App中的动效好酷啊，我们也做一个吧。这时，一些习惯了把设计输出 = PSD的同学往往无从下手。那什么是动效设计？什么时候需要用什么样的动效？动效越酷炫越好吗？这里，我会用几篇文章分别回答这些问题。首先，我们先了解动效设计中如何用运动曲线表达动效以及缓动设计。 为什么要动效？ 动效是元素的位移、姿态、大小和可见度等随时间的变化。这里我们以位移为例…

编者按：如何从零开始临摹大神的作品？今天@Damon_Yuen 这篇文章提供了一个非常实用的临摹指南，教你从视觉语言的5种元素和10条动态设计原理入手，把复杂的动效作品拆分成可直观学习的细节，而且掌握这个方法后，无论什么领域，你都能真正从大神的作品中汲取养分。建议阅读。 在我们探讨设计原理的核心之前，我们需要明确构成视觉语言的5种元素。 1. 线段 线段在动态设计中是点的集合。线段生成了运动，吸引…

@Damon_Yuen ：如果你是一位AE新手，表达式对你来说可能会有点可怕。我经历了一段时间，才能慢慢开始自己在AE中使用表达式，而不是去从Google里面复制粘贴。想进阶学习的话，来试试这5个AE表达式，它会让你的工作流程更加高效。 1. Wiggle wiggle（1，15） wiggle是我在AE里面最常用到一组表达式。通过赋予物体随机值使之实现随机摆动，它确实能让你得到你想象中的效果。这…

练小习：初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。 首先我们定义一块画布，然后在上面画一个圆形。 他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直…

编者按：昨天@平行煎餅 发了新版Material Design 官方动效指南的第一节，今天继续第二部分，从动效的速度、动态持续时间、通用持续时间和缓动曲线4个部分，教你创建平滑一致的Material Design 动效。再系统的干货都比不上官方的动效指南，西瓜就在这，赶紧来捡。 Material Design的动效设计是响应式的，自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。 速度 …

编者按：前两天Google 刚发布了新版Material Design 官方动效指南，今天@平行煎餅 就给大家带来了中文版！全文包括三个部分：为什么说动效很重要？如何制作优秀的Material Design动效及转场动画，动效的意义。新鲜热辣收好不谢！ 在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。 为什么说动效很重要？ 动效可以向我们展示一个A…

虽然早期的GIF动画不论是从技术层面还是从应用范畴来看，都和界面设计并无特别直接的关系，但是近几年，动画图标开始在界面设计中大量运用，并有流行开来的趋势。 坦率的讲，让图标动起来，或者通过动态图表达一些有趣的场景并非什么新鲜的东西，但是它们在很长的一段时间里都玩儿的比较简单，居于次席，或者纯是拿来搞笑。但是现在不一样了，通过精巧的后期处理，这些动态的图标成为了界面上令人流连忘返的重要组成部分，成为…

一篇成功文章的开头皆需寒暄几句：大约一个半月以前，ME Workshop知名逗比马丁· 胃发表了一篇关于QC+Origami 动效设计的文章，引来无数Mac用户的热捧和无数Windows用户的哀嚎（买不起Mac就要遭到歧视么…），广大Windows用户都用不了算神马动效神器！？今天就来介绍一款妇孺皆爱、老幼皆宜、比QC简单易上手、比AE可交互的全平台动效神器 —— Pixate。 注：上文提到的软…

@陈子木 按照设计趋势，我们是时候了解一下UI动态设计了！UI动效设计算是新兴的设计领域分支，如同其他的设计一样，它也是有规律可循的。关于UI动效设计，相关资料不算太多，希望这篇文章能够为大家带来更多启发。除了看各种案例之外，自己实操才是最重要的。动手之前，不妨先了解一下UI动效设计的基本规则吧！ 如果你是一名英文基础还不错的设计师，不妨看看以下两个网站： the Website of Pasqu…

@AzTamic（百度MUX 交互设计师）：很多小伙伴平时喜欢收集手机软件上的各种动效，但是又苦于不知道如何保存，今天讲一下利用itools+Ps保存动效的实例，如果你有更快捷的方法请联系我更正。 动效设计好文推荐： 《帅呆了！一组令人愉悦的APP动效设计》 《高手之路！设计漂亮有趣的转场动效》 《还等什么！是时候来了解动态设计啦》 首先，请小伙伴们看看成果： 需要知道的： 1、iOS设备大多通过…

在App设计完成后，你如何向客户展示功能和界面相关的内容呢？与其花时间费口舌向客户解释，不如用漂亮的动画来演绎产品的设计水平。 效果都是 gif 图，网速着急的童鞋可先来《推荐：设计师萌妹子求职记》 看这个令人捧腹大笑的史诗级面试，或者到《17条资深经验！视觉设计师如何进阶提升自己能力》汲取干货。 上一篇《聊聊那些令人愉悦的动画效果》已经说明了用动画展示设计的重要性，比如比静态图传达的内容更多，无…

这篇文章由江南大学设计学院研究生孙启玉翻译，主要谈手机App中的转场动效，强烈推荐原型设计师阅读学习，体验下动效的神奇妙用。 好文推荐： 还等什么！是时候来了解动态设计啦 超赞！高大上的动效设计方法及流程总结 设计师们喜欢追求细节的完美 他们把大量时间花在了像素级按钮，表单样式，设置类型以及如何让那些图标变得漂亮和精致。 …但是关于如何设计衔接却很少有人考虑。你点下按钮表单就…出现了？你滑动删除一…

cocoachina：可能你对Google Search的使用频率远没有YouTube或者Gmail高，但是谷歌出品的Google Search在设计方面也有很多值得我们借鉴的地方。在最近几年，谷歌在设计语言方面取得了很大的进步，比如Google Search中出彩的设计细节。 动态设计专题： 还等什么！是时候来了解动态设计啦 聊聊那些令人愉悦的动画特效（GIF图） 超赞！高大上的动效设计方法及流…

以前我们通过优秀字体、配色让网站变得舒服，现在我们通过视差滚动让网站拥有由上至下一站式的视觉震撼效果，访客只需滑动鼠标滚轮就能体验到，你可以利用今天提供的这25款免费的视差滚动插件轻松实现，每款插件都有提供Demo，设计师们来感受一下。 科普一下：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，…