如何選擇合適的App動效設計工具？

12-30

在扁平化風靡的時代，設計師不再像過去花很多時間研究高光紋理陰影，而是將注意力放到動效上，目前有很多動效製作軟體各有優劣點，那麼以你目前在團隊項目開發的經驗，你會推薦新人使用哪一款工具深入研究？

After Effects

Framer - Prototype Interaction and Animation

Origami - Design Prototyping

Form - Instant Native Prototypes

Pixate - The Next Generation of Mobile Interaction Design

本文不黑任何應用，只是開闢另一種思路。

我會推薦設計師使用AE，且聽我慢慢道來。

是的，很多人會推崇QC或form，特別是QC出了code export功能之後，對下游開發的便利不言而喻。Form被Google收了之後也可能馬上推出android端的即時預覽服務，很值得期待。對於有前端基礎的朋友，Framer的coffee script配合看起來很美好的psd, sketch文件直接導入功能，對不願一張張切圖的設計人員們也算是個神器。

QC和Form是屬於那種，無法勝任完整互動演示、學習曲線有陡峭的應用，如果你真的需要展示那麼一兩個動效，學習無復用價值的該類應用有何意義？目前來看，除了娘家，QC和Form更多的是成為了一些geek的課外玩物，而無法切實落實到工作流程中。是的，Framer在此價值高得多，可是國內外環境不太一樣，在紐澳無論是ixd還是ui designer，不熟悉前端的人不存在。

可是，真的沒人在意復用嗎？真的有人會在嚴謹的工作流程中成為一個多面手嗎？展示動效的目的似乎被「真實的手感」給混淆了。先來看看動效展示的目的是什麼。

直到現在，還會有人把動效（ui animation）和互動原型（interactive prototype）混為一談。

Interactive prototypes are a great way to demonstrate functionality, simplify documentation, and get user feedback --- Interactive Prototypes

這是個很明晰的解釋。動效的目的絕非預覽產品功能性，簡化文檔和獲得用戶反饋！！！若設計人員帶著以上思維學習和理解動效，會被嚴苛的真實工作流程重擊到內傷。

為什麼我們還需要動效？

Well-considered motion in interface design can help guide, provide context and delight users. Animation offers the opportunity to surprise, making applications more enjoyable and engaging. ---Will animation be the big UI trend of 2015?

合理的動效可以幫助引導、取悅用戶，並使其知其所以然。就像好馬配好鞍一樣。

面向內部，動效展示的三個目的：讓客戶明白；讓自己得意；讓程序員了解。動效只是交互的職能範圍之一，是需要交付於視覺之後再回爐的。

讓客戶明白（甲方忽略）：給客戶瞅瞅，讓他們在開發之前就能明白自己的錢差不多去哪了。

讓自己得意：帶回家給老婆秀秀自己近段時間的工作成果。

讓程序員了解：給程序員明確需求，知道自己將要整啥。

那麼為什麼AE是我最推崇的呢？不輸任何一款動效設計工具的產出物可至複雜程度，低於所有本地動效設計應用的上手難度，完整的系統支持和文檔支持。我們在面對客戶時，往往不超過五個獨立的文件展示主要動效和針對某一至兩個情境(scenario)的完整流程演示，我們不可能在以效率為主的流程內分發同樣的目標給兩個完全不同的應用；而對於團隊，動效展示文件+低廉的記憶成本+完整的交互文檔不比擁有「真實手感」的玩物對下游幫助得更少。

不同人團隊有不同的需求和目的，我只是願意開闢一種思路，畢竟AE在這個所謂的動效工具元年被黑得有點慘。

有幸在動效方面做過一些學習，我會推薦Form和QC這類node類動效製作工具

1、它們沒有那麼陡峭的學習曲線

不要被QC幾百個Patch嚇到，無論是Form還是QC在實現基礎交互動效時也只用到幾十個Patch，它們可以被較短時間掌握。而對於國內設計師對代碼的抵觸情緒，類似AE時間線和QC這類連線的方式更容易被接受。

2、交互測試的需求大時更應該嘗試

筆者在Form出現之前一直在使用QC，而學習Form的原因就是在手機上交互測試。對於從事交互設計的朋友來說，實機測試相對於AE這類純展示型有更大優勢。由於筆者是學生，有時不考慮到給程序員開發，而這時可交互高精度動效原型將會十分有用，我相信也會有更多交互設計學生選擇Form和QC。

3、可以讓設計師更注重邏輯與視覺

