UI 設計平台 Pixate 能在多大程度上給設計師和開發者帶來便捷? | 知乎問答精選

 

A-A+

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

2019年01月07日 知乎問答精選 暫無評論 閱讀 5 ℃ 次

【李奇的回答(43票)】:

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

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

相對來說用起來比較簡單了,最重要的是 Interactions 和 Animations 兩個部分,分別定義互動方式和動畫效果。支持最重要的 Conditions,但是這個支持似乎不是很完整,比如不能控制自己之外的 Layer、沒法控制更多其他的條件等等,這樣試圖用它實現一些更複雜動畫會覺得很不自由…支持協作,但是在一個人修改的時候這個項目是被鎖定的狀態,只有編輯完成之後另一個人才可以繼續編輯。他們的 相對來說用起來比較簡單了,最重要的是 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 能通過簡單的方式實現基本動畫,和工程師可以通過具體的數值對接,能滿足大部分的業務需求。但對於較複雜的非圖片式動畫還是力不從心。對於不追求更複雜動畫和交互的設計師可以考慮嘗試~

【John的回答(9票)】:

關注 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 之後,進入到正式的編輯界面添加Screen 之後,進入到正式的編輯界面

整個界面還算比較友好,左上角是添加Layer,左下是添加交互手勢以及對應的動畫效果,右邊是相關的屬性值。整個界面還算比較友好,左上角是添加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好了。

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

【陳餅餅JOY的回答(1票)】:

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

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

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

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

標籤:-用戶界面設計


相關資源:





給我留言