整個動效的制作時間只有5分鐘，效率遠遠高于AE，這正是Principle的優(yōu)勢所在。

當前，設計行業(yè)存在多種設計軟件，在互聯(lián)網(wǎng)產(chǎn)品設計領域，Sketch已經(jīng)取代了PS成為主流的視覺設計軟件，并有逐漸取代Axure來進行交互設計的趨勢。然而，相對于交互原型工具Axure而言，sketch不支持交互動效設計，同時，導出的HTML文件的排序需要人為干預，不能自動體現(xiàn)頁面的邏輯關系。因此，很多銜接sketch的軟件完成動效設計的軟件應運而生，包括Flinto、Principle。其中，Principle+Sketch被稱為UI設計的黃金搭檔。

相較于Flinto，Principle強大的動效預置，可以極大的減少動效設計的時間，并能完成出較為優(yōu)質(zhì)的動效設計。在效率為王的互聯(lián)網(wǎng)產(chǎn)品時代，Principle確實是一款適合交互設計師使用的動效軟件。

下面，我們就詳細了解一下principle。

一. 主要功能

目前版本的Principle，就動效設計功能方面，相較于Axure、AE而言，要簡單很多。它是一款主要用來銜接交互原型與動態(tài)效果呈現(xiàn)的動效制作軟件，其功能可分為五大類，分別是基礎功能、Create Component（組件）、Animate（時間軸）、Drivers（聯(lián)動）以及頁面動效。

主要功能

1. 基礎功能

基礎功能包括矩形、文字工具，導入功能，群組、Mirror、上/下一層。目前自定義工具僅支持矩形（快捷鍵R）和文字工具（快捷鍵T），因此在制作頁面動效時，需要從sketch中導入或copy頁面元素，來完成頁面動效。在矩形工具的基礎上，可以延伸出正方形、圓型、圓角矩形。

導入功能是銜接sketch的主要接口，每次只能導入已打開sketch文件的一個page頁面中的元素。在導入sketch文件時，比較省事的做法是，在文件中新建一個page，作為導入素材的入口，同時，page可以重復導入，最新導入的頁面（不同頁面元素）會放到最后。Principle中的畫板大小與最后一次的畫板大小保持一致，因此導入的畫板也要保持一致。

群組、上/下一層的功能操作與sketch一致。Mirror是用來在制作手機應用時，在手機端進行預覽操作的功能，目前只支持Apple的產(chǎn)品連接。

2. 組件

組件（Create?Component）與Axure中的元件庫、sketch中的symbol類似，可以包含動效，支持在不同principle文件中進行復制、粘貼。這是一個實用的功能，如《動效設計-交互設計的最后一公里（一）》中的菜單動效、加載動效等，就可以制作成組件，在其他項目中可以作為動效控件加以應用，直接復制、粘貼即可。由此，可以推演提煉出動效設計控件，在版本迭代中可以在動效方面保持產(chǎn)品氣質(zhì)的延續(xù)性。

3. 時間軸

