PIXATE中文版是一款好用的动效设计軟件,采用适合设计师的思维方式,通过基本动画、数值对接、原生移動设计就可制作出各种动态效果了,支持实时预览、全平台,有需要的朋友赶快下载吧,可以大大提高设计效率。
軟件特点
1、適合設計師的思維方式
QC的好處是可以比較方便的和程序猿對接,很多動效的實現邏輯和前端的代碼邏輯是相通的。也就是說,使用QC雖然不需要寫代碼,但歸根結底還是猿類的思維方式,對于我們這些一點代碼不懂,邏輯能力又不是特別好的小小設計師來說,還是有些門檻的。看到滿屏的連接線,就讓人有點望而卻步,搞不清其中的邏輯。
作爲設計師,無論是交互還是視覺,無論是用PS、AI還是用Axure、Sketch,我們最最熟悉的一個概念,就是圖層了。而Pixate的操作方式,同樣也是圖層的概念。Pixate的界面,乍一看有點像PS呢。
如上圖所示,左上角是圖層區,我們可以將視覺稿或是高保真的交互稿切圖後導入Pixate中,所有的圖層按照前後順序出現在圖層區中,與PS一樣,上層的圖片會覆蓋在下層的圖片上,圖層還可以設置成組。曆史記錄區域也與PS很相似,記錄最近的20步操作。值得注意的是,Pixate是隨時保存的,如果操作了一堆之後,想要退回到20步以後,就再也回不去了…左下角是手勢交互和動畫區域,包括常用的手勢操作(拖拽、單擊、雙擊、長按、旋轉、縮放、滾動)和常見的動效(移動、縮放、旋轉、漸隱漸顯、變色、改變圖片、重複),我們可以將這些手勢或是動效直接拖拽到圖層上,圖層就會實現相應的效果。界面右側則是對圖層屬性和交互和動畫屬性的設置。圖層屬性可以用來設置圖片的大小、位置、透明度等。重頭戲是右下角的交互和動畫屬性設置,通過設置這些參數,可以將手勢和相應的動畫連接起來,連接完成後,一個可以操作、可以交互的原型就制作好了。
那這些參數該如何調呢?這裏給出幾個練習的鏈接,大家做幾個實例之後,就會得心應手了。
2、實時預覽,可交互
Pixate的另一個優點就是可以實時預覽,並且是可以在手機上實時操作和預覽。只需在手機上下載Pixate的app,iOS和Android都可以下載,通過wifi或是數據線連接電腦,就可以實時看到預覽效果了。如果懶得連手機,也可以在模擬器上預覽效果。
3、全平台
你可以online使用,也可以在Mac或是Windows上下载使用。Pixate支持多款iOS和Android机型,甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表,可以说是全平台覆盖。
說了那麽多優點,Pixate也有一些缺點。它還是更適合做頁面級的動畫,對于需要形變、非常細膩的複雜動畫,有些無能爲力。所以Pixate更適合交互設計師來表達界面邏輯,而更加生動有趣的loading或是彩蛋,還是交給視覺大神們,用Flash或是AE來做吧。
PIXATE使用教程
動畫屬性
每個動畫,都有一組依賴于交互的屬性以及動畫模式。本章節將會介紹各個模塊的使用方式。
移動
C持續不斷到終值
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT BEGIN & END
此選項設置後,圖層中的交互將會進行觸發。必須設置起始點和終點。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
MOVE TO
图层的下拉边被用作参考,X 和 Y 字段指定了图层应该移動的位置。
水平 参数 :
Left, Horizontal Center, Right
垂直 参数 :
Top, Vertical Center, Bottom
持續不斷的速率
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT
此选项设置后,图层中的交互将会进行触发。在滚动区域内,如果想要移動图层,就会使用到。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
MOVE
操作下拉列表,允許你修改區域內的參考圖層。
参数 :
Top, Right, Bottom, Left, Horizontal Center, Vertical Center
RATE
在图层移動时,改变了速率这个字段。在滚动交互中,根据这个动画,滚动的方向与速率值的正负相匹配。
執行到終值的時間
適用于所有的交互
CONDITION
这个动画模式只是條件中的一个字段,动画会对其进行检查来决定采取什么 action。更多信息请查看 Conditions。
MOVE TO
这个选项指明了图层要移動到什么地方。图层的下拉边被用作参考,X 和 Y 字段指定了图层应该移動的位置。
EASING CURVE
這就是你想要爲動畫使用的緩和曲線。
DURATION
這個就是你定義的動畫持續的時長。
持續時間和延時可以用來模擬鏈接動畫的體驗。
DELAY
從動畫開始時,設置延時。
縮放
持續不斷到終值
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT BEGIN & END
此選項設置後,圖層中的交互將會進行觸發。必須設置起始點和終點。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
SCALE TYPE
下拉改变了用来縮放图层的方法:通过比例进行縮放或者縮放到指定的尺寸。
LINK X AND Y
这个选项选中后, x 或者 y 中的一个,一起縮放或者分别指定不同的值。
ANCHOR
圖層由九宮格進行分割。
SCALE
通过比例或者指定尺寸来进行縮放。
持續不斷的速率
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT
此选项设置后,图层中的交互将会进行触发。在滚动区域内,如果想要移動图层,就会使用到。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
ANCHOR
圖層由九宮格進行分割。
RATE
在图层移動时,改变了速率这个字段。在滚动交互中,根据这个动画,滚动的方向与速率值的正负相匹配。
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。
SCALE TYPE
下拉改变了用来縮放图层的方法:通过比例进行縮放或者縮放到指定的尺寸。
LINK X AND Y
这个选项选中后, x 或者 y 中的一个,一起縮放或者分别指定不同的值。
ANCHORS
圖層由九宮格進行分割。
SCALE
通过比例或者指定尺寸来进行縮放。
EASING CURVE
這就是你想要爲動畫使用的緩和曲線。
DURATION
這個就是你定義的動畫持續的時長。
持續時間和延遲可以用來模擬鏈接動畫的體驗。
DELAY
從動畫開始時,設置延時。
旋轉
持續不斷到終值
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT BEGIN & END
此選項設置後,圖層中的交互將會進行觸發。必須設置起始點和終點。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
ANCHOR
圖層由九宮格進行分割。
TRANSFORM STYLE
这些按钮用来触发你想要的旋轉样式。二维旋轉是围绕 Z 轴的。三维旋轉表明了要使用到额外的 x 和 y 轴。
ROTATE TO
定义了图层将会旋轉的角度。
BACKSIDE LAYER
转换风格选中了三维旋轉后,就会显示这个选项。图层的下拉列表中有允许将图层旋轉到背面的选项。
持續不斷的速率
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT
此选项设置后,图层中的交互将会进行触发。在滚动区域内,如果想要移動图层,就会使用到。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
ANCHOR
圖層由九宮格進行分割。
TRANSFORM STYLE
这些按钮用来触发你想要的旋轉样式。二维旋轉是围绕 Z 轴的。三维旋轉表明了要使用到额外的 X 和 Y 轴。
RATE
在图层移動时,改变了速率这个字段。在滚动交互中,根据这个动画,滚动的方向与速率值的正负相匹配。
BACKSIDE LAYER
转换风格选中了三维旋轉后,就会显示这个选项。图层的下拉列表中有允许将图层旋轉到背面的选项。
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。
ANCHOR
圖層由九宮格進行分割。
TRANSFORM STYLE
这些按钮用来触发你想要的旋轉样式。二维旋轉是围绕 Z 轴的。三维旋轉表明了要使用到额外的 X 和 Y 轴。
ROTATE TO
定义了图层将会旋轉的角度。
EASING CURVE
這就是你想要爲動畫使用的緩和曲線。
DURATION
這個就是你定義的動畫持續的時長。
持續時間和延遲可以用來模擬鏈接動畫的體驗。
DELAY
從動畫開始時,設置延時。
BACKSIDE LAYER
转换风格选中了三维旋轉后,就会显示这个选项。图层的下拉列表中有允许将图层旋轉到背面的选项。
淡入
持續不斷到終值
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT BEGIN & END
此選項設置後,圖層中的交互將會進行觸發。必須設置起始點和終點。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
FADE TO
這個值是用來設置圖層的透明度的。輸入的是百分比。
持續不斷的速率
適用于拖拽,滾動,旋轉和捏拉等交互
LIMIT
此选项设置后,图层中的交互将会进行触发。在滚动区域内,如果想要移動图层,就会使用到。
此動畫是根據拖拽而設計的,可以指定圖層的某條邊作爲參考,在滾動時,可以選擇滾動的方向:水平和垂直。
RATE
在图层移動时,改变了速率这个字段。在滚动交互中,根据这个动画,滚动的方向与速率值的正负相匹配。
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。
FADE TO
這個值是用來設置圖層的透明度的。輸入的是百分比。
EASING CURVE
這就是你想要爲動畫使用的緩和曲線。
DURATION
這個就是你定義的動畫持續的時長。
持續時間和延遲可以用來模擬鏈接動畫的體驗。
DELAY
從動畫開始時,設置延時。
顔色
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。
CHANGE COLOR TO
设置图层需要改变的 RGB 顔色值。
DURATION
持续时间是即时的,就是说没有从顔色到顔色的过渡。
圖片
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。更多信息请查看 Conditions。
SELECT ASSET
用来选中要设置给图层的圖片资源。这个圖片资源必须已经上传到您的账号中。
DURATION
持续时间是即时的,就是说没有从圖片到圖片的过渡。
再排序
執行到終值的時間
適用于所有的交互
CONDITION
动画会对其进行检查来决定采取什么 action。
ORDERING
下拉列表中有圖層重新排序的方向。
选项 :
Bring to front, Send to back, Place before, Place behind
DELAY
從動畫開始時,設置延時。