经验分享！如何准确的向工程师传达动效设计？

@TCWison （阿里高级视觉设计师）：随着软件与终端的发展，如今的用户体验设计中动效的作用正变得越发重要，也有越来越多的设计师开始尝试让自己的作品“动”起来。但在实际工作中，相信大家常会有这样的疑问：怎样才能将自己精心设计的动态效果，准确的传达给工程师，避免实现的偏差呢？下面我想根据自己的经验，抛砖引玉，和大家聊一下这个话题。

试想一下，在一个沉静的的夜晚，你正为一个界面的过渡动画而苦思冥想，突然一道灵感之光穿越你的脑海，完美的方案浮现眼前。此刻你最想做的，恐怕不是翻阅开发文档研究实现原理，“老子得立刻把它表现出来。”

没错，我们是设计师，设计师要做的是可视化。对于动效来说，凭空描述永远是隔靴搔痒，将自己心中的设计最快速的可视化，是实现的第一步。

一、准确展示：视频Demo

视频Demo是个不错的开始，一段可以反复播放并在大部分设备上均可观看的视频，是让别人快速理解自己想法的最佳媒介。制作视频Demo，本人最常用的工具是After Effects。AE对于动效的控制与表现能力，至今无人能出其右，是我心目中最佳的概念设计工具。

（不夸张的说，通过对速度曲线与层级的控制，AE能实现你所见过任何的动效）

除视频外，AE的另一个优势是，它输出的PNG序列帧素材可以直接应用到一些PC甚至移动端的软件中，作为实现效果。

（Andriod L中一些控件动画的实现方式，就是通过程序直接播放设计好的序列帧素材）

二、操作体验：交互原型

视频Demo的局限是无法交互，而很大一部分动效都是在用户与界面交互时触发的。这部分动效的启动时机，与手势的关系，仅靠视频Demo就无法100%准确的传达了。这时，如果能有一个可交互的原型，很多问题就会迎刃而解。

对于可交互的原型（Prototype），网上已经有很多文章在讨论，制作工具也五花八门（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form…），我们该如何选择呢？对于这个问题，我主要看两个点：

制作好的原型是否便于多人分享是否可以直接输出可用于开发的参数

基于这两点，我个人的第一个选择是Flash。

（没错，就是Adobe Flash，这个优缺点都很鲜明的软件）

由于Apple的原因，Flash如今的境况可算是江河日下。但作为一个动效原型工具，它却有一些独特的优势。

优势 1：可以直接导入AE生成的序列帧素材。