時間軸（Animate）是對AE時間軸的一種簡化，不能進行K幀(此處有疑問者，請參考本系列文章《動效設計-交互設計的最后一公里（一）》），只能控制某一動效在時間維度上的起止位置以及持續(xù)時間。另外，元素的運動形式也可以在時間軸上進行設置調(diào)整，包括：默認、緩入、緩出、緩動、彈性、線性、無等七種運動形式，同時可以對前五種進行曲線調(diào)節(jié)。

運動形式及調(diào)節(jié)

4. 聯(lián)動

聯(lián)動（Drivices）是對時間軸功能的補充與擴展。Principle主要應用于制作移動端產(chǎn)品的交互、動效設計，相較于web頁面，移動端設備主要是觸屏操作，包括點擊、拖動、滑動等，這些元素之間的關系是位置上的聯(lián)動關系，而不是時間上的。

5. 頁面動效

頁面動效包括靜態(tài)、拖拽、滾動、翻頁四類。嚴格意義，頁面動效并不是獨立的功能，需要配合Drivices來使用。因此，在確定了滾動、拖拽、翻頁以后，選擇一個觸發(fā)操作元素，在Drivices中，對其在不同位置的節(jié)點處K關鍵幀，同時，將聯(lián)動元素在不同節(jié)點處的變化進行調(diào)整，進而形成位置關系上的聯(lián)動。

二. 優(yōu)勢

相較于其他工具，Principle的優(yōu)勢還是比較明顯。基于其優(yōu)勢，Principle在合適的動效設計上效率非常高，同時動效的質(zhì)量也比較高。整體來說，Principle的優(yōu)勢如下：

1. 擁有sketch的頁面布局

猶如PS/AI與AE之間的關系，Principle與sketch之間存在著很多相似之處，包括頁面布局及風格、快捷鍵等，很好的讓交互設計與動效設計進行銜接，減少了動效工具的學習成本。sketch文件的導入可以實時進行，此時的sketch文件猶如動效設計階段的組件，在動效設計過程中，需要哪一個頁面，就可以將頁面單獨導入，減少了頁面的復雜度。

Principle軟件界面

2. 補間動畫

源于Flash的補間動畫幾乎是所有動效工具的特點，也是保持動效流暢的主要環(huán)節(jié)。相較于其他工具的補間動畫，Principle的補間動畫是預設的，并且經(jīng)過實際的實驗驗證，可以直接使用。如上文中所描述，principle的效果預設是隱藏在動效的時間軸上，在設置動效持續(xù)時長的同時，調(diào)整其運動樣式與效果。另外，補間動畫的形式與節(jié)奏會自動統(tǒng)一到整個動效設計中，即新建的動效預設與上一次的預設保持一致。

補間動畫

如上圖，制作出動畫的起點與終點畫面，在兩個畫面之間制動生成補間動畫，通過調(diào)整補間動畫的運動形態(tài)與樣式，完成動效的制作。

3. Keynote的神奇移動效果

熟悉keynote的小伙伴應該知道，其最大的亮點就是神奇移動。在Principle中，元素的運動變化原則與Keynote一致，即若兩個畫板中兩個元素的命名一樣，在畫板切換過程中，則默認該元素從畫板一的樣式漸變到畫板二的狀態(tài)，包括顏色、位置、透明度、形狀等，但前提是該元素是可編輯的，而不是圖片。這種神奇移動的效果保證了動效的連續(xù)性與流暢性。

類似Keynote的”神奇移動”

對于變化的形式、速率以及時機可以在Animate中進行調(diào)節(jié)。

4. 簡易方便的Animate

Animate是用來控制補間動畫的節(jié)奏、形式、時間以及時機等，其控制較為粗糙，不如AE的時間細致。在神奇移動的案例中，元素的變化有長、高、旋轉(zhuǎn)、透明度四種，在Animate中可以控制每種變化的開始時間（錯幀）以及持續(xù)的時長，來控制動效效果。同時，其動效形式的預設與比較符合用戶的心理預期，在動效節(jié)奏的調(diào)整上可以節(jié)省較多的時間。

Animate面板

5. 類似Origami的事件管道拖拽

類似Origami的事件管道拖拽該功能指的就是Drivice，這也是Principle在移動端產(chǎn)品設計中的優(yōu)勢所在。Animate是時間與元素變化效果之間的映射關系，那么，Drivices就是一個元素的坐標位置與其他元素變化效果的映射關系。這個面板在拖動等的操作中應用的極為廣泛，可以逼真的模擬觸控操作中的位置映射關系。

Drag的Drivice應用

在示例中，設置的滑塊位置與矩形形狀圓角大小、旋轉(zhuǎn)的映射，實現(xiàn)滑動調(diào)節(jié)圓角大小與旋轉(zhuǎn)的效果。

三. 劣勢

一個工具的優(yōu)勢較為明顯，往往其缺點（限制）也較為突出，Principle也是一樣。根據(jù)作者多個項目的時間經(jīng)驗，發(fā)現(xiàn)了以下較為突出的缺點：

1. Principle不太適合整體產(chǎn)品的動效設計。Principle的畫板是橫向順序排列，用戶不能自定義其位置，因此其畫板數(shù)量不易過多，否則頁面管理將會使人崩潰。Principle比較適合核心功能、局部頁面或頁面細節(jié)動動效設計。

2. 動效預設質(zhì)量比較高，但自定義形式較弱。Principle的動效變化形式，包括顏色、大小、位置、透明度、形變（極少）等，這就限制了設計師對動效的修改與再創(chuàng)作。因此，Principle比較適合做轉(zhuǎn)場類、入場類以及引導類動效，但是對于牽涉到復雜形變、效果的品牌與反饋類動效，就是Principle所鞭長莫及的了。

3. 對于Sketch導入的元素，有些是不能編輯的，包括文字、symbol以及有些群組。這就導致在這些元素的動效變化時，就需要在Principle中重新制作。

4. Principle中每一個畫板相當于一個一個關鍵幀，對于已經(jīng)完成的動效設計，在過程中新增關鍵幀（畫板）會比較繁瑣，需要刪除兩個關鍵幀之間的動效鏈接，然后新增一個畫板，最后將新增畫板與前后的畫板進行鏈接，形成新的動效。這也是在Principle比較適合順序K幀的原因。

5. Principle效果文件的導出僅支持GIF與mov格式的導出。其導出是對操作的錄制，因此，對自動類型動畫的錄制開始的時機較難把握，如果有必要需要其他軟件進行剪切編輯。

四. 技巧與特點

Principle的動效制作原理與AE不同，因此，其特點與應用技巧也略有差異。在長時間使用Principle以后，對于一些功能的特殊使用方式也有一些心得：

1. Principle動效中，元素屬性的變化是通過不同屬性節(jié)點之間形成補間動畫形成的，Principle識別不同畫板之間的元素是通過名稱的一致性。名稱一致，則該元素在兩個畫板之間會順暢的形成補間動畫（是可編輯元素），因此若下個頁面中要出現(xiàn)某個元素，至少在上一個頁面要存在該元素，否則就會違背動效設計的原則（有始有終、三不）。

2. Principle中每一個畫板就是一個最小單位的節(jié)點關鍵幀，在制作動效時，將連接動效指向主畫板（或自己），復制出新的畫板，然后在新畫板上進行動效元素的變化調(diào)整。這樣可以保證每個畫板中的元素名稱保持一致。

3. 不要將sketch中的整個Page頁面的畫板一起導入Principle，這樣畫板的管理會造成極大的困擾。本人的做法是在sketch中新建一個頁面，作為專門進行導入的入口，同時頁面中的畫板不易過多，最好有一個主頁面，其他頁面作為備用素材使用。

4. 對于透明的元素，Principle是不能作為動效鏈接的元素，因此在制作觸控熱區(qū)時不能將透明度降為零，可保持1% 的不透明度。但是，即使元素的透明度為零且不能作為鏈接元素，被該元素完全覆蓋的其他元素也是不能作為鏈接元素，這時可以選中該元素，勾選touchable，就可以被點擊到。

5. Principle中的旋轉(zhuǎn)是以元素的物理中心為圓心進行旋轉(zhuǎn)的。若要制作元素圍繞一個點進行旋轉(zhuǎn)時，可以以該點作為中心對稱的點建一個同樣的元素，并將二者進行群組，將其中一個的透明度改為零，這樣群組的中心點就在旋轉(zhuǎn)中心了。

6. principle中的群組是單獨一個元素，其大小是可以自定義的，不是由群組的元素大小所確定的，并且群組可以作為一個元素進行鏈接對象制作動效。因此，在這種特性下，可以將群組作為熱區(qū)使用或用來調(diào)整元素的旋轉(zhuǎn)中心等。

其特點不止于此，有很多技巧等待你去發(fā)掘……

到目前為止，作者已經(jīng)完成了若干線性加載動效控件的制作，如下圖：

Loading

我們以其中一個案例的制作，結束本次對Principle的探討。

加載動效

五. 示例講解

第一步：新建直徑分別為9、7、5、3、1的圓形，圓形的直徑要是連續(xù)的奇數(shù)或偶數(shù)，保證圓形能夠絕對的居中對齊。

新建原型

第二步：將每個圓單獨群組，并調(diào)整其群組的高度，分別為54、52、50、48、46，并將其進行居中對齊。上文中已經(jīng)提起，群組的中心可以作為整體旋轉(zhuǎn)中心，因此，最大的群組高度就是最終動效的直徑。選擇所有群組，將其左右居中對齊。

調(diào)整群組高度

第三步：選中畫板，點擊右側出現(xiàn)的小閃電圖標，選擇最后一個指向畫板1，產(chǎn)生一個新的畫板，并選中畫板2中的所有群組，修改旋轉(zhuǎn)角度為360°。

起始畫板樣式

新畫板

第四步：在Animate中修改每個動效條的長度為1s，根據(jù)半徑，從大到小，以此錯幀（0.2s）。動效條的長度決定了一個元素旋轉(zhuǎn)一周的時長。錯幀可以實現(xiàn)元素的跟隨效果，錯幀的時長控制了兩兩元素在運動過程中的距離，同時還受到整體時長的影響。

Antimate調(diào)節(jié)

第五步：按照第三步的方式，以第二個畫板為基礎，產(chǎn)生第三個畫板，并將第三個畫板中的其他元素全部刪除，只保留半徑最大的圓，修改其名稱不與其他元素重名。如果沒有第三個畫板，直接指回第一個畫板，畫面中的元素會出現(xiàn)逆向的運動，即每個群組會將旋轉(zhuǎn)角度變回0°，回到第一個畫板的狀態(tài)。

制作替身

第六步：選中最后一個畫板，按照步驟三，將箭頭指向第一個畫板，即可完成該加載動效的制作。

形成閉環(huán)

整體上，整個動效的制作時間只有5分鐘，效率遠遠高于AE，這正是Principle的優(yōu)勢所在。

另外，需要加載案例工程文件的童鞋，可以到百度云盤中下載：

鏈接：https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug

密碼：d3j0

相關閱讀

交互設計的最后一公里（一）——動效設計

#專欄作家#

弘毅道，公眾號：UIUX設計工作坊，人人都是產(chǎn)品經(jīng)理專欄作家。關注to B業(yè)務，尤其擅長后臺程序界面設計，包括需求溝通，原型設計以及后期的設計評審等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議