超实用的动效设计入门小手册

这本小册子的目的不是教你如何制作动态效果，而是从基本动态效果、动态效果曲线、动态效果软件等方面梳理相关知识点，帮助你从整体轮廓中理解动态效果，适合零基础和新手阅读。

近年来，UI设计领域最大的变化是越来越强调用户体验设计，在Web或应用程序中使用动态效果已成为一种主要趋势。这一趋势如此强烈，以至于我看到越来越多的应用程序使用的动态效果不再是为了改善用户体验，而是为了强调动态效果本身。

设计师 Pasquale D’Silva 在 Web Direction South 会上曾说过:好的动效应该是看不见的。(作为用户)你不应该注意到你在看动效。

这是一个很好的动态效果设计建议，甚至是原则。作为这些网络或应用程序的设计和开发者，在我们设计和开发动态效果之前，我们应该首先明确什么是正确的动态效果：动态效果应该是一种机制，提高可用性，并以一种自然和含蓄的方式提供有效的用户反馈。

了解动效

优秀的动态效果往往被忽视，而糟糕的动态效果迫使用户关注界面，而不是内容本身。用户使用您的网站或应用程序有明确的目的：购买一些东西，学习新知识，发现新音乐，或者只是寻找最近的用餐地点。他们不会来玩你精心设计的界面。事实上，用户根本不关心界面设计，只关心他们能否在这里轻松实现目标。优秀的动态效果应适当反馈用户的点击或手势，以便用户能够根据自己的意愿轻松控制应用程序的行为。

基本动效

我们通常在Web或应用程序中看到的动态效果实际上是由一些最基本的动态效果组成的，其中包括：移动（Translate），旋转（Rotate），缩放（Scale）。在一些动态设计工具的帮助下，你通常只需要设置它的起点和终点，并告诉它你想要什么类型的动态效果，设计工具会根据你的设置渲染整个动态效果。

移动 — Translate

顾名思义，移动就是将物体从位置A移动到位置B，这是最常见的动态效果，可以在滑动、弹跳和振动等动态效果中看到。

旋转 – Rotate

旋转效果是通过改变物体的角度来产生的。在页面上加载，或点击按钮触摸旋转动效将用于发送长时间操作时经常使用的Loading效果或一些菜单图标的变换。

缩放 – Scale

缩放广泛应用于app应用中，如点击app图标、打开app全屏界面、点击缩略图查看具体内容等。

动效曲线

自然界中大多数物体的运动不是线性的，而是根据物理规律进行曲线运动。一般来说，动态效果的响应变化与执行动态效果的物体本身的质量有关。优秀的动态效果应该反映真实的物理现象。如果你想展示一个沉重的物体，他们的初始动画响应/参数的变化将相对缓慢。相反，如果物体较轻，则初始动画响应/参数的变化将相对较快。

你也可以在easings中.查看net中的所有动态曲线，获取相应的CSS、JS代码，并在您的项目中使用。

属性变换

属性转换是一种非常常见的动态效果。例如，可以通过改变透明度来实现淡入/淡出效果。同时，您还可以改变几乎所有属性，如对象的大小、颜色和位置，以反映动画效果。

注意下面动态效果底部的菜单栏。当他的高度降低时，他的透明度也相应降低，从而产生折叠效果。

组合动效

Pixate

Pixate 是Web App，它可以帮助你快速制作原型。与Flinto或Marvel不同，你可以区分层次（layers）与嵌入式交互，如拖动、点击、双击等。制作的原型保存在Web上，您可以使用iOS 应用程序预览原型的效果。

Origami

Origami是一款免费Quartzz Composer的插件和Origami使QC界面更加友好，更适合移动应用的界面设计。Facebook的产品设计师从2013年5月开始开发这个QC插件。Origami的开发过程与Paper一起进行。随着Paper的功能越来越复杂，Origami变得越来越强大。Paper上的每一个动画效果都是由设计师先在Origami上制作成型，然后由IOS工程师编写的。

After Effects

After Effect，简称AE，是Adobe开发的动态设计软件。对于那些不接触代码的纯设计师来说，这是一个非常理想的动画设计工具。Dribbble上有许多优秀的AE动态作品。与其他工具相比，AE是一种更传统的工具，使用真和层来定义动画。作为Adobe的产品，它的许多功能与Photoshop非常相似， 但是对动效有很多附加功能。