pixate 中文版是一款面向設(shè)計師而開發(fā)的專業(yè)的移動交互設(shè)計軟件，它能夠幫助用戶在瀏覽器上模擬復雜的交互，幫助用戶完成更加便捷的開發(fā)出動感、漂亮的原生移動界面，從而更容易創(chuàng)造專注于圖像的應用程序，另外，Pixate的技術(shù)可通過SDK集成進現(xiàn)有的移動應用中，極大的滿足了設(shè)計師的開發(fā)需求，相比于動態(tài)UI設(shè)計而言，這款軟件更符合設(shè)計師的思維模式，是設(shè)計師、開發(fā)者的極佳選擇！

軟件功能

　　pixate 主要面向移動開發(fā)者，可支持利用 CSS 開發(fā)移動原生應用（支持 iOS 和 Android），其界面非常直觀方便，用戶只需拖放設(shè)計元素，進行屬性設(shè)置，就可以在不需要編寫任何代碼的情況下即可完成具備交互能力的原型設(shè)計。

　　利用這款純原生移動應用原型開發(fā)和測試工具，設(shè)計師可以在瀏覽器上模擬復雜交互，包括拖放、滾動、長按、點擊等，同時通過移動端的 app 可以實時觀看原型的交互效果。

　　由于 CSS 技術(shù)的配置靈活性，開發(fā)者不必每次在添加新的圖形元素時都要對應用進行重建，從而極大地方便了界面的開發(fā)和應用部署。通過這種原型開發(fā)方式設(shè)計師可以實現(xiàn)快速迭代開發(fā)，及時將原型提交給項目經(jīng)理等相關(guān)人員審核修改，從而縮短了交付給工程團隊進行下一步開發(fā)的時間。

　　因此可以用說 Pixate 是一個面向設(shè)計師的原型設(shè)計平臺。近期其主要工作仍聚焦在原型開發(fā)上。但是未來有計劃去改進設(shè)計與工程的交接流程，從而令設(shè)計師的工作更加順暢。

　　它還是更適合做頁面級的動畫，對于需要形變、非常細膩的復雜動畫，有些無能為力。所以Pixate更適合交互設(shè)計師來表達界面邏輯。

軟件特色

　　適合設(shè)計師的思維方式

　　QC的好處是可以比較方便的和程序猿對接，很多動效的實現(xiàn)邏輯和前端的代碼邏輯是相通的。也就是說，使用QC雖然不需要寫代碼，但歸根結(jié)底還是猿類的思維方式，對于我們這些一點代碼不懂，邏輯能力又不是特別好的小小設(shè)計師來說，還是有些門檻的?？吹綕M屏的連接線，就讓人有點望而卻步，搞不清其中的邏輯。

　　作為設(shè)計師，無論是交互還是視覺，無論是用PS、AI還是用Axure、Sketch，我們最最熟悉的一個概念，就是圖層了。而Pixate的操作方式，同樣也是圖層的概念。Pixate的界面，乍一看有點像PS呢。

　　如上圖所示，左上角是圖層區(qū)，我們可以將視覺稿或是高保真的交互稿切圖后導入Pixate中，所有的圖層按照前后順序出現(xiàn)在圖層區(qū)中，與PS一樣，上層的圖片會覆蓋在下層的圖片上，圖層還可以設(shè)置成組。歷史記錄區(qū)域也與PS很相似，記錄最近的20步操作。值得注意的是，Pixate是隨時保存的，如果操作了一堆之后，想要退回到20步以后，就再也回不去了…左下角是手勢交互和動畫區(qū)域，包括常用的手勢操作（拖拽、單擊、雙擊、長按、旋轉(zhuǎn)、縮放、滾動）和常見的動效（移動、縮放、旋轉(zhuǎn)、漸隱漸顯、變色、改變圖片、重復），我們可以將這些手勢或是動效直接拖拽到圖層上，圖層就會實現(xiàn)相應的效果。界面右側(cè)則是對圖層屬性和交互和動畫屬性的設(shè)置。圖層屬性可以用來設(shè)置圖片的大小、位置、透明度等。重頭戲是右下角的交互和動畫屬性設(shè)置，通過設(shè)置這些參數(shù)，可以將手勢和相應的動畫連接起來，連接完成后，一個可以操作、可以交互的原型就制作好了。

　　實時預覽，可交互

　　Pixate的另一個優(yōu)點就是可以實時預覽，并且是可以在手機上實時操作和預覽。只需在手機上下載Pixate的app，iOS和Android都可以下載，通過wifi或是數(shù)據(jù)線連接電腦，就可以實時看到預覽效果了。如果懶得連手機，也可以在模擬器上預覽效果。

