Principle Mac版是一款可以在蘋(píng)果電腦MAC OS平臺(tái)上使用的交互設(shè)計(jì)工具，五分鐘即可制作出一個(gè)具有完整交互動(dòng)畫(huà)的原型，并且可將交互動(dòng)畫(huà)生成視頻或者 Gif 分享到 Dribbble、Twitter 等社交平臺(tái)。此外 Principle 還支持多種尺寸的原型設(shè)計(jì)，包括 Apple Watch。需要此款工具的朋友們可以前來(lái)下載使用。

　　你的動(dòng)畫(huà)交互想法，比如設(shè)計(jì)更好的移動(dòng)APP交互效果成為現(xiàn)實(shí)，用Principle輕松幫你實(shí)現(xiàn)。Principle的原則使得它易于創(chuàng)建動(dòng)畫(huà)和交互式的用戶(hù)界面設(shè)計(jì)。

　　Principle是一款新開(kāi)發(fā)的交互設(shè)計(jì)軟件。相比 Pixate 更容易上手，界面類(lèi)似 Sketch 等做圖軟件，思路有點(diǎn)像用 Keynote 做動(dòng)畫(huà)，更「可視化」一些。發(fā)現(xiàn)目前還不能做條件相關(guān)的交互，例如「當(dāng) A 的 Scroll Release 位置大于某值時(shí)跳到下頁(yè)」。作者目前在對(duì)軟件進(jìn)行升級(jí)開(kāi)發(fā)，值得嘗試和繼續(xù)關(guān)注。

使用principle制作簡(jiǎn)單的Toast動(dòng)畫(huà)

軟件打開(kāi)后，有一個(gè)300*300的Artboard在界面中，使用過(guò)Illustrator和Sketch的人應(yīng)該理解。這是一個(gè)畫(huà)板的概念，我們?cè)O(shè)計(jì)的各種元素都應(yīng)該在這個(gè)畫(huà)板上。工具欄也沒(méi)幾個(gè)按鍵，剛一開(kāi)始的話，不容易被理解。即使對(duì)于有AE基礎(chǔ)的人來(lái)說(shuō)，開(kāi)始也要先了解Principle的動(dòng)畫(huà)制作邏輯的。我們一步一步地講并配以截圖，第一節(jié)講得詳細(xì)一點(diǎn)，力求打好基礎(chǔ)～

初次打開(kāi)Principle

第一步

選中某元素，在界面的左側(cè)是該元素的屬性欄。首先把Artboard的大小設(shè)成常規(guī)的手機(jī)屏幕大小“750*1334”。接著，我們點(diǎn)擊左上角的“Rectangle”，頁(yè)面中會(huì)新建一個(gè)方塊，我們?cè)冱c(diǎn)一下“Text”，然后屏幕中又出現(xiàn)一個(gè)方塊和兩個(gè)單詞。

第二步

在左側(cè)屬性欄可以修改方塊大小(當(dāng)然也可以拉方塊邊緣改變方塊大小)。鼠標(biāo)選中文字，左側(cè)邊欄可以修改文字的屬性，雙擊文字可以修改文字內(nèi)容。如下圖：

屬性欄↓

第三步

現(xiàn)在來(lái)到了我們關(guān)鍵的一步：怎么出現(xiàn)動(dòng)畫(huà)效果。

選中Artboard1，它周?chē)霈F(xiàn)綠色的框，右側(cè)出現(xiàn)一個(gè)??閃電圖標(biāo)，這個(gè)就是動(dòng)作觸發(fā)的條件編輯入口。

我們點(diǎn)擊這個(gè)閃電，出現(xiàn)一個(gè)菜單，這些就是動(dòng)作觸發(fā)的條件們。

后面會(huì)對(duì)這個(gè)動(dòng)作觸發(fā)條件做詳細(xì)的講解。

重點(diǎn)來(lái)了!我們選中“Tap”并拖動(dòng)，發(fā)現(xiàn)一個(gè)藍(lán)色的箭頭，將箭頭指向Artboard1并松開(kāi)鼠標(biāo)。然后如圖，工作區(qū)又新增了一個(gè)畫(huà)板，自動(dòng)命名為Artboard2：

