軟件介紹

Principle是一款專業(yè)的交互設(shè)計(jì)軟件，它由前蘋果工程師打造，為用戶提供一個(gè)高效完整的設(shè)計(jì)系統(tǒng)，可以幫助用戶輕松制作出具有交互動(dòng)畫的原型界面，讓用戶能夠?qū)⒆约旱南敕ǜ�好地融入到產(chǎn)品設(shè)計(jì)中。Principle使用起來也很方便簡(jiǎn)單，有需要的用戶快來下載吧。

特色功能

專為最大想象力打造

您可能需要設(shè)計(jì)很多東西：簡(jiǎn)短的動(dòng)畫，流暢的交互或廣泛的多屏應(yīng)用。無論您做什么，都可以使用Principle做到。

全新，但立即熟悉

借助畫板，魔術(shù)動(dòng)畫和時(shí)間線，使用Principle將為您提供Déjàvu。

在您離開的地方接機(jī)

使用簡(jiǎn)單的一鍵式導(dǎo)入器，從您喜歡的設(shè)計(jì)工具中導(dǎo)入設(shè)計(jì)。您的設(shè)計(jì)將出現(xiàn)在Principle中，為您帶來新的生命。如果您進(jìn)行更改，再次導(dǎo)入將智能地合并您的工作。

適用于移動(dòng)，Web和桌面的設(shè)計(jì)

選擇設(shè)備預(yù)設(shè)或輸入自定義Artboard尺寸以針對(duì)您喜歡的平臺(tái)進(jìn)行設(shè)計(jì)。懸停事件和鼠標(biāo)滾輪滾動(dòng)使創(chuàng)建真實(shí)的Web和桌面原型變得容易。

分享您的設(shè)計(jì)

適用于iOS的Principle Mirror可讓其他人在其設(shè)備上查看您的設(shè)計(jì)。在設(shè)計(jì)時(shí)，您可以通過將設(shè)備插入計(jì)算機(jī)來立即進(jìn)行交互。您也可以導(dǎo)出一個(gè)獨(dú)立的Mac應(yīng)用程序供他人查看。

使用教程

1.繪圖區(qū)：Principe大部分工作都在這里完成，畫板概念相當(dāng)于Sketch，可以選擇多種設(shè)備的尺寸，當(dāng)前編輯的畫板會(huì)有綠色的框，添加畫板快捷鍵A。

2.預(yù)覽區(qū)：當(dāng)前畫布操作的動(dòng)效都可以在預(yù)覽區(qū)看到，錄制動(dòng)效也是在這里，點(diǎn)擊預(yù)覽區(qū)上方的攝影機(jī)。

3.圖層列表：和PS與Sketch的圖層概念相當(dāng)。

4.檢查器：顯示了選中圖層的各種屬性，包括：對(duì)齊操作、X/Y坐標(biāo)、長(zhǎng)/寬、角度、縮放、透明度、圓角率、關(guān)聯(lián)的圖片、顏色填充、組合裁剪、水平/豎直操作。

5.動(dòng)效視圖：點(diǎn)擊Principle上方Animation可以打開，切換動(dòng)畫的時(shí)間和動(dòng)畫曲線。

6.聯(lián)動(dòng)視圖：點(diǎn)擊Principle上方Drivers可以打開，可以添加關(guān)鍵幀，制作補(bǔ)間交互動(dòng)畫，類似于Flash的時(shí)間軸。

注意的問題：

1.Principle沒有參考線(大家不要費(fèi)心去找了)

2.Principle不同畫板間圖形的變化是通過相同命名完成的，所以在沒有作出自己想做的動(dòng)畫的時(shí)候，查看自己圖層的命名是一個(gè)很好的檢查方法。

3.Principle在頁(yè)面動(dòng)畫比較繁瑣的時(shí)候邏輯可能會(huì)有一些復(fù)雜。

4.Principle可以做蒙板(不要再有人來跟我說Principle為什么不能做蒙板了!)圖層成組之后點(diǎn)擊“Clip Sublayers“有一些版本也叫”Clip Children”。

