UI 設計平台 Pixate 能在多大程度上給設計師和開發者帶來便捷？

12-17

UI設計平台 Pixate 體驗如何? 能在多大程度上給設計師們減負？

原生移動應用動態UI設計平台Pixate成立於2012年，創始人是Paul Colton和Kevin Lindsey，其目標是幫助設計師和開發者方便開發出動感、漂亮的原生移動界面。 via UI設計平台 Pixate 獲 380 萬美元融資 Pixate 融資

關注 Pixate 好幾個月了，昨天收到 Pixate 產品負責人 Andrew 的郵件，大概試用了一下。

為什麼期待 Pixate？
我們試用了很多做動態原型的工具，眾所周知的 Origami, FramerJS, 甚至 Hype, Flash，沒有一款工具符合我們的需求。我們一直期待有一款像 Sketch 的工具出現，能夠把用 Sketch 做好的頁面，直接導入，然後通過所見即所得的方式，快速地創建動態原型。

直到偶然在 Twitter 上看到了 Pixate，被這個工具所吸引。簡單的拖拽，不用寫代碼，最重要的是能夠即時在手機上看到效果。然後就是等待 Pixate 邀請內測，期間看了很多用 Pixate 做出來的東西。

上手 Pixate
昨天收到對方郵件之後，就開始嘗試用了一下。

1. 第一次使用，需要下載相關的 APP
可以通過兩種方式使用 Pixate，下載Mac APP 或者直接在網頁上使用。同時，下載 Pixate for iOS，方便邊做邊看效果。

2. 創建一個 Project
可以創建任意多個項目

3. 創建 Screen
每個 Project 里也可以有多個 Screen，每個動畫原型就是在各自的 Screen 裡面完成的。這一點，令我有點小失落，跟 Origami 那種，只能獨立地創建一個界面動畫顯然不是我想要的。
這裡可以選擇使用的設備類型，比如我們使用 iPhone 5。

添加Screen 之後，進入到正式的編輯界面

整個界面還算比較友好，左上角是添加Layer，左下是添加交互手勢以及對應的動畫效果，右邊是相關的屬性值。4. 創建 Layer
可以先把所有相關的 Screen Assets 從 Sketch 導入進去。然後創建一個背景的 Layer，填充為我們剛導入進來的切片。同樣，將我們想要做動效的 button，同樣導入。
這裡有個不太好的交互，就是我填充圖片的時候要去點那個+號，為什麼不能下拉選擇呢

5. 動畫步驟

先拖一個交互手勢到button上，比如我們這裡想要用戶點擊的時候出現動畫
然後拖一個動畫到剛才的layer上，比如我們拖一個Fade效果
修改動畫屬性，比如我們點擊button之後，fade值為10%

做好之後，可以直接在 Pixate APP 上體驗效果，同步速度還是不錯的。

Pixate的好

簡單，容易上手。完全可視化的界面，不需要一行代碼，也不需要像 Origami 那樣複雜的操作。
即時預覽。想看到動態效果，做完之後直接在手機上就能看到效果。跟Sketch一樣，讓人無法拒絕的便捷。

Pixate的不好

H5體驗只能說及格。Pixate 如果能像 Sketch 一樣，只做 Mac APP，體驗就不至於這樣了。
動畫庫只有系統內置的，難以擴展。現在只提供了最基本的幾個動畫模板，如果我自己一套通用的動畫模板，或者其他人的模板，無法復用。
組織形式。只能一個Screen動畫接另一個Screen動畫，不是我想要的，我想要的是連貫的操作，動畫不只是一個頁面的喲~
價格。現在是每月20刀，略貴。

如果Sketch出了類似的功能，我果斷就拋棄Pixate了。現在，我還是用回Xcode好了。

最後，我喜歡客戶端勝於H5應用。

昨天拿到 Pixate 的邀請，簡單寫寫感受吧……

首先這是個付費的應用，目前來看是免費 30 天然後每月 $20 一個人，按 Team 收費，有 Web 版和桌面版（就是套個殼），iOS 和 Android 客戶端是是用來預覽效果的。

相對來說用起來比較簡單了，最重要的是 Interactions 和 Animations 兩個部分，分別定義互動方式和動畫效果。支持最重要的 Conditions，但是這個支持似乎不是很完整，比如不能控制自己之外的 Layer、沒法控制更多其他的條件等等，這樣試圖用它實現一些更複雜動畫會覺得很不自由…支持協作，但是在一個人修改的時候這個項目是被鎖定的狀態，只有編輯完成之後另一個人才可以繼續編輯。他們的 Blog 有完整項目的教學，推薦觀看。

基本上這個工具上手很容易，可以很快的得到想要的基本動畫，但在試圖實現更為複雜的動畫時這個可能就搞不定了，比如 Facebook Paper 的 Like 動畫，看上去需要生成隨機數來控制泡泡的大小等，Pixate 不提供這個功能（Quartz Composer 提供一個叫 Random 的 Patch 可以做這件事），早期接觸過 flash 的同學一定也見過很多很多很酷炫華麗的動畫一定都會有 ActionScript，Pixate 基本上是一個針對若干圖片做效果的工具，如果你對動畫的複雜度要求很高的時候，它可能就不太適合了。

