前言
Principle和Flinto是對于不具備編程技能的設計師來說學習曲線最平緩的兩款原型工具(之一)。相信對于這兩個工具的功能和適用場景有所好奇的同學也早已聽聞過各位前輩的建議：
做微動效/界面不多適合用Principle，頁面多、大部分頁面以簡單跳轉為主/對動效細節(jié)要求相對不高的話用Flinto。
這個結論背后的原因是什么？這兩個工具在實現(xiàn)交互動效時的具體差異是什么？如果你有相關的疑惑，看這篇文章就對啦。
功能對比
相同點：
1. 兩個應用都沿用了sketch中Artboard和Layer的概念（Artboard即界面的載體，layer即界面元素的載體），Artboard中包含Layers和Groups：
2. 兩個應用也都有狀態(tài)（states）的概念：會在Layer的初始狀態(tài)和下一狀態(tài)間創(chuàng)建補間動畫；
3. 都對?控件交互?和?界面轉場?有所區(qū)分（下文中將進行詳述）；
不同點：
1. 動效設計的概念模型：
Principle-以動為主; Flinto-先靜后動
Principle中，Artboard中所有圖層被視為動態(tài)的*，直接將初始狀態(tài)的Artboard和下一狀態(tài)的Artboard用交互事件相連，所有相同命名的圖層會被自動識別為同一元素，自動創(chuàng)建補間動畫；
Flinto中，Artboard中的圖層默認被視為靜態(tài)，需要先創(chuàng)建Transition或behavior，在編輯器中對界面/元素的狀態(tài)進行設置；
2. 界面轉場效果和控件交互的具體實現(xiàn)方式：
Principle- 不同狀態(tài)的畫板+Components，僅Components支持復用;
Flinto- Transition+Behavior，復用性高
Principle：
界面轉場效果可以*直接通過在起始和目標畫板中定義各個元素的初始、最終狀態(tài)*來實現(xiàn)（如上文中的動圖演示）；
此外Component的功能，用于創(chuàng)建控件交互；
Flinto：
界面轉場通過Transition（轉場）來實現(xiàn)（如上文中的動圖演示），控件交互通過Behavior來實現(xiàn)。
Behavior和Component的操作實際是類似的，都是在編輯器中對不同狀態(tài)的串聯(lián)，這里就不詳細敘述。
復用性：
界面轉場：Principle中界面轉場的動效設置是存儲在目標畫板中的，目前也沒有提供批量復制的選項；*而Flinto中轉場動效獨立存儲于轉場編輯器中，并且包含多種默認轉場效果，新建轉場時既可以調用預設效果，也可以選擇默認效果。*
控件交互：用Component 或 Behavior創(chuàng)建的可交互控件均可以通過復制的方式復用；
3. 動效參數(shù)：
Principle: 統(tǒng)一面板管理，調整更加方便
Flinto: 單個編輯，難以整體把握
默認參數(shù)效果：Principle>Flinto
參數(shù)的設置：
Principle中可通過時間軸調節(jié)不同元素的動效起止時間，再通過運動曲線調整動效細節(jié)；
Flinto中各個交互事件的動效參數(shù)是需要選中事件后進行修改的，動效起止時間通過延遲和持續(xù)時間來調整，運動曲線通過張力、摩擦力、速度三個參數(shù)調節(jié)（運動曲線的參數(shù)可以一鍵復制）；
相比較而言，Principle調節(jié)運動曲線成本稍高，不像起止時間可以批量選擇調節(jié)；Flinto調節(jié)動效起止時間成本稍高，需要點選相應的事件逐一調整；
默認參數(shù)的效果：
雖然這兩個應用都會在起終狀態(tài)間自動創(chuàng)建補間動畫，但默認補間動畫的效果是不同的，相較而言，Principle的默認效果更自然和順滑，相信這也是許多設計師對它愛不釋手的原因：
讓我們看看兩個軟件的默認參數(shù)對比：
Principle的默認運動曲線是通過貝塞爾曲線實現(xiàn)的一種特殊的緩入緩出效果，可以通過iOS的core animation實現(xiàn)；Flinto的默認運動曲線是iOS的UIKit Spring，這里有一篇medium文章詳細分析了UIKit Spring為何看起來不夠自然：
[Demystifying UIKit Spring Animations – iOS App Development – Medium]
也就是說，雖然Principle的曲線調整起來略顯麻煩，但其默認曲線的效果是很不錯的，并且通過動畫面板統(tǒng)一顯示參數(shù)的方式，既能把握整體，也能逐步調整細節(jié)。
4. 圖層參數(shù)
圖層參數(shù)影響著元素變化的可能性。這一點上Flinto勝出。
Flinto相較于Principle包含更豐富的圖層屬性參數(shù)，如邊框細節(jié)、可從x、y、z軸方向調節(jié)角度等；
5. 可選的交互事件/手勢：
Principle中多了Drag begins和Drag ends, 對應人機交互指南中的“Drag and Drop”操作。
Flinto中多了連按兩次以及3D Touch，3D Touch支持進一步設置感應強度。此外Flinto的behavior編輯器中還有：1）滾動，其功能類似于Principle的Scroll begins/released/ends；2）按鈕按下（用于定義按鈕的默認和按下狀態(tài)）；按鈕懸停（用于定義按鈕的默認和懸停狀態(tài)）
6. Principle的Drivers：
若某一個/某一組元件的動效由另外元件的x/y參數(shù)所驅動，則可用到Principle中的Drivers功能；
這里Principle仍然是采用時間軸的概念，只不過軸上值不是時間，而是滑動時的X或者Y坐標。
將驅動元件設置為scroll / paging / dragging，通過Drivers選擇相對應的坐標，為需要在該坐標值時變化的元素和參數(shù)添加keyframe。
Flinto利用behavior中的scroll手勢也可實現(xiàn)相同的效果，但還是需要用behavior通過具體的狀態(tài)進行管理。因此要達到與之類似的效果需要*新建不同的狀態(tài)，操作成本要高許多*。
實戰(zhàn)須知
做動效之前必須的一個步驟是：對sketch的畫板與圖層進行整理，在畫原型時就予以考慮更佳。
原因如下：
1）Principle的補間動效是基于圖層的，F(xiàn)linto中也有connect layers功能，清晰的圖層命名有助于更好更快地將同一元素的不同狀態(tài)關聯(lián)起來，且避免出錯。（未經(jīng)檢查和整理就導入Principle，將造成圖層亂飛的場面…）
2）Flinto和Principle都支持sketch源文件更新，也就是覆蓋原有圖層，新增新的圖層。因此清晰的圖層命名也能幫助設計稿的迭代。
有關如何命名和整理圖層可參考這篇博文：
[Principle for Pros ?? – UX Collective]
不需要有動畫效果的Symbol或者Group建議在導入之前通過文件名標記，拍平為位圖。如果是導入Principle，需在要拍平的圖層名后加上“principle flatten”；導入flinto，需在相應圖層后加上“+flinto”；（如果像我一樣，想兩個軟件都試一遍，可以靈活使用sketch的rename it插件，替換這兩個關鍵詞）
總結
通過詳細的功能對比我們不難看出，從大方向上來說：
Principle適合于界面不多，對細節(jié)和效果要求較高的場景因為其能夠低成本的串聯(lián)同一個界面的不同狀態(tài)；通過時間軸便捷地調整整體效果；默認曲線平滑易出效果，且在iOS中易于實現(xiàn)。
Flinto適合于串聯(lián)流程因為其界面轉場動效可復用性高；畫板和控件的不同狀態(tài)統(tǒng)一存儲于編輯器中，能夠保持界面的簡潔規(guī)整，不易迷失；只處理轉場時甚至不需要刻意對圖層進行太多整理。
當然這兩個并不是唯一的選項，懂Javascript / coffee script的設計師可以用Framer，只需要頁面串聯(lián)、連轉場動效都不需要自定義的情況可以用Invision；希望實現(xiàn)局部使用、效果完美的動效，AE、C4D等等。
具體選擇什么工具，還是要取決于最終成果的應用場景以及個人的工作喜好與習慣：看準目標選武器，還要選擇那把自己用著順手的。
推薦一些入門教程（youtube）：
[Principle App Crash Course - YouTube]
[Flinto Crash Course - YouTube]
當然，在學習過程中如果有任何不明白的地方，官方文檔總是最好的參考書。
注：
*在Principle中將元素設置為靜態(tài)可通過animation中的frozen功能。
