Flinto、Principle、Hype3、Pixate都有哪些優點和缺點？適合什麼樣的交互表現？
2015年是原型工具爆發的一年，各種層出不窮的原型工具亂花入眼，一個一個去下載嘗試的成本是很高的，想請知乎上的各位交互設計師、產品經理們分享下這幾種工具都有什麼優缺點，適用於什麼交互類型。也歡迎在問題中添加更好的原型工具並分享使用體驗。
比如最近我使用Flinto製作了整個APP的交互過程，覺得Flinto擅長做轉場動畫、整個APP的頁面邏輯跳轉，對單一頁面的一些特殊動畫支持就不太好了。優點是易上手，支持sketch導入。
圖片來自：Designer』s Toolkit: Prototyping Tools
感謝評論中 @JJ Colin 提供的鏈接，我截圖放出來供大家參考。Hype3 是 principle 出現之前我比較看好的，因為動效屬性更強，效率適中，缺點就是性能差，用 css3 實現的動畫，做出的原型就像 h5 的應用一樣，質感不好，APP 本身也有這種感覺，不穩定。Flinto 不能做動效，是做原型的，內置的東西多，可自定義的少，優點就是上手簡單。Pixate 用的比較少，具體可以參照上圖。Principle 是做 2 個頁面間過渡專場特效，元素切換，細節動效的工具。優點很明顯，效率高，質感好，缺點就是不能做整套原型。另外還有個 FramerJS ，它可以做出任何你能想到的交互和效果，但是實現成本太高，有做效果的功夫用 Flash ActionScript 或者 Xcode 都寫出來了。樓上王笑的回答比較中肯，我用Principle和Pixate多一些，Flinto用了一下感覺不太好（可能是因為習慣了Principle和Pixate，覺得Flinto動效不夠多的緣故），Hype3同事不推薦沒用過，只看過使用介紹。下面說一些個人的看法—— 1、Hype3優點上手簡單，因操作類似Keynote，幾乎沒有學習成本；但是缺點也明顯，如樓上所言，做出來的東西不夠精緻，且僅支持Mac和iPhone；價格方面它倒是還比較適中，且試用期比較長。 2、Flinto同樣上手簡單，跳轉+轉場做得可以，自帶的設計元素多，質感也行，個人感覺相當於POP/Proto的升級版，優點是有Sketch的素材時，設計速度非常快，且它支持Android，缺點是複雜的動效難以實現，價格小貴且試用時間較短。 3、Principle是做畫布間的交互，優點是上手簡單，質感不錯，設計速度快，且支持OG和Sketch素材的複製粘貼；缺點是畫布較多時交互做起來比較麻煩，且沒有聯動的雙重動效，還有它只支持Mac和iPhone，價格同樣小貴且試用時間較短。
4、Pixate的話應該是這四個裡面相對複雜一些的工具，優點是質感上佳（四個裡面應該是最好的），動效最豐富，對設備支持最好（Win、Mac，iOS、安卓都支持，而且實時連接做得很牛逼），另外它屬於谷歌，更新與功能完善會比較有保障；缺點是單畫布多層次交互，做起來比較地花時間，學習成本相對其他幾個來說也要大一點（上手更難一些），且不支持OG和Sketch素材的複製粘貼，必須手動導入素材；另外需要提一下的是它是完全Free的。
如果LZ想挑戰難度，設計得特別精緻，牛逼，甚至讓人讚歎，可以考慮Origami、Form和Framer（這三個需要懂代碼知識） 如果LZ只是想入門，建議你用已嘗試過的Flinto就夠了（Hype3不知道最新版怎麼樣，若是質感一般個人還是不推薦試用，反正我同事是不推薦的） 介於中間的話，就考慮Principle和Pixate吧，想速度快一點，就前者；想略微精緻一些，設備支持廣泛一些，那就後者。 當然，如果LZ為銀子而發愁，那就別想太多乖乖用免費的Pixate！ PS：樓上還有一位提出的Silver Flows個人就不太了解了... PPS：以上純手打，咱拒絕抄襲，用經驗說話！大四開始自學UI設計一年，參與公司項目後也學了一些原型動效工具，現在只是個剛畢業不久的小鮮肉所以如果有哪些表述不夠貼切的地方還請各位前輩不吝賜教！
===================分割線，長文注意，多圖預警====================
首先說明，Principle和Pixate我並沒有用過所以不多加評論，這裡主要介紹一下Flinto、Hype3以及一款題主沒有提到的Origami，下面按照上手難度從低到高逐個介紹。（難度越低當然自由度就越低）
1.Flinto、Invision、Marvel之類的原型工具
這幾個工具我用的都是網頁版，使用方法幾乎一模一樣，大概使用方式為：將做好的線框圖或者界面UI圖上傳，然後在框出要操作的區域以及選擇對應的操作（比如框起圖上的一個按鈕然後設定觸發的操作為「點擊」），接著設定操作後跳轉到哪個頁面、跳轉的動畫類型等等。
這類工具的主要功能是幫助設計師快速簡單地把給頁面圖加上跳轉邏輯，做成一個用於展示頁面間交互流程的產品原型，動效也就體現在不同頁面之間的轉場切換效果，同一個頁面內除了滾動效果之外可以實現的動效很少，頂多是一些模塊的彈出效果（如側邊欄導航、提示彈框等等），因此比起動效工具，我覺得稱它們為原型工具更貼切一點。
順帶說一下，Flinto過了試用期之後就要收費了（我用的網頁版，不知道有沒APP版）。Invision是免費用戶享有一個actived的project位置，也就是說你只能同時跟別人展示一個項目原型，但是以前做好的項目你可以通過archive操作把它們塞進倉庫里，這樣就不用刪掉，但是如果要展示倉庫里的項目的話，就要先把當前active的項目archive進倉庫里，再把要展示的項目從倉庫里active出來（其他包含active和archive操作的工具都可以如法炮製）。而Marvel就比較碉堡了，當我看到免費用戶的許可權里包含unlimited projects的時候，簡直要跪啊我去免費版都能無限actived項目你敢信？付費之後有更多功能比如項目資源共享等等，不過只是為了展示的話免費版已經足夠了，而且在使用過程中的細節交互上比其他兩個工具更好，所以這三個工具里我更推薦Marvel一點。 前段時間聽說騰訊也做了一個這樣的原型工具叫Demoo，很期待使用效果哈哈畢竟用外國工具網站的上傳速度有點捉急。2.Hype3動效工具
Hype3是我現在用得最多的一個動效工具，除了能更精細地完成上述的專場效果之外，更主要的是能在同一個頁面內實現豐富的動畫效果。主要使用原理是設定某元素在時間線上某個時刻的各參數狀態（比如位置、尺寸、旋轉角度等等，狀態參數有非常非常多，基本可以滿足大部分的動效需要）
然後再設定另一個時刻的動畫參數，接著這兩個時刻之間的時間段就會自動生成動畫，當然了動畫曲線可以選擇預設好的幾種，也可以自己調整設定
時間線上的動畫效果做完之後，可以對每個元素設定交互操作，比如點擊某按鈕之後觸發的事件，事件可以是轉場或者運行時間線等等。
所以用Hype3做包含交互操作的動效的話，本質上是對場景或者時間線的操作，而不能直接操作某個元素（比如你不能拖著一個小球球隨心所欲挪來挪去，你的動畫里小球是左右跑的你就沒法拖著它上下跑）。另外，關於Hype3有幾大亮點：
亮點1——設定物理量：你可以通過啟用物理量把界面變成一個包含重力、彈性、空氣阻力等等參數的自然環境，然後就算你沒有做任何動畫，啟用了物理量的元素也會受到重力的影響下墜；元素之間碰撞的時候會根據彈性進行反彈；自由運動的時候會受到空氣阻力影響慢慢靜止。
亮點2——和sketch配合使用十分方便：由於sketch的到處功能非常自由好用，把整個分組導出放進Hype3里做動效，做完取消exportable即可，完全不會和原本的切圖文件搞混。
亮點3——插入html組件：也就是說如果你會一點html或者javascrip語言的話，就可以隨心所欲插入各種組件或者效果，拖住小球球想轉著圈圈飛到伊拉克都沒問題哈哈。我用這個功能主要是實現一些簡單的web組件比如輸入框之類的，就算不會html去W3C查查現學一下，設定個style而已很容易的。
亮點4——導出為web文檔，這也是我最喜歡的一點！！因為暫時還沒有能力通過寫代碼自己做網站，所以導出為web這個功能簡直就是雪中送炭啊！只要在做的時候布局弄好響應式，導出之後放進自己的網站空間里就可以隨意展示啦~前段幾天練習的時候做了一個動效就丟進自己租的網站伺服器空間了：http://www.shazibai.com/practice008
3.Origami，超強大的高難度原型工具
Origami其實是Quartz Composer（以下簡稱QC）這個原型開發工具的一個小插件，簡化融合了一些模塊方便用戶上手，所以核心其實還是QC這個工具，簡單介紹一下QC。
QC做動效的思路跟前端開發的思路其實是完全一樣的，只是把前端開發的命令語句模塊化，但是所有的狀態都要通過調用模塊設置參數來實現。舉個例子，你想畫一個長方形，不能像其他設計軟體那樣在畫板上拖一個長方形然後移到某個位置，要先在工作區域新建一個畫方形的模塊（相當於程序員小夥伴寫了一個創建圖形的命令），然後在模塊上設置方形的長度寬度X軸坐標Y軸坐標透明度等等參數（相當於程序員小夥伴設置圖形的style），有一個預覽區域可以讓你實時預覽調整之後表現出來的前端效果。
要做動效的話，有用來設置動作曲線的模塊，然後你自己設定用來控制元素的什麼參數，比如你用來控制坐標的話那元素就會移動，用來控制尺寸的話就會伸縮。根據我目前的學習情況，我覺得QC有兩大亮點：
亮點1——可實現的功能數不勝數：QC裡邊貌似有幾百個模塊，各種各樣的功能都有，而且會代碼的話可以修改某些模塊的內容，可以說能用代碼實現的效果都能用QC實現，甚至可以設變數來實現功能邏輯。由於大學的時候學的是工科，所以我第一次用QC就根據74138晶元的原理做了個解碼器哈哈簡直逗。如果你也是一個想像程序員一樣改變世界但是暫時還hold不住代碼的設計師，QC可以充分滿足你實現功能的慾望哈哈~
亮點2——動作曲線可以導出成代碼：當你在模塊了設置好運動的速度變化、彈性等等參數之後，用Origami這個插件可以把核心的動作曲線部分導出成iOS、android和web代碼，前端小夥伴只要調用一下Origami配套的庫就可以快速實現動效啦，省去了寫函數然後再跟設計師慢慢調整的時間啊有木有！不過能導出的之後核心的動作曲線部分，至於是用來控制位置還是尺寸啥的還得前端小夥伴再寫一下，不過那些都是洒洒水啦so easy~可惜就是不能把所有東西導出哎，要展示設計只能打開QC文檔。
==================工具介紹完畢====================
上述這些動效工具都不太hold得住矢量形狀的變換，要做什麼生長效果啊啥的這些還是AE最給力，不過我也不是太懂AE，之前用PS的時候還想著要學的，但是轉了Sketch之後就直接投奔Hype3了所以一直沒學AE，這裡也就不加贅述。關於動效原型工具啥的我的總結就這些，自學UI至今總共才1年所以大概還有很多講得不完善的地方，歡迎各路大神補充，如果什麼時候我用過了Principle和Pixate之後就再來完善這個答案，祝各位UI新手們學習愉快~==================修改答案後吐槽=================
知乎不能傳gif啊好可惜，我看到那個「插入代碼」的功能還以為時能編譯顯示插入的代碼呢，就把gif都丟進網站空間里想用代碼調用顯示，結果原來就真的只是插入代碼啊媽蛋，希望哪天知乎可以傳動圖就好咯~其實呢，我這些工具都用過，現在專註Flinto，至於Flinto說只做頁面轉場的嗎，可以看下我做的幾個案例：Flinto原型案例
之前記錄的各種交互工具的體驗
優先推薦Principle，其次墨刀。隨手抄起的Keynote/PPT也是個神器，做的時候記得把畫布設置成App的尺寸，比如375x667，手機上預覽的效果也是很棒的。
當然，所有工具都不適合做全app的交互，切記。
謝謝 @NeoYoung 邀請。
推薦看一下：Five app prototyping tools compared: Proto.io, Pixate, Origami, Framer Form ，而且作者最後也添加了 Three more app prototyping tools compared: Principle, Flinto for Mac, and Tumult Hype
我就偷個懶，不翻譯了 
補充一下，剛才去了Pixate 官網，頁面顯示如下~
Saying farewell to Pixate.
When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built.
While a lot of the ideas we』ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move beyond its scope. To allow us to focus on our broader vision, we are saying goodbye to Pixate. Pixate was shut down on October 31, 2016.
If you have any questions about sunsetting Pixate, please check out the FAQ.
— The Pixate team
其實還是有一丟丟小傷心的，畢竟沒有真正接觸過它~~~~~
這幾個軟體在工作中都有嘗試，說一下自己的看法：1.Flinto：做一些特殊動效還是有優勢的，比如z軸上的變化是其他兩者所不具備的。Sketch的plugin貌似一直不是很完善，最近沒有關注後續版本，不予置評。對於頁面邏輯跳轉Flinto和priciple採取類似的邏輯連接器方式，使用時確實非常直觀，但是在處理稍微複雜的項目時，面對滿屏幕密密麻麻的連線無疑給項目維護和修改造成了麻煩。2.Hype：軟體定位本身是為H5設計師打造的，有強大的timeline，比較像flash的替代品。有代碼生成功能，雖然生成的代碼Dev肯定看不上，但是還是對開發有一定的借鑒意義。頁面邏輯跳轉並不是Hype的特長，實際使用會發現一些用其他二者很容易製作的跳轉邏輯在Hype中變的非常複雜。3.Priciple：一個字形容：快；倆個字：無腦；三個字：好上手！使用邏輯比較簡單，在理解了drives和Animate的關係之後能夠非常快速的搭建一些小Demo。據說這個產品是蘋果前工程師離職之後設計出來的，所以動畫的底層核心架構都是基於Ios，很多時候不需要設計師刻意去考慮某些動畫專場的細節，Principle都可以幫你搞定通過IOS的標準過渡方式搞定，但問題也出在這裡：如果設計是基於Andorid平台開發的產品，principle可能並不擅長。
單個頁面內小範圍的原型動效，principle是非常適合的。也支持sketch。principle一個特別的優勢是非常好上手。具體的說明看這個：principle for mac：那就做個交互原型圖給他們看(??ロ??) ?
我都用http://Porto.io用起來很直覺，推薦！
講道理 這幾個工具都很有意思 需要代碼的不談 不需要代碼的 每個做動畫的邏輯都不相同 同一種交互 每個軟體都有自己的做法 挺有意思的
推薦閱讀：
※App 的產品運營推廣工作分為幾個部分，需要做什麼樣的事情？
※當一個顏值很高的產品經理是怎樣一番體驗？
※項目經理和產品經理的區別?
※為什麼很多做產品運營的人都想轉做產品經理？
※虎撲的評論氛圍是怎麼形成的？