一篇成功文章的開頭皆需寒暄幾句：大約一個(gè)半月以前，ME Workshop知名逗比馬丁· 胃發(fā)表了一篇關(guān)于QC+Origami 動(dòng)效設(shè)計(jì)的文章，引來(lái)無(wú)數(shù)Mac用戶的熱捧和無(wú)數(shù)Windows用戶的哀嚎（買不起Mac就要遭到歧視么…），廣大Windows用戶都用不了算神馬動(dòng)效神器！？今天就來(lái)介紹一款婦孺皆愛、老幼皆宜、比QC簡(jiǎn)單易上手、比AE可交互的全平臺(tái)動(dòng)效神器 —— Pixate。
注：上文提到的軟件教程：
優(yōu)點(diǎn)1：適合設(shè)計(jì)師的思維方式
QC的好處是可以比較方便的和程序猿對(duì)接，很多動(dòng)效的實(shí)現(xiàn)邏輯和前端的代碼邏輯是相通的。也就是說(shuō)，使用QC雖然不需要寫代碼，但歸根結(jié)底還是猿類的思維方式，對(duì)于我們這些一點(diǎn)代碼不懂，邏輯能力又不是特別好的小小設(shè)計(jì)師來(lái)說(shuō)，還是有些門檻的。看到滿屏的連接線，就讓人有點(diǎn)望而卻步，搞不清其中的邏輯。
作為設(shè)計(jì)師，無(wú)論是交互還是視覺，無(wú)論是用PS、AI還是用Axure、Sketch，我們最最熟悉的一個(gè)概念，就是圖層了。而Pixate的操作方式，同樣也是圖層的概念。Pixate的界面，乍一看有點(diǎn)像PS呢。
如上圖所示，左上角是圖層區(qū)，我們可以將視覺稿或是高保真的交互稿切圖后導(dǎo)入Pixate中，所有的圖層按照前后順序出現(xiàn)在圖層區(qū)中，與PS一樣，上層的圖片會(huì)覆蓋在下層的圖片上，圖層還可以設(shè)置成組。歷史記錄區(qū)域也與PS很相似，記錄最近的20步操作。值得注意的是，Pixate是隨時(shí)保存的，如果操作了一堆之后，想要退回到20步以后，就再也回不去了...左下角是手勢(shì)交互和動(dòng)畫區(qū)域，包括常用的手勢(shì)操作（拖拽、單擊、雙擊、長(zhǎng)按、旋轉(zhuǎn)、縮放、滾動(dòng)）和常見的動(dòng)效（移動(dòng)、縮放、旋轉(zhuǎn)、漸隱漸顯、變色、改變圖片、重復(fù)），我們可以將這些手勢(shì)或是動(dòng)效直接拖拽到圖層上，圖層就會(huì)實(shí)現(xiàn)相應(yīng)的效果。界面右側(cè)則是對(duì)圖層屬性和交互和動(dòng)畫屬性的設(shè)置。圖層屬性可以用來(lái)設(shè)置圖片的大小、位置、透明度等。重頭戲是右下角的交互和動(dòng)畫屬性設(shè)置，通過設(shè)置這些參數(shù)，可以將手勢(shì)和相應(yīng)的動(dòng)畫連接起來(lái)，連接完成后，一個(gè)可以操作、可以交互的原型就制作好了。
那這些參數(shù)該如何調(diào)呢？這里給出幾個(gè)練習(xí)的鏈接，大家做幾個(gè)實(shí)例之后，就會(huì)得心應(yīng)手了。
優(yōu)點(diǎn)2：實(shí)時(shí)預(yù)覽，可交互
Pixate的另一個(gè)優(yōu)點(diǎn)就是可以實(shí)時(shí)預(yù)覽，并且是可以在手機(jī)上實(shí)時(shí)操作和預(yù)覽。只需在手機(jī)上下載Pixate的app，iOS和Android都可以下載，通過wifi或是數(shù)據(jù)線連接電腦，就可以實(shí)時(shí)看到預(yù)覽效果了。如果懶得連手機(jī)，也可以在模擬器上預(yù)覽效果。
優(yōu)點(diǎn)3：全平臺(tái)
你可以online使用，也可以在Mac或是Windows上下載使用。Pixate支持多款iOS和Android機(jī)型，甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表，可以說(shuō)是全平臺(tái)覆蓋。
說(shuō)了那么多優(yōu)點(diǎn)，Pixate也有一些缺點(diǎn)。它還是更適合做頁(yè)面級(jí)的動(dòng)畫，對(duì)于需要形變、非常細(xì)膩的復(fù)雜動(dòng)畫，有些無(wú)能為力。所以Pixate更適合交互設(shè)計(jì)師來(lái)表達(dá)界面邏輯，而更加生動(dòng)有趣的loading或是彩蛋，還是交給視覺大神們，用Flash或是AE來(lái)做吧。
在哪下載？
說(shuō)了那么多，快來(lái)看看在哪下載吧。大家可以在它的官網(wǎng)?http://www.pixate.com?下載使用。官網(wǎng)上同時(shí)還提供了很多Demo，可以下載來(lái)學(xué)習(xí)研究，Blog里的官方教學(xué)視頻也值得一看。
最最關(guān)鍵的是，自從被Google收購(gòu)以后，它就免費(fèi)了！可以說(shuō)是喜大普奔的好消息。大家快快下載來(lái)試試吧
?【動(dòng)效神器Hype零基礎(chǔ)入門教程系列】
先聊一下這個(gè)軟件的強(qiáng)大功能，附上簡(jiǎn)單教程！
《Sketch神助攻！無(wú)代碼做動(dòng)效神器Hype3入門教程》中國(guó)臺(tái)灣設(shè)計(jì)師叫你用Hype做原型過場(chǎng)！
《無(wú)代碼動(dòng)效神器！教你用HYPE3做APP原型的基礎(chǔ)過場(chǎng)（附神器）》美丫姐手把手教你用Hype做Path菜單動(dòng)畫！
《比AE還方便！教你用HYPE無(wú)代碼制作PATH扇形菜單動(dòng)畫》
作者：ME網(wǎng)易移動(dòng)設(shè)計(jì)-子木yoyo
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量99萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論 為下方 1 條評(píng)論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