經(jīng)驗(yàn)分享！如何準(zhǔn)確的向工程師傳達(dá)動效設(shè)計(jì)？

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

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

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

一、準(zhǔn)確展示：視頻Demo

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

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

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

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

二、操作體驗(yàn)：交互原型

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

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

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

基于這兩點(diǎn)，我個(gè)人的第一個(gè)選擇是Flash。

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

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

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