然后，我們將Artboard2上的toast(方塊和文字)向下拖動(dòng)一段距離，使其和Artboard1上的toast有位置變化，如圖 ：

這個(gè)時(shí)候，我們的設(shè)計(jì)就會(huì)動(dòng)了!

查看動(dòng)畫(huà)方法：鼠標(biāo)選回第一個(gè)畫(huà)板，右側(cè)的動(dòng)效預(yù)覽窗口會(huì)回到初始狀態(tài)，在預(yù)覽窗口中，鼠標(biāo)點(diǎn)擊一下(即我們剛剛選擇的Tap觸發(fā)條件)，就看到toast動(dòng)起來(lái)了。動(dòng)效如下：

我們也可以數(shù)據(jù)線接到手機(jī)上，打開(kāi)裝的Principle mirror查看動(dòng)效。

通過(guò)上面這個(gè)toast的動(dòng)效例子，我們可以理解Principle的動(dòng)畫(huà)原理。如圖：

其中1，2，3步我們已經(jīng)做到了，第4步并不是必須的。下一節(jié)我們會(huì)針對(duì)動(dòng)畫(huà)的形成邏輯有更深入的講解。

1. Sketch文件的導(dǎo)入

首先，先把要把畫(huà)好的Sketch文件打開(kāi);

再打開(kāi)Principle，點(diǎn)File – Import From Sketch ，這里會(huì)直接顯示你剛打開(kāi)的Sketch文件名.

根據(jù)你的Sketch文件的大小選擇 放大的倍數(shù)(例如：如果你畫(huà)的是375*667的就選擇2X，750的就選擇1X)不選也可以，但是可能導(dǎo)出的畫(huà)質(zhì)不清晰.

這樣就導(dǎo)入成功了，會(huì)了這個(gè)功能就可以將之前設(shè)計(jì)的sketch文件做動(dòng)畫(huà)了，Sketch強(qiáng)大的繪圖功能 Principle的動(dòng)畫(huà)制作，完美!

2. 補(bǔ)間動(dòng)畫(huà)邏輯

談到補(bǔ)間動(dòng)畫(huà)我們要先說(shuō)逐幀動(dòng)畫(huà)，逐幀動(dòng)畫(huà)是最原始的動(dòng)畫(huà)，就是很多連續(xù)的圖片排成序列，一張一張的播放，形成的“動(dòng)畫(huà)”效果.

補(bǔ)間動(dòng)畫(huà)是逐幀動(dòng)畫(huà)的升級(jí)版，不需要我們準(zhǔn)備大量的圖片形成的圖片序列，只要做一些關(guān)鍵畫(huà)面(一般被叫做關(guān)鍵幀)即可，系統(tǒng)識(shí)別關(guān)鍵幀之間的差異，幫助我們補(bǔ)齊關(guān)鍵幀之間的畫(huà)面，形成動(dòng)畫(huà).

Principle的動(dòng)畫(huà)制作邏輯是：每個(gè)畫(huà)板就是關(guān)鍵幀

舉例：

左圖畫(huà)板1即關(guān)鍵幀1，右圖畫(huà)板2即關(guān)鍵幀2，關(guān)鍵幀1中的方塊在左邊，關(guān)鍵幀2的方塊在右邊，我們添加補(bǔ)間動(dòng)畫(huà)的話，按照補(bǔ)間動(dòng)畫(huà)的邏輯，系統(tǒng)應(yīng)該補(bǔ)足方塊從左到右移動(dòng)的所有的畫(huà)面.

添加補(bǔ)間的方法：點(diǎn)擊畫(huà)板1旁邊的閃電按鈕，選擇觸發(fā)條件Tap拖到畫(huà)板2上，補(bǔ)間動(dòng)畫(huà)就做好了.如下：

最簡(jiǎn)單的補(bǔ)間動(dòng)畫(huà)就完成了.