　　全平臺

　　你可以online使用，也可以在Mac或是Windows上下載使用。Pixate支持多款iOS和Android機型，甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表，可以說是全平臺覆蓋。

安裝方法

　　1、首先，下載并解壓軟件，雙擊“PixateSetup.exe”開始安裝本軟件，若提示Pixate需要.NET 4.5，則點擊“install”安裝.NET 4.5。

　　2、.NET 4.5正在安裝，等待安裝完畢。

　　3、軟件會自動進行安裝，僅需等待Pixate安裝完畢即可。

使用方法

　　1. 首先我們先整理下效果運行的大致思路：

　　在Pixate里制作整個效果，我們需要通過兩個左右半圓在沿著一個圓形軌跡來進行中心順時針旋轉(zhuǎn)的更迭動畫。其中左半圓起始時被白色cover擋住，然后從0點開始往6點方向順時針旋轉(zhuǎn)慢慢全部顯示出來。而當左半圓完成180°旋轉(zhuǎn)后，右半圓則跟上繼續(xù)做6點到12點方向的順時針旋轉(zhuǎn)。同時，白色的cover將消失或移動到右半圓的下層。這樣就大致完整了一個360°的繞圈運動

　　2. 開始制作：

　　如上圖所示，是這個項目需要的一些基本資源素材：

　　（ 資源素材的制作就不在闡述了，可以在AI、PS、Sketch或其他任何你會的軟件里生成統(tǒng)一大小的PNG資源即可）

　　1. 需要一個透明鏤空的背景軌跡（Transparent_circle_track）；

　　2. 一個半圓的白色覆蓋層（Cover）；

　　3. 一個左半圓的進度條（LeftPart）；

　　4. 一個右半圓的進度條（RightPart）；

　　5. 可選項：一個按鈕（Download btn）及一行運行狀態(tài)時的文字顯示（Downloading text）

　　將資源拖入畫布后按照下圖順序排列圖層：

　　（起始頁沒什么好說的。圖層的排列還是很好理解的。點擊的按鈕頂層；透明鏤空的背景軌跡一定在進度條和cover上；cover起始一定在兩條進度條上；而left在right上面的原因，是我在這個案列中，我給cover使用了reorder的指令。便于制作，我之后將cover就直接set到rightpart的下面或者是直接置于整個的層底）

　　將資源全部放置于畫布的中間，并將最后一層的“rightpart”的Opacity不透明度設(shè)置為0，使其完全透明不可見。

　　最后的效果應該是如下圖：

　　現(xiàn)在來設(shè)置每個層級的具體參數(shù)：

　　先設(shè)置第一個按鈕層：

　　因為是整個項目的起始觸發(fā)，所以先給按鈕層一個Tap交互屬性：

　　接著給它添加一個“fade”的動畫屬性，設(shè)置觸發(fā)按鈕后，其本身會消失：

　　接著選擇“leftpart”左半圓的那個圖層，賦予一個“旋轉(zhuǎn)”屬性。讓它在按下“下載按鈕”1秒后，在2秒內(nèi)完成一個自身180°的旋轉(zhuǎn)

　　此時，再選擇“rightpart”右半圓的那個圖層，也賦予一個”旋轉(zhuǎn)”屬性。讓它在按下“下載按鈕”3秒后，在2秒內(nèi)完成一個自身180°的旋轉(zhuǎn)，緊接著左半圓完成另一半的運動。（為什么是3秒？因為做半圓完成自身的旋轉(zhuǎn)是2秒，再加上1秒的延時，所以左半圓完成全部的時間是3秒）

　　因為之前將右半圓設(shè)置了全透明，所以要再給它賦予一個“fade”屬性，讓它重見光明。當然這個時間差也是3秒。

　　這個時候還有個問題就是在6點到12點范圍內(nèi)，白色的cover其實是遮住了右半圓的圖層，所以我們也要在整個時候?qū)咨腸over放置到最底層。拖拽一個Reorder動畫屬性給cover層，并設(shè)置“放置底層”。同樣也是3秒的時間差。因為這個時候左半圓剛好完成了他自己的旋轉(zhuǎn)。

　　最后給“downloading”的文字增加一個“Fade”屬性讓它在整個流程跑完后就消失。

　　因為跑完整個流程是“左半圓”的2秒加上“右半圓”的2秒，再加上起始左半圓的1秒延時。所以整個過程是5秒

　　好了，至此全部的設(shè)置完成了。點擊一下download的按鈕就會看到圓形的進度條已經(jīng)可以完美工作了！

　　各位還可以根據(jù)需要制作一個“reset”的按鈕，讓其跑完一圈后“重置”。這里就不再深入了。