一個知乎即將上線的小改進我們嘗試用了一些動畫，用 Quartz Composer 做基本原型，最後輸出若干 DEMO 交給開發採用 Animate.css 實現。因為知乎的前端朋友們都比較強力，所以就沒有給動畫具體的數字和時間，可以根據 DEMO 來自己搞定。但這樣聽起來顯然不適用於所有的公司，可能更多情況下會需要設計師告訴工程師每一個緩動、漸顯等等效果的時間和函數。這件事很多工具都可以做，比如 Pixate、Quartz Composer、Framer Studio 等設計工具和 Easing Functions Cheat Sheet、cubic-bezier 這類緩動函數查詢的網站。而且目測大部分情況下可能也是這麼乾的。

在動畫和界面上的很多的負擔都是來自設計和工程的溝通上，工程師不想花大量時間在調動畫這種沒啥技術含量的事情上，設計師為了保證質量又希望工程師把這件事情幹了。這時候的取捨就變成了工程師希望設計師能給出具體的各種參數，一次成型不要老改，設計師這個物種又很糾結，於是就有了「UE 動畫一時爽，RD 寫碼到天明」這種事情，簡單的動畫都是這樣，如果試圖做出更複雜的動畫基本上成本會變得無比高。

昨天 Stripe 的設計師 Benjamin De Cock 發布了一款為 Web 設計師訂製的輕量「界面語言」：uilang。基本上是在 HTML 文件中用類似下面的語法來寫動畫。

clicking on ".try-it" toggles class "hidden" on ".info-box"

他提出：

讓設計師完成所有的界面和動畫，前端工程師專註 JavaScript 、性能等部分。這樣對於工程師而言可以更加專註，不用花大把時間在和設計師調動畫上；而設計師也可以嚴格保證所有的動畫和界面質量。

我很認同他的觀點。在一個工程中，將界面和邏輯分開，設計師負責寫（和維護）所有的界面（包含動畫），工程師專註邏輯、性能的優化。這樣設計師能夠儘可能完整的實現自己的想法，想怎麼調就怎麼調，工程師擺脫日復一日調動畫改顏色的生活，大家都開心了。但這對設計師的要求會變的更高，需要他們能掌握實現自己設計的能力，可能這對於大部分的設計師都是一個挑戰，但這種挑戰還是可以嘗試的不是么~

Pixate 能通過簡單的方式實現基本動畫，和工程師可以通過具體的數值對接，能滿足大部分的業務需求。但對於較複雜的非圖片式動畫還是力不從心。對於不追求更複雜動畫和交互的設計師可以考慮嘗試~

這個問題可以貢獻我的two cents。

前兩天Pixate的CEO和產品經理到我們公司做demo，示範他們的新產品。公司似乎不久前轉向開發新產品，目前的產品主要目標是幫助設計師不寫代碼也能建立互動的移動應用prototype，直接的競爭對手是origami 和framer這類需要設計師寫代碼來模擬互動效果的工具，還有像fluidui等一眾利用靜態圖像模擬切換效果的網站。

那天看過展示之後覺得挺厲害的。其一是支持不同手機平台，能夠實時mirror電腦上的修改或是更新——下載他們的app以後可以在手機上實時查看視覺效果以及互動效果。其二是通過簡單的拖拽以及參數調節就可以實現目前移動應用中的大部分互動效果，比如parallax scrolling，主目錄按鈕的彈出（類似Path）等等，完全不涉及代碼。有設計師問到，他們怎麼考慮prototype和代碼之間的轉換，目前他們提出的幾種方案是提供不同的帳戶，比如設計師帳號和程序員帳戶，這樣程序員可以自主地去了解參數。另一種是最後輸出一份標示各項動態效果的文檔，標明各種參數……

目前產品還沒有對外開放，我們也還沒有拿到帳號，以後有機會再補充好了。Demo時他們提到，雖然目前使用的設計師不多，但大家已經能夠利用有限的功能製作很多酷炫到他們也不知道怎麼實現的效果。未來他們會考慮建設網上分享社區，讓設計師之間能夠互相交流分享。更多可見產品網站。 http://www.pixate.com

謝謝大家的關注和分享。我們現在還在Beta階段，非常需要這種寶貴的建議來提高我們產品的可使用性。先回答目前提到的幾個問題：

最重要的是 Interactions 和 Animations 兩個部分，分別定義互動方式和動畫效果。支持最重要的 Conditions，但是這個支持似乎不是很完整，比如不能控制自己之外的 Layer、沒法控制更多其他的條件等等，這樣試圖用它實現一些更複雜動畫會覺得很不自由

