經(jīng)驗分享！如何準確的向工程師傳達動效設計？

@TCWison （阿里高級視覺設計師）：隨著軟件與終端的發(fā)展，如今的用戶體驗設計中動效的作用正變得越發(fā)重要，也有越來越多的設計師開始嘗試讓自己的作品“動”起來。但在實際工作中，相信大家常會有這樣的疑問：怎樣才能將自己精心設計的動態(tài)效果，準確的傳達給工程師，避免實現(xiàn)的偏差呢？下面我想根據(jù)自己的經(jīng)驗，拋磚引玉，和大家聊一下這個話題。

試想一下，在一個沉靜的的夜晚，你正為一個界面的過渡動畫而苦思冥想，突然一道靈感之光穿越你的腦海，完美的方案浮現(xiàn)眼前。此刻你最想做的，恐怕不是翻閱開發(fā)文檔研究實現(xiàn)原理，“老子得立刻把它表現(xiàn)出來。”

沒錯，我們是設計師，設計師要做的是可視化。對于動效來說，憑空描述永遠是隔靴搔癢，將自己心中的設計最快速的可視化，是實現(xiàn)的第一步。

一、準確展示：視頻Demo

視頻Demo是個不錯的開始，一段可以反復播放并在大部分設備上均可觀看的視頻，是讓別人快速理解自己想法的最佳媒介。制作視頻Demo，本人最常用的工具是After Effects。AE對于動效的控制與表現(xiàn)能力，至今無人能出其右，是我心目中最佳的概念設計工具。

（不夸張的說，通過對速度曲線與層級的控制，AE能實現(xiàn)你所見過任何的動效）

除視頻外，AE的另一個優(yōu)勢是，它輸出的PNG序列幀素材可以直接應用到一些PC甚至移動端的軟件中，作為實現(xiàn)效果。

（Andriod L中一些控件動畫的實現(xiàn)方式，就是通過程序直接播放設計好的序列幀素材）

二、操作體驗：交互原型

視頻Demo的局限是無法交互，而很大一部分動效都是在用戶與界面交互時觸發(fā)的。這部分動效的啟動時機，與手勢的關系，僅靠視頻Demo就無法100%準確的傳達了。這時，如果能有一個可交互的原型，很多問題就會迎刃而解。

對于可交互的原型（Prototype），網(wǎng)上已經(jīng)有很多文章在討論，制作工具也五花八門（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form…），我們該如何選擇呢？對于這個問題，我主要看兩個點：

制作好的原型是否便于多人分享是否可以直接輸出可用于開發(fā)的參數(shù)

基于這兩點，我個人的第一個選擇是Flash。

（沒錯，就是Adobe Flash，這個優(yōu)缺點都很鮮明的軟件）

由于Apple的原因，F(xiàn)lash如今的境況可算是江河日下。但作為一個動效原型工具，它卻有一些獨特的優(yōu)勢。

優(yōu)勢 1：可以直接導入AE生成的序列幀素材。