@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生成的序列幀素材。

對于我這種以AE作為動效設計起始的人來說，這點太重要了。它意味著無需任何重復勞動，只需要在Flash中添加一些基于AS3.0的交互代碼，就可以完成原型的制作，并保證自己最初的設計思路在原型階段不打折扣的實現。

（Action Script是可視化很強的一門語言，結合AE的素材，你設計的動效基本可以完美復現）

優勢2：可以導出.apk或.ipa的安裝包，共享給任何有手機的人。

由于本人的工作經常需要異地溝通，原型的可傳遞性就是個很關鍵的需求了（總不能把電腦快遞過去給人家看吧…）。Flash的打包發布功能，這時就派上了用場。做好的原型通過Air for Android打包一個apk文件，郵件發過去安裝在對方手機上，輕松又愉快。

（左一就是通過Flash打包生成的.apk文件，可以直接復制到手機上安裝）

另外一些可關注的工具，還有Pixate和Form，它們都可以通過共享工程文件的方式遠程傳遞，還能通過官方App將原型投射在手機上實時預覽，缺點是只能做一些基礎的效果，創新一點兒的就搞不定了，不過他們都在不斷地迭代更新，尤其是后者，剛被Google收購，未來說不定會有快速的發展。

我個人的第二個工具選擇，是Framer Studio。當我把制作好的原型拿給工程師看的時候，經常被問到這樣一個問題：“能不能把源碼給我們看一下？”這時氣氛通常會比較尷尬，因為Flash也好Form也罷，它們制作的原型只能起到演示的作用，而無法直接生成對開發有幫助的代碼。此時，除了報班現學Android或iOS開發外，還有沒有別的辦法呢？答案是：“有！” Framer Studio給了我們一線曙光。

Framer Studio是一個純編程實現的原型制作工具，有很強的動效實現能力，它的語言是基于Javas cript衍生出的Coffees cript。雖然語法與AndroidiOS有不小的區別，但僅就動效這塊，很多邏輯是可以共通的。

（Framer的界面，左側是代碼區，右側可以直接看到實現效果，很方便）

當然，它的學習成本也會高一些，不過當你拿著一段Framer的源碼給工程師看的話，當中的一些動畫參數和實現邏輯，多少能給到他們些實際的幫助，所以付出和回報還是成正比的。

另外，如果你專注于iOS平臺，也可以直接嘗試一下Origami，這是個由Facebook團隊開發的原型工具，通過鏈接節點式的操作，無需自己寫代碼，在它最新的更新中，已經支持導出可供iOS和Android使用的代碼

（Origami最新版支持代碼的導出，雖然可用性還有待提升，但絕對值得持續關注）

三、協助開發：參數文檔

有了視頻Demo，有了交互原型，相信工程師們已經理解你要做什么了，那他們是否就可以愉快的把動效實現了呢？答案是：不一定。一些簡單的動效，工程師或許可以憑經驗搞定。如果你的動效設計很復雜，涉及眾多的參數與速率變化，那僅憑你的描述與工程師肉眼的感覺，恐怕要出偏差。這時，就需要參數文檔的幫助了。

（譬如這段元素移動很復雜的動畫，工程師即使看明白了，也不一定能準確的實現）

想要自己的設計能被精確的實現，就一定要對實現的原理有所了解。根據實現原理，把對應的參數精確的寫出來，這就是參數文檔。對于動效來說，基本參數無非這三類：

動畫的起始時間、持續時間（duration offset）變化的屬性（rotation position scale alpha）運動速率（interpolator）

iOS與Android各自的程序語法不太相同，大家可以去官網翻看一下它們的開發者文檔，了解兩者在動效實現上大概的語法格式，然后對應著把這些參數標好，傳遞給工程師，他們就真正可以愉快的開發了。

（分享一下我的Andriod部分文檔，只要能把開發所需的參數標明，格式隨意）

當然，開發過程中少不了和工程師的不斷溝通（一些如像素位置、不同機型屏幕比例的細節，包括可能出現的誤差），換位思考，不能丟給他文檔或demo之后做甩手掌柜，那也是不負責任的表現。

總結：

簡單的說，要想準確傳達自己的設計可以分三步。

第一步：要快速可視化

你可以選擇任何用的順手的工具，把自己的想法快速準確的呈現出來，就已經是成功的一半。

第二步：最大限度的還原使用場景

如果是PC端，就在電腦上演示。如果是移動端，就在手機上演示。如果可操作，那最好做可交互的原型，當然，是在時間成本允許的條件下。

第三步：把設計參數化，盡可能減少讓工程師憑感覺開發的情況

相信我，如果你不希望工程師憑感覺調UI顏色，那么動效同理。一份精確的文檔，是你專業性的體現。

最后我想提醒一下，本文提到了很多工具，而工具似乎有能讓人著迷的魔力。所以請注意了，千萬不要在追求工具的過程中迷失了設計的本源。電影《夜行者》里有一句臺詞：“想贏彩票的話，你得先賺夠買彩票的錢。”同樣，我們是設計師，想要工程師實現出酷炫的動效，你得先把它酷炫的設計出來。抓住一切機會提升自己的設計能力吧！那才是你最寶貴的東西。