最近研究做互動的prototype，稍微比較幾款工具；FramerX門檻太高，Flinto太醜，Invision Browser跟SketchPrototype差沒多少...決定從principle著手學起，將官網文件練習檔拆解研究後，基礎觀念分析的小小心得，適合剛入門嘗試做互動效果的，例如我這種菜比八。基本觀念：
跟其他的繪圖軟體一樣，Principle的畫面呈現也是以Artboard為基礎，再開始前先把互動跟動畫兩個名詞做一個簡單定義：動畫(animation)是在兩個你想要的結果之間作過渡變換，也就是transition between art boards，是一個單向，不可變動的連續性過程；互動(interaction)則是必須要使用者輸入(input)，且可隨時被中斷的非連續性過程。
舉google map的一個使用的情境為例：
當你用手機在google map APP的輸入框輸入一個地標，底層的地圖會移動，放大，顯示圖釘，路線；接下你會two fingers pinching，試著將地圖zoom in，這時地圖上更多的細節，例如建築物名稱跟路名都會一一顯示。
前面輸入地標後，APP回饋結果的「過程」就稱為動畫；後面two fingers pinching，就稱為互動。這樣的分法不是很嚴謹，但對接下來要使用principle裡的功能會相對比較好理解。
Interaction (持續性的互動)
分清楚互動與動畫的差異後，在Principle裡有三種主要的持續性互動行為定義，可以限制其互動只能在X/Y軸向上產生效果：
Dragging
當touching持續（或是clicking & held) 時，可以拖曳物件改動位置
Scrolling
可以視為在一個Parent物件內，針對Child Layer拖曳改變位置，但Parent物件的位置不會改變。當你直接對一個Child Layer改變屬性成為scrolling，它會直接建立一個Group在Child Layer之上；若啟動 clip sublayer且拖曳Child Layer出了Group範圍時，Child Layer將會被隱藏，例如在小視窗裡面scrolling map。
Paging
效果跟scrolling類似，但每次互動的移動量會以Group的尺寸當基準範圍變動，當你需要在Paging時在每個page view之間做一點padding，把Group的尺寸更改成你的page unit+padding總和，就能實現效果(看官方範例)。
Group (群組物件)
上面提到的Group，在Principle與其他繪圖軟體的定義稍許不同。
在Principle中，Group不僅可用來整理或組織各種物件，也具有mask以及獨立的properties。與其把Group視成一個資料夾，不如當成一個新的Parent物件看待；這個Parent物件有自己的尺寸、位置、以及其他一般物件所享有的properties。
你在inspector面板上所看的group尺寸，可視為互動操作與展示的「限制範圍」；當Child Layer 的屬性改成drag/scroll/page時，會發現互動的範圍將依據group的尺寸而有snapping效果；因此當Group的尺寸與Child Layer尺寸相同，那互動時就會被「綁住」，例如官網第一個教學影片。
另一個Group的用處是創造新的錨點。
因為Group被視為一個Parent物件，因此也有自己的中心錨點；錨點通常可作為旋轉或是其他形變的參考軸心，當需要將物件依照某一個點進行形變，利用Group的新錨點便可達到這樣的效果。(將inspector 面板的scale設為0，物件本身就會變成一個點，不可視但存在，是principle裡常見的手法)
EVENT 觸發事件
當你想利用不同的Artboard之間過渡來達成想要的動畫效果，需要創造一個Event，如果學過程式語言會理解，你需要設定一個觸發的條件來告訴電腦在什麼時間該做什麼事。以下是各種觸發條件：
Tap
object touched & released, like click
Drag Begin / End
觸發時，物件會成為draggable的狀態；在principle裡面可利用同一個layer在不同的artboard的形變差異來做更多互動的變化；
Scroll Begin/Released/End
稍微複雜一點，回想當你在瀏覽google map的時候，當scrolling map時的動作應該分解成 1. 手指(滑鼠) 觸摸，並開始移動；2. 物件開始scrolling；3. 你的手指離開物件；4. 物件此時仍會減速移動；5. 物件完全停止
這五個步驟就對應回這三個觸發事件，要注意的是當你針對單一物件設定scroll的時候，principle會幫你自動做一個group物件。
Touch Down/Up
當觸發條件是手與物件碰觸時，用在轉換btn的highlight
Long Press
當碰觸物件超過0.5秒時啟動
Hover Inside/Outside
用在desktop環境，當滑鼠在layer的範圍內/外時
Auto
用在looping animation，自動開啟，比如要做spinner loading的效果
Message Event ( 觸發事件的繼承與傳遞)
Principle可以透過建立不同的子互動事件，進而組合在一個較為複雜、大型的互動效果；只要將個別小型的互動各自建立完畢，並且轉換成component後，這些觸發事件就能被紀錄、監測、傳送到Parent層級的Artboard讓我們運用。
舉例來說，當你想要呈現一個desktop上的dashboard變化樣式，不僅有chart的變化，還能切換不同tab檢視不同的來源的資料圖表；如果全部都在同一個artboard下製作會變非常複雜。聰明地切割互動效果，各自製作成小型的components後，全部call到最終的art board為你所用。
透過適時地切割並製作成互動元件，不僅降低管理複雜度，在日後的修正管理上也能大幅降低難度，提高工作效率。(像sketch的symbol/library)
Driver
跟一個互動需由一個行為去觸發(trigger)的不一樣，在Principle裡有一個叫做Driver的控制元件，可製作同時出現的不同互動效果；比如當拖曳一個物件時，需要它一邊可以旋轉(拖曳跟旋轉是兩個不同的互動)，就可利用Driver在單一artboard裡面達到的。
也就是說，當物件需要做一些細緻的效果與互動設定，就需要用driver來設定更。在原始文件中是用 properties you wanna drive這樣的語意，來表達driver這項功能。
當你把物件從static改成 drag/scroll/page時，driver選單就會啟動，這時候請記得是以位置(position)而非時間軸，當作關鍵影格的依據（請記得當你用driver來設定互動時，就不是以時間軸當基礎，而是以「距離」作為keyframe的基礎座標)。
也因此，回到Principle的inspector裡面針對動畫的四個特性，就能看到當你需要用到driver時該怎麼設定properties(要啟動某一個物件(layer)的driver，記得到inspector面板控制去變更狀態)：
1. Static: 代表物件是僵直不可動的
2. Drag: 可被拖曳的，floating
3. Scroll: 手機的基本操作行為
4. Page: 整個頁面的switch
製作動畫的思考流程：
在principle中製作動畫時，最重要的便是拆解效果，釐清需要哪些屬性達成；為求慎重我們必須要把每個要素清楚地定義出來，這些項目能處理掉大部分的互動機制：
行程：開始到結束的過程，包含時間、距離以及trigger的起始所綜合的概稱
位移量：每單位時間，物件的 X / Y 方向的差異量 (deltaX, deltaY)/t
形變量：每單位時間，物件 X / Y 方向的變形 (width, height)
轉動量：每單位時間，以軸心點為基準的角度差 (deltaΘ)/t
比例變化：每單位時間，物件的比例差(deltaScale)/t
Alpha Fill： 每單位時間，物件的Alpha填充差(deltaAlphaFill)/t
將這幾個變化量定義後，著手進行互動效果的prototype製作之前，我會依照以下流程開始思考：
0. 簡單用草圖再現這個互動效果
1. 這互動效果有幾個物件 (object/layer)參與？
2. 這互動的觸發條件(Event)是什麼？
3. 參與的物件在互動過程中變化歷程？
4. 要達到變化歷程，物件本身該具有什麼屬性？限制是什麼？
5. 這個互動是否可以拆解成幾個次要的小型互動元件？
6. 手上的sketch原始檔該怎麼重新輸出成對應的物件
7. 試著將互動在紙上重新寫下建置流程
8. 上機實作
官網教學案例Review
案例1~3
這三個案例是簡單入門，大抵上是教基本操作馬上可以做出可以動的prototype，一直到基礎component觀念；但我沒閱讀document先看影片，結果後面複雜的互動示範檔案卡關…才回頭看文件重新整理思路
案例4~5
利用Group的mask特性，另外也使用driver在單一art board下，不需要user input 任何event，只要順應位移量變化自動做出對應改變。
詳細的影片可以在官網上看到，下篇針對示範檔拆解建構的邏輯
