資深交互設計師推薦的6大必備神器

 　　不想在錯誤的軟件上花功夫?花五分鐘看完這篇!今天推薦的這6款交互設計工具全是經過@敖廠長UX 上手研究過的，優缺點都總結出來了，看完相信同學們就有答案了。

　　1. After Effects

　　你想在短時間內制作復雜演示效果。 請使用AE，曲線/錨點等使用MOTION V2腳本進行快速調整(在曲線界面中 鼠標拖動選擇關鍵幀–>拖動腳本上的滑塊–>對比緩動曲線 獲得你想要的曲線效果，比其他腳本好用的在於曲線你可以進行自定義，表達式也好修改–>不會改的話學點JS咯)，你熟練AE的話能很快得到比較好的效果。AE缺點就是不可交互+精准度很難控制，當然有一個點就是，你想要什麼效果 AE都能實現。但是程序上能不能實現就難說啦。

　　2. PIXATE，圖層類交互原型軟件

　　最近被GOOGLE購買了，然後免費了(說實話GOOGLE 可以說是產品殺手，進去的產品。。。我不敢苟同樓上們的那些說法)。

　　優點：可交互，共享性強，有團隊討論以及回復模塊(此處有點像justinmind)【有windows版本】，對GOOGLE MATERIAL DESIGN的支持比較好，MD相關預設會越來越多哦。

　　缺點：圖層類軟件你們都懂得，用AE做可交互已經很煩了，更何況再加上一個交互模塊，而且沒有時間線啊。

　　用Pixate煩人的一點是，我是用750*1334做的，然後導進去發現，這貨是按照375*667啊，而且不能直接從sketch粘貼，能別這麼麻煩麼。

　　Form和origami都是支持粘貼的。還有 動畫預設較少。不過GOOGLE是動畫狂，他們肯定會加預設的啊哈哈。聽說以後版本會支持code export，觀望中。

　　3. FRAMER STUDIO.

　　其實我並不想推薦，不過作為寫得起前端扛得起大旗的交互大神必用咯。

　　優點：你想干什麼 就能干什麼。而且分享起來特別簡單，所以有很多案例，我們可以直接把代碼拷過來用。關於這個你們可以去FRMAER的facebook群組看看就知道啦。基於coffeescript開發的你還能導入Sketch、PS文件。很方便。能夠精確控制每一個圖層的屬性。畢竟人家是強大的JS，你還想怎樣。

　　缺點：你是視覺，你是交互，你大學/培訓班 研究過JS麼。如果不會，請略過。

　　如果你會JS而且你寫代碼的速度很快，那恭喜，這絕對好用。其實說白了 就是套代碼模板。

　　4. FORM

　　節點類軟件。如果用過nuke的人 ，那就很熟悉咯，被GOOGLE買了。

　　優點：節點類軟件，原型的可維護性強。GOOGLE的孩子，MD設計規范裡的那些動畫預設它最新版本裡包括了。而且還有好多MD相關的PATCH了。還出了IOS SDK，用來創建自定義PATCH什麼的，這塊學的其實是QC…准備跟開發快速融合..以後可能能夠導出MD 的android代碼呢，期待期待。

　　缺點：不能在電腦上預覽。腎六壞了還得跟同事借!還有就是支持從Sketch裡粘貼了，結果不支持Retina，我用750 1334做的，結果發現Form是375 *667啊。我都得縮放成0.5才能繼續。嚇死朕了。還有就是不能共享啊。IOS工程師都是我們的大爺，你這樣還要給他裝FORM，會把他氣shi的!

　　5. ORIGAMI+QC

　　目前比較好用的節點類軟件，FACEBOOK的天才們出的。

　　優點：可導出有一定使用價值的代碼。 可維護性強。可在設備+電腦上都能預覽。現在靠譜點的就這個啦。用的人也相對多些。你可以直接從SKETCH粘帖過來。不過只有在使用POP ANIMATION 的PATCH時才可導出代碼哦。不過開發那邊真的能用這些代碼。關於和開發溝通這個下面再寫吧 。

　　缺點：有一些BUG不忍直視。

　　不能分享：有時給你的IOS工程師裝了QC也沒卵用。為什麼?因為QC絕對燒死CPU+吃內存啊。就算你把FPS調到最低，如果圖層夠多夠復雜，會把工程師電腦卡死的。XCODE都死了工程師怎麼活嘛。還有就是目前功能上缺陷比較多(比如Swipe不能選擇具體方向等，可以用自定義的PATCH進行定義，但是初級人員就用不了啊)，有時你需要各種綜合各種條件各種patch才能獲得一個簡單的效果。

　　關於ORIGAMI和開發的結合問題 ：

　　1、ORIGAMI只能夠導出POP animation PATCH相關的代碼(CLASSIC ANIMATION和BOUNCY ANIMATION都是不能的哦–聽說下個版本會有)，代碼裡面的位移(POSITION TRANSITION)信息都是絕對位置，所以適配上你和開發需要進一步討論解決方案。我的建議是 QC中的定位系統嚴格統一為TOP LEFT或CENTER等。這個對適配問題很重要，如果你的外部GROUP的定位用的CENTER，而裡面圖層用的各種各樣的其他參考坐標系，那麼你導出的位移信息基本沒卵用了。

　　2、如果有DELAY的話，請把DELAY放在POP ANIMATION PATCH的前面，如果不放在前面，代碼導出的主要屬性變化部分是空的(這應該是個BUG啊)。聽說下個版本會導出delay的數值。

　　現在是我把DELAY用文檔形式給開發，開發自己輸入。還有一些循環動畫也是不可導出的，這些也是以文檔形式給的(其實就是讓IOS哥哥坐在我旁邊，用我的另一個顯示給他看效果，一個顯示器看我的QC工程直接溝通了，並沒有用什麼卵文檔。如果你是大公司，流程化嘛肯定需要咯)。

　　3、你的ANCHOR POINT就算是TOP LEFT，圖層旋轉是不會繞他的左上角旋轉的。不過縮放是會縮放的。這個很坑啊。還有代碼導出並沒有導出ANCHOR POINT信息。

　　不過解決方案有的。但是都很麻煩。就是AE中的空白層類似的概念，留空切圖。

　　4、很給力的東東叫PAINTCODE. 可以直接把SKETCH粘貼的圖層轉為代碼。並且PAINTCODE的官方提供了能夠和ORIGAMI結合的PATCH，稍微研究一下(研究一兩個小時，看看PAINTCODE的那個APPLE WATCH教程)，就能夠從PAINTCODE裡解決ORIGAMI的一些雞肋的問題。

　　6. HYPE 3 PRO.

　　人家是做HTML5的啦。不過，如果你不會用Framer，那可以用這個，這個還有時間線，不過我喜歡從SKECTH裡直接粘貼過來，然而Hype不支持粘貼過來，直接PASS了。不過做HTML界面確實很給力啊。簡直就是神器。不過用來做原型的人還是少數咯。

　　有誇FORM的，有誇AE的。作為MOTION DESINGER 還是最愛AE。

　　但從交互設計師的角度，關於哪個更好用，哪個淘汰，關我鳥事，哪個好用時用哪個。從目前看，ORIGAMI還是不錯的。不過這些軟件更新夠慢的。全都有問題的時候，只能選自己愛用的好了。NOODLE我沒提是因為它的BUG太多，還不足以有資格跟上面這些競爭。