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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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