??工作中，有段時間我特別熱衷于交互工具的尋找监婶，自己也先后試用了Pixate旅赢、origami studio、principle、Kite Compositor等交互工具鲜漩。雖然以上工具源譬，截止目前仍未有一款，另我百分百滿意孕似，但已能解決工作中遇到的各種各樣問題〔饶铮現(xiàn)在總結(jié)下以上3款工具的使用感受（Pixate已停止更新，不再介紹了）：
1喉祭、Origami studio
??官方網(wǎng)址：https://origami.design
??Origami studio是Facebook創(chuàng)作的一款的設(shè)計工具养渴，設(shè)計人員可以快速的完成交互設(shè)計。用Origami做交戶設(shè)計需要有一定的邏輯思維能力泛烙，感覺更像是用開發(fā)者的思維去制作理卑。與principle、Kite Compositor最大的不同是Origami沒有時間軸蔽氨，不能夠逐貞觀察動畫藐唠。
2、Principle
??官方網(wǎng)址：https://principleformac.com/
??Principle可以幫助用戶五分鐘制作出一個具有完整交互動畫的原型鹉究，并且可以生成 Mac 應(yīng)用宇立、或者使用 Mirror 預(yù)覽交互。Principle+sketch的組合自赔，可以讓產(chǎn)出更加高效妈嘹，相對于Origami、Kite Compositor上手也要簡單許多绍妨。如果完全無開發(fā)經(jīng)驗润脸，個人強(qiáng)烈建議使用這款交互工具，因為學(xué)習(xí)另外兩款工具要付出相對較多的時間他去。
3毙驯、Kite Compositor
??官方網(wǎng)址：https://kiteapp.co/
??Kite Compositor同樣可以快速的完成一個完整的交互動畫。3款工具中灾测，個人感覺Kite Compositor的自由度最高爆价，它支持 Javascript 手動編寫代碼（其實多數(shù)情況下的交互設(shè)計不需要編寫Javascript即可實現(xiàn)）。對于“shape”的支持也最靈活行施，同時“Library”的劃分也很好理解（Kite Compositor可以導(dǎo)出代碼，這樣有利于將一些動效參數(shù)給研發(fā)工程師魂那，但具體沒用過蛾号，不知道是否好用- -！）涯雅。
三款工具制作交互的有哪些不同
??交互設(shè)計這個過程鲜结，簡單理解，無非是用戶通過操作（點擊、長按精刷、滑動等）手機(jī)屏幕拗胜，從而使屏幕的界面發(fā)生了變化（動畫）。所以怒允，交互工具的目的也是為了滿足我們?nèi)缦滦枨螅?/p>
??那3款軟件埂软，都是如何滿足我們這個需求呢？
??首先是“origami studio”纫事，由于sketch版本更新頻率很快勘畔，所以origami studio對sketch的支持較弱，我一般都是重新將原型在origami studio中再畫一遍丽惶，這樣能保證動畫效果更好炫七。origami studio對shape支持很弱，一般我都以圖片代替钾唬。origami studio是通過添加各種類型的“patch ”万哪，隨后以連線的形式，去完成交互動畫的實現(xiàn)抡秆。如下圖：
??上圖中奕巍，紫色背景的“patch”部分是用戶操作“點擊”事件，灰色背景的“patch”是動畫實現(xiàn)過程（界面A到界面B發(fā)生的動畫）琅轧，藍(lán)色背景的“patch”是發(fā)生動畫改變“l(fā)ayer”的屬性伍绳。之所以說，origami studio更像是用開發(fā)者的思維去制作交互動畫乍桂，原因就在于灰色類型的“patch”在交互設(shè)計起到的作用冲杀，與開發(fā)者實現(xiàn)程序的作用是近乎類似的。
??origami studio的連線交互形式很新鮮睹酌，但是當(dāng)做多個交互動畫為一個文件時此蜈，連線可謂異常痛苦摊欠，因為原本簡單的交互以連線的形式實現(xiàn)，難度瞬間上升了好多倍。同時可讀性也較差妙黍。時間久了，打開之前做的源文件辩稽，讀懂之前的想法就需要一定的時間回憶景鼠。
??其次是“Principle”，Principle相對于Origami studio就簡單了許多壶辜，它可以將sketch中制作好的原型或視覺稿直接導(dǎo)入悯舟。隨后在導(dǎo)過來的layer中添加“操作”狀態(tài)，隨后鏈接至下一個畫板砸民，兩個畫板間通過時間軸去控制動畫效果抵怎。
??Principle由于是通過畫板與時間軸完成動畫效果的奋救，這樣導(dǎo)致我們完成一個動畫，可能會需要多個畫板反惕，而且多個畫板中的layer的名稱尝艘，如果不一致，動畫效果就會出錯姿染。而且如果出錯了背亥。時間軸中內(nèi)容過多，調(diào)試也相當(dāng)辛苦盔粹。不過Principle完成一個動畫確實簡單隘梨，高效。
??最后是“Kite Compositor”舷嗡，與Principle一樣Kite Compositor也可以將sketch中制作好的原型或視覺稿直接導(dǎo)入轴猎。并且Kite Compositor能將sketch中的“shape”導(dǎo)入，這點不同于Principle进萄，Principle導(dǎo)入后“shape”都變?yōu)榱藞D片捻脖。Kite Compositor通過在layer中添加“Actions”（就類似添加“操作”狀態(tài)），然后在layer中添加“Animations”中鼠，隨后在“Actions”中添加要執(zhí)行的“Animations”可婶。
??Kite Compositor相對于Origami、Principle提供的功能都多援雇，并且相對于后者也更靈活矛渴，同時也能和sketch結(jié)合，減少在交互工具中設(shè)計界面的工作量惫搏。但是功能越多具温，也代表著復(fù)雜程度上升，同時“Action”與“Animations”都在左側(cè)layer菜單的位置筐赔，如果目錄層級很深铣猩，設(shè)置起來就及其不方便（有時候找layer的目錄能把自己找暈掉- -！）茴丰。
總結(jié)
| 工具 | Mirror | 內(nèi)置組件 | 粒子效果 | 導(dǎo)出視頻 | 時間軸 |
|---|---|---|---|---|---|
| Origami studio | 手機(jī)达皿、Mac | 組件豐富 | 支持 | 支持 | 無 |
| Principle | 手機(jī)、Mac | 無 | 無 | 支持 | 有 |
| Kite Compositor | 手機(jī)贿肩、Mac | 較少 | 支持 | 支持 | 有 |
??以上三款工具均能作出流暢且酷炫的交互動畫，并且能夠直觀方便的給予他人演示汰规，應(yīng)當(dāng)都能解決我們目前遇到的交互方面的設(shè)計問題汤功。但工具僅是工具，交互設(shè)計更重要的仍是設(shè)計思想控轿，仍是如何通過友好的交互去解決人機(jī)交流障礙冤竹。所以選擇交互工具更應(yīng)該結(jié)合自身情況，不要為了學(xué)習(xí)工具而浪費過多的時間茬射，從而忽視了交互設(shè)計的真正意義鹦蠕。