Form和QC這類連線類動效製作工具能夠讓設計師對邏輯有更深刻的認識，使用Form和QC製作動效，會不由自主的注意交互與觸發的關係。而基於元素和時間線的製作更像是做動畫，或者不自覺的對元素看待孤立。另外，視覺呈現時刻重要。

基本同意勵定洲的觀點，也感謝moonjoin轉了我的文章，我再補充兩句。

要選動效設計工具，先要明確目的是什麼。如果想把動效當工作來做，我認為目的基本就兩個：

1、做真正的設計。
2、做可交互原型。

我們先說第一個，什麼叫「真正的設計」？

真正的設計應該兼具實用與創新。近期比較有代表性的就是Google的Material Design了。其中的很多創新的動畫效果，都是Google的設計師經過長時間的設計探索後給出的方案，他們並沒有被技術禁錮，反而推動了研發對動效的實現能力。這才叫真正的設計，有追求的設計團隊鄙視雷同，總希望能為自己的產品打造出專屬的氣質，你看iOS、Android、Windows Phone三大系統，設計語言一樣嗎？那可都是設計師抓耳撓腮想出來的。所以如果以此為目的，設計師需要一款製作能力全面而強大的軟體，題主所列的這些里，只有AE能符合要求了，因為它完全沒有禁錮，不會對你的設計思路有絲毫的阻礙。

再說第二個，「做可交互原型」。

做可交互原型從本質上說，和設計動效是兩碼事兒。做它的目的主要是為了一些展示上的需求。專業一些的，可以是用來給用戶做可用性測試以判斷設計方向，用來在團隊內部快速地達成共識等等。Low一些的，可以是更好的嚮導彙報，UED團隊拿出去裝逼...所以，做原型追求的，是交互流暢，便於分享展示，製作效率高。這麼看的話，題主列的工具里，除了AE，其他都具備這些能力，只不過互有優劣，目前誰都沒有絕對的優勢。建議題主別怕麻煩，都試用一下，編碼流、節點流、圖層流...選一個最來電的，用熟練了就行了。我最近用Pixate比較多，因為相對簡單點兒。

總結：想做動效，AE必須要會，其他原型工具熟練使用一個即可，有時間都學了我也不攔著你。

根據活的需求評估什麼工具高效、合適，看心情，然後選一個

另：別花時間在學工具上，應該把時間在出設計稿上，工具么，學學就會了。

引用篇最近站酷上看到的文章，覺得講得不錯，原文地址：如何準確的向工程師傳達動效設計？|UE|原創/自譯教程|TCWison

隨著軟體與終端的發展，如今的用戶體驗設計中動效的作用正變得越發重要，也有越來越多的設計師開始嘗試讓自己的作品「動」起來。但在實際工作中，相信大家常會有這樣的疑問：怎樣才能將自己精心設計的動態效果，準確的傳達給工程師，避免實現的偏差呢？下面我想根據自己的經驗，拋磚引玉，和大家聊一下這個話題。

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

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

一、準確展示：視頻Demo

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

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

二、操作體驗：交互原型

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

對於可交互的原型（Prototype），網上已經有很多文章在討論，製作工具也五花八門（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form...），我們該如何選擇呢？對於這個問題，我主要看兩個點：1、製作好的原型是否便於多人分享。2、是否可以直接輸出可用於開發的參數。

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

由於Apple的原因，Flash如今的境況可算是江河日下。但作為一個動效原型工具，它卻有一些獨特的優勢。

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

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

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

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

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

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

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

當然，它的學習成本也會高一些，不過當你拿著一段Framer的源碼給工程師看的話，當中的一些動畫參數和實現邏輯，多少能給到他們些實際的幫助，所以付出和回報還是成正比的。關於運用Framer的流程，Twitter的設計師分享了他們的經驗，大家可以看下這篇文章：《Twitter視頻功能設計流程全程剖析》

另外，如果你專註於iOS平台，也可以直接嘗試一下Origami，這是個由Facebook團隊開發的原型工具，通過鏈接節點式的操作，無需自己寫代碼，在它最新的更新中，已經支持導出可供iOS和Android使用的代碼，這篇文章做了介：《Introducing Origami Live》

三、協助開發：參數文檔

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

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

1、動畫的起始時間、持續時間（duration offset）

2、變化的屬性（rotation position scale alpha）

3、運動速率（interpolator）

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

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

總結：

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

第一步：要快速可視化。

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

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

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

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

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

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

作者的微博，歡迎交流： @TCWison

沒人提Hype 3嗎？個人覺得AE是基礎必會，App的簡單轉場Hype3足矣。