condition裡面是可以參考其它layer的properties的，只是animation是apply到本身的layer。如果想要多個layers在同一條件下有各自的animation，每個layer需要有一用同樣condition的animation。

每個 Project 里也可以有多個 Screen，每個動畫原型就是在各自的 Screen 裡面完成的。這一點，令我有點小失落，跟 Origami 那種，只能獨立地創建一個界面動畫顯然不是我想要的。

Screen在這裡的確表達欠佳，我們也在想就換成」App」，因為已經有用戶成功在一個「screen」里建立多screens的動畫了，通過把其它界面先放在外面然後用move animation，或先把opacity設定為0再通過fade效果里的condition來呈現。

我們下步會做真正multi－screen和state的支持。

H5體驗只能說及格。Pixate 如果能像 Sketch 一樣，只做 Mac APP，體驗就不至於這樣了。

動畫庫只有系統內置的，難以擴展。現在只提供了最基本的幾個動畫模板，如果我自己一套通用的動畫模板，或者其他人的模板，無法復用。

這兩個也是我們下面feature的重點。客戶端app能提供很多便利，也能讓我們更好的和Sketch及Photoshop結合，讓designers實時連接自己在那上的設計。而module的功能會幫助大家互相share自己設計的animation／interaction組合。

還有一個我們知道很重要的功能就是developer handoff，無論是以code的形式還是別的，減少工程師還要重建設計師想法的需要。

我們在下幾個月會有不斷的updates，希望大家繼續關注，嘗試和反饋。

最近專門花了點時間體驗Pixate，說一下大致感受：

截止目前（v1.7）的功能還是面向設計師群體，可以讓設計師通過自己熟悉的圖層操作模式來做界面特效，驗證自己設計思路，不用佔用程序猿的時間來陪練試錯。
當前還不支持直接導出動效代碼，因此還不能夠直接用於程序研發流程。對程序猿來說，就意味著這個特效只能用來看而已，具體的動效參數還是需要花時間去慢慢調試。（據說導出代碼的功能已經排入後續版本的日程，拭目以待！）
現有Mac版可以通過Xcode模擬器和手機App實時聯調，Win版只能通過手機App（因為木有Xcode）。軟體本身的體驗還有很多提升空間（還有些程序猿的操作思維方式在裡面），看到很多設計師會在一些功能的理解和操作上碰到困難（比如：layer的clipping屬性是幹嘛用的、condition對很多只會設計的設計師來說就是無從下手）。
主要還是用來設計Motion動效（目前能實現7類，包括：各種界面元素的位移、縮放、旋轉、淡入淡出、色值變化、圖片切換、顯示層級切換），而類似圓形變方形、箭頭變叉叉這種涉及形狀變化的動畫效果是做不到的，還是要靠AE這種重武器來實現。

　　總的來說，Pixate思路很好，痛點抓的准，重點專註讓設計師群體快速上手，很快就可以通過對若干圖層添加幾個交互和動畫屬性，就可以快速看到動效的具體效果。
　　接下來，既期望Pixate功能能更加強大，又希望不要丟失了方便快捷的特性，最後希望Google收購確實是為了改進優化Pixate，而不是束之高閣。

　　附上自己博客關於Pixate的一些體驗文章，後面會繼續不定期的拿Pixate做一些東西，並發出小結和源文件。
　　鏈接：http://ux-sz.lofter.com/tag/Pixate　歡迎有興趣的朋友關注。

接觸pixate大概3周左右。發現確實是用到現在最適合設計師使用的原型工具。上手後的第一個原型也已經實現了幾乎是一個完整App的多界面的操作。雖然現在功能還是比較基礎和有限，但我絕對看好他們。覺得這個是今後的趨勢，也是特別適合設計師的工具。

用了一周，感覺基本動效設計還是蠻簡單的，複雜一點的就得考驗自己的想法了。

一開始用pixate還是覺得很好用的，中途也用過Hype3、Flinto。現在在嘗試XD和Invision。
這類交互展示軟體確實能夠比語言描述更好，比AE更加方便直觀（可點擊交互）。較少了交流的成本確實能夠減輕不少負擔。
但有個鬼用，最後程序不是說時間緊就是做不了！現在都很少做交互和動效了（除非是H5能自己寫，不過自己能寫也不用做效果了= =直接CSS3+JS搞定）
難道這是逼著我去學習XCODE么？

就不能有直接導出GIF的動態圖片嘛？

我用的pixate可以和電腦連接，但是為什麼手機和電腦上都不能播放交互動態效果？？

pixate局限太多：
1 與sketch無法打通，只能手動導入圖片
2 一個文件只能實現單個界面動效
3 實現複雜的動效還得先思考pixate實現的邏輯，有這時間直接xcode了

最近太多這樣的UI工具了，雖然每一款都很容易上手，但畢竟有差異，需要上手的時間
所以還是用好flash和ae，挑戰xcode

作為一個非常初級的新手，我想知道，做動畫的話，很多都是從AE轉過去的，為什麼不把使用界面布局往ae上靠一靠呢？