转场动效

编者按：想学习动效设计？别以为只有复杂的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。 注：上文提到的软…

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