所以我們暫且把Principle的畫(huà)板理解成關(guān)鍵幀.

透明度動(dòng)畫(huà)

我們接著上次的Toast動(dòng)畫(huà)做，我們把文字和底色框選，按command G成組，調(diào)節(jié)這個(gè)組的Opacity(透明度)屬性到“0%”，如圖：

ok啦!我們?cè)镜囊苿?dòng)吐司效果增加了透明度動(dòng)畫(huà)效果，動(dòng)畫(huà)如下：

是不是很像現(xiàn)在主流toast的感覺(jué)了?～

更新日志

v6.11

分享到網(wǎng)絡(luò)

支持在 Android、Windows、Linux、macOS 和 iOS 上查看共享原型

共享原型包括字體信息，因此字體總是看起來(lái)正確

導(dǎo)入說(shuō)明 - 了解為什么在導(dǎo)入時(shí)會(huì)展平圖層

導(dǎo)出交互式頁(yè)面 - 獲取您設(shè)計(jì)的獨(dú)立 HTML 文件，用于托管在您自己的服務(wù)器上或發(fā)送給其他人

新的導(dǎo)出菜單：共享到 Web、導(dǎo)出交互式頁(yè)面、圖像、錄制視頻、錄制 Gif

更新了屬性檢查器 UI

添加了“設(shè)置為主頁(yè)畫(huà)板”按鈕以輕松更改原型開(kāi)始的位置

添加在編輯器中每個(gè)畫(huà)板上方的畫(huà)板名稱(chēng)

刷新了所有圖標(biāo)

v6.9

更快地導(dǎo)出具有多個(gè)視頻的原型的視頻

將“導(dǎo)出Mac App”重新添加到“文件”->“導(dǎo)出”菜單中

導(dǎo)出的交互式頁(yè)面的各種性能和錯(cuò)誤修復(fù)

v6.8

修復(fù)導(dǎo)出的GIF中的故障顏色

gif導(dǎo)出的更多性能改進(jìn)

v6.7

加快視頻導(dǎo)出

加速gif導(dǎo)出

v6.5

將所有導(dǎo)出選項(xiàng)添加到文件->導(dǎo)出菜單

修復(fù)視頻和GIF導(dǎo)出已中斷的圖層

修復(fù)視頻和GIF導(dǎo)出不應(yīng)該被填充的問(wèn)題

v6.4

現(xiàn)在，畫(huà)板名稱(chēng)顯示在編輯器中每個(gè)畫(huà)板的上方

將“導(dǎo)出為HTML”重命名為“導(dǎo)出獨(dú)立查看器”

添加警報(bào)，使您知道倒帶原型時(shí)錄制已停止

修復(fù)了導(dǎo)致視頻導(dǎo)出中有時(shí)缺少圖層的錯(cuò)誤

獨(dú)立查看器的許多錯(cuò)誤和性能修復(fù)

v6.3

增加了“共享到網(wǎng)絡(luò)”和“導(dǎo)出到HTML”的視頻比特率

修復(fù)了帶有自動(dòng)事件的固定組件，這些組件在不應(yīng)該共享到Web時(shí)會(huì)受到影響

共享到Web中的固定單關(guān)鍵幀驅(qū)動(dòng)程序

修復(fù)了“共享到網(wǎng)絡(luò)”中的視頻停頓

修復(fù)了編輯文本圖層文本時(shí)的撤消

修復(fù)了有時(shí)在共享到Web中某些字符字體不正確的問(wèn)題

修復(fù)了當(dāng)工具欄不足以容納所有項(xiàng)目時(shí)導(dǎo)致的崩潰

v6.2

添加了“設(shè)置為家用畫(huà)板”按鈕，可以輕松更改原型的開(kāi)始位置

修復(fù)了導(dǎo)致視頻圖層有時(shí)導(dǎo)出旋轉(zhuǎn)的錯(cuò)誤

固定的原理文件大小即使刪除組件后也不會(huì)變小

更改視頻層的視頻文件不再更改其播放/暫?；騼鼋Y(jié)的媒體時(shí)間狀態(tài)