整個(gè)動(dòng)效的制作時(shí)間只有5分鐘，效率遠(yuǎn)遠(yuǎn)高于AE，這正是Principle的優(yōu)勢所在。

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

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

下面，我們就詳細(xì)了解一下principle。

一. 主要功能

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

主要功能

1. 基礎(chǔ)功能

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

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

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

2. 組件

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

3. 時(shí)間軸

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

運(yùn)動(dòng)形式及調(diào)節(jié)

4. 聯(lián)動(dòng)

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

5. 頁面動(dòng)效

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

二. 優(yōu)勢

相較于其他工具，Principle的優(yōu)勢還是比較明顯?；谄鋬?yōu)勢，Principle在合適的動(dòng)效設(shè)計(jì)上效率非常高，同時(shí)動(dòng)效的質(zhì)量也比較高。整體來說，Principle的優(yōu)勢如下：

1. 擁有sketch的頁面布局

猶如PS/AI與AE之間的關(guān)系，Principle與sketch之間存在著很多相似之處，包括頁面布局及風(fēng)格、快捷鍵等，很好的讓交互設(shè)計(jì)與動(dòng)效設(shè)計(jì)進(jìn)行銜接，減少了動(dòng)效工具的學(xué)習(xí)成本。sketch文件的導(dǎo)入可以實(shí)時(shí)進(jìn)行，此時(shí)的sketch文件猶如動(dòng)效設(shè)計(jì)階段的組件，在動(dòng)效設(shè)計(jì)過程中，需要哪一個(gè)頁面，就可以將頁面單獨(dú)導(dǎo)入，減少了頁面的復(fù)雜度。

Principle軟件界面

2. 補(bǔ)間動(dòng)畫

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

補(bǔ)間動(dòng)畫

如上圖，制作出動(dòng)畫的起點(diǎn)與終點(diǎn)畫面，在兩個(gè)畫面之間制動(dòng)生成補(bǔ)間動(dòng)畫，通過調(diào)整補(bǔ)間動(dòng)畫的運(yùn)動(dòng)形態(tài)與樣式，完成動(dòng)效的制作。

3. Keynote的神奇移動(dòng)效果

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

類似Keynote的”神奇移動(dòng)”

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

4. 簡易方便的Animate

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

Animate面板

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

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

Drag的Drivice應(yīng)用

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

三. 劣勢

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

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

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

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

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

5. Principle效果文件的導(dǎo)出僅支持GIF與mov格式的導(dǎo)出。其導(dǎo)出是對(duì)操作的錄制，因此，對(duì)自動(dòng)類型動(dòng)畫的錄制開始的時(shí)機(jī)較難把握，如果有必要需要其他軟件進(jìn)行剪切編輯。

四. 技巧與特點(diǎn)

Principle的動(dòng)效制作原理與AE不同，因此，其特點(diǎn)與應(yīng)用技巧也略有差異。在長時(shí)間使用Principle以后，對(duì)于一些功能的特殊使用方式也有一些心得：

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

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

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

4. 對(duì)于透明的元素，Principle是不能作為動(dòng)效鏈接的元素，因此在制作觸控?zé)釁^(qū)時(shí)不能將透明度降為零，可保持1% 的不透明度。但是，即使元素的透明度為零且不能作為鏈接元素，被該元素完全覆蓋的其他元素也是不能作為鏈接元素，這時(shí)可以選中該元素，勾選touchable，就可以被點(diǎn)擊到。

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

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

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

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

Loading

我們以其中一個(gè)案例的制作，結(jié)束本次對(duì)Principle的探討。

加載動(dòng)效

五. 示例講解

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

新建原型

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

調(diào)整群組高度

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

起始畫板樣式

新畫板

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

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

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

制作替身

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

形成閉環(huán)

整體上，整個(gè)動(dòng)效的制作時(shí)間只有5分鐘，效率遠(yuǎn)遠(yuǎn)高于AE，這正是Principle的優(yōu)勢所在。

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

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

密碼：d3j0

相關(guān)閱讀

交互設(shè)計(jì)的最后一公里（一）——?jiǎng)有гO(shè)計(jì)

#專欄作家#

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

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

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