動態原型設計工具 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的好

1. 簡單，容易上手。完全可視化的界面，不需要一行代碼，也不需要像 Origami 那樣複雜的操作。

2. 即時預覽。想看到動態效果，做完之後直接在手機上就能看到效果。跟 Sketch 一樣，讓人無法拒絕的便捷。

Pixate的不好

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

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

3. 組織形式。只能一個 Screen 動畫接另一個 Screen 動畫，不是我想要的，我想要的是連貫的操作，動畫不只是一個頁面的喲~

4. 價格。現在是每月 20 刀，略貴。

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

最後，我喜歡 Native 應用勝於 H5 應用。