Principle Mac 中文免费版是一款交互式设计工具,可以帮助用户快速制作出一个完整的动画原型,支持自定义尺寸,可将交互动画生成视频或者GIF动画。适用于iPhone、iPad、Mac、Apple WACTH等设备,从事交互式设计的朋友可以下载!
Principle是一款新开发的交互设计軟件。相比 Pixate 更容易上手,界面类似 Sketch 等做图軟件,思路有点像用 Keynote 做动画,更「可视化」一些。发现目前还不能做條件相关的交互,例如「当 A 的 Scroll Release 位置大于某值时跳到下页」。
你的動畫交互想法,比如設計更好的移動APP交互效果成爲現實,用Principle輕松幫你實現。Principle的原則使得它易于創建動畫和交互式的用戶界面設計。
一.初識界面
Principle的界面與Sketch基本一致,如下圖:
a.屬性區:
在這個區域,你可以對選中的圖層進行各個屬性的調節。如位置、大小、透明度等等
开启軟件后,首先要选择你要演示Demo的环境,点击“Size Presets”即可在弹出的菜单中选择
b.圖層區:
一個“Artoard”即一個畫布,或者理解爲一個頁面。畫布中的圖層按其列表中的上下順序相互交疊
“Artoard”可直接複制粘貼,以此來快速實現頁面間的跳轉效果
c.主舞台:
繪制或直接導入圖片至面板中即可
d.演示區:
直接在這個區域演示頁面效果,並可進行交互預覽,其中還有“一鍵初始”與“錄制”的功能
e.功能區:
Drivers:做交互動畫的神器,使用方式類似“設置關鍵幀”
Animate:主要用它來調整轉場動畫的效果
Group:打組工具
Fonward/Backward:調整圖層交疊的上下關系
二.兩個關鍵操作
1.交互怎麽實現?
點選可交互控件
在彈出的菜單中,選擇你需要的交互方式
按住選項並拖動至要目標頁面中(系統會用紫色給予用戶反饋)
2.轉場動效怎麽設置?
選中你要設置的轉場動畫
在彈出的列表中,調整其變化的屬性(包括大小、位置、透明度等)。若直接點擊前面的“綠塊”,即可停止這個屬性的效果
點擊後面的“Default”可轉場動畫效果(Linear不推薦,有個小哭臉)
三.案例一
滑動Principle畫圖並不方便,所以我還是配合Axure畫線框圖,之後貼入Principle。
1.把“固定圖層”導入到Principle中,如圖中的title模塊
2.頁面可縱向滑動,那麽把“只縱向滑動”的圖層單獨導入
3.某些模塊也可進行橫向滑動,則單獨將其導入(如下圖,導入了四個部分:固定的title、縱向一張圖、橫向兩張圖)
4.把“可滑動”圖層打組
5.整組設置“垂直可拖動”
6.選中橫滑圖層,設置“水平可拖動”
四.案例二:點擊跳轉(浮卡效果)
1.首先導入一個“菜單”圖層,貼在頁面上方
2.复制整个“Artoard”,并把菜单移动到跳转后的位置 (一定要保证移动的图层,在两个Artoard中命名一致)
3.設置動畫(做一個透明的矩形作爲觸控點)
五.案例三:跟隨動畫(漸變的抽屜)
1.導入需要的圖層,打組後設置其可橫滑
2.導入“抽屜圖層”(不跟隨滑動)
3.打開“Drivers”,選擇“可橫滑組”,在0點創建“X”的起始關鍵幀(點Group後面的+號)
4.拖動手柄以移動“可橫滑組”,至抽屜可完整呈現時,創建結束關鍵幀(再次點擊+號)
5.選中“抽屜圖層”,點選起始關鍵幀,創建透明度關鍵幀。並設置起始幀的透明度爲0
6.同理,移動手柄至“可橫滑組”結束幀的位置,設置結束關鍵幀的透明度爲100%
7.複制整個“Artoard”,在新的畫布中,調整圖層至抽屜打開的效果
8.在前一個畫布中,設置“滑動結束”即跳轉的交互
以上就是Principle中比較常用的一些操作,很好理解也非常容易上手,可以極大提高設計師的工作效率。
另外要注意的是,Principle比較適合做“大流程”演示,當你要梳理整體的産品架構或操作流程時,可幫助你快速創建交互原型,發現其中問題或不足。若你想做一些精准的動畫效果,它則無法滿足你的需求,建議使用Origami等其他原型制作工具。
固定造成畫布顯示不正確的問題
固定造成帆布擺脫司機後撤消同步問題