5.Principle其實(shí)經(jīng)常被大家和一款叫Flinto 的原型制作軟件相比較，我在這里和大家簡(jiǎn)單說一些關(guān)于兩者的區(qū)別，大家可以根據(jù)自己的需要選擇想要學(xué)習(xí)的軟件。(Flinto的好處在于有中文版和可以在非Mac上使用，價(jià)格也是99美元。)

Principle更適合做少量界面之間，或者元素之間的精致動(dòng)效，一方面是因?yàn)镻rinciple有一個(gè)聯(lián)動(dòng)視圖(drivers)的功能，另一方面是因?yàn)镻rinciple在動(dòng)畫可以完成自動(dòng)補(bǔ)間(小圓到大圓)(三角展開)。但是在一整套app或者界面需要展示的時(shí)候就會(huì)需要完成復(fù)雜的邏輯。

實(shí)用技巧

1、大家都知道，如果直接將矩形圖層的Opacity透明度設(shè)置為“0”，圖層是不可以添加觸發(fā)事件(閃電??)的，正確利用矩形仿“熱點(diǎn)”選區(qū)的方法是將圖中Fill滑塊移動(dòng)到最左側(cè)，看起來是透明的卻可以添加觸發(fā)事件；

2、剛上手時(shí)，對(duì)Driver(聯(lián)動(dòng))和Animate(補(bǔ)間動(dòng)畫)往往容易混淆，我用自己的理解說說區(qū)別，不準(zhǔn)確的地方，求指正；

Driver 空間位置變化時(shí)，同一個(gè)Artboard頁(yè)面，前提是發(fā)生了Drag/Scroll/Page

Animate 時(shí)間早晚/長(zhǎng)短變化時(shí)，不同Artboard頁(yè)面切換，前提是不同Artboard種的Layer圖層名字要相同(有很多人遇到切換頁(yè)面時(shí)，系統(tǒng)自動(dòng)添加動(dòng)畫造成頁(yè)面里面亂糟糟的情況，就是因?yàn)槊�字問題)；

3、如果你想在同一屏，即垂直又水平滾動(dòng)頁(yè)面元素，就需要用到“Create Component”，相當(dāng)于創(chuàng)建了父子頁(yè)面，在父頁(yè)面設(shè)置垂直，子頁(yè)面設(shè)置水平；

4、Sketch導(dǎo)入Principle要求兩個(gè)軟件都是打開狀態(tài)，默認(rèn)導(dǎo)入Sketch打開置于最頂層的文件；

5、添加觸發(fā)事件時(shí)，Tap指向自己所在的Artboard，將快速?gòu)?fù)制一個(gè)自己所在的Artboard；

6、按住CMD，同時(shí)鼠標(biāo)點(diǎn)擊矩形或者文本的邊框上，可以實(shí)現(xiàn)旋轉(zhuǎn)；

7、在左側(cè)檢查器面板中，用鼠標(biāo)在數(shù)值輸入框下面左右滑動(dòng)，可以直接調(diào)整數(shù)值，鼠標(biāo)實(shí)際上會(huì)變成水平箭頭，因?yàn)間if是截屏錄制的，造成鼠標(biāo)樣式不同；

8、在底部Animate面板中，關(guān)鍵幀(Keyframes)是可以用鼠標(biāo)實(shí)現(xiàn)多選的；

9、在底部Animate面板中，點(diǎn)擊雪花，可以Frozen凍結(jié)某個(gè)動(dòng)畫屬性發(fā)生變化；

10、最后說說“Clip Sublayers”，如圖，倒敘展現(xiàn)勾選與否的對(duì)比效果，正序的話，是通過“Group”三個(gè)圖層形成了選區(qū)，選區(qū)的屬性是可以在檢查器面板調(diào)整的，圖中是將選區(qū)設(shè)置成圓形，這樣勾選“Clip Sublayers”后，實(shí)現(xiàn)了圓形遮罩效果。