玩運彩練小喂

七大high-fidelity prototype tools測試心得

前陣子花了一些時間尋找合用的高擬真度原型設計工具(high-fidelity prototype tools),檯面上幾款知名度較高的產品,都有一個共同特色:Mac only,非Mac系統的選擇性實在乏善可陳,此外其他相關的設計工具也是,比如sketch,這點也是導致我入手MacBook pro的主要原因。

本文將會比較的七種介面原型工具,我都曾經試用過,大致把產生互動的核心編輯概念分為三種類型:

  • 寫程式:最知名的就是framer。
  • 串接元件模組:以facebook力推的origami為代表,另一個是相似度極高,隸屬於google陣營的form。
  • 類繪圖軟體:這類型又分成兩種,第一種是專為介面原型量身訂做的開發工具,像是flinto、pixate、principle;第二種是內建功能剛好能用來製作介面原型,比如簡報軟體keynote,或是後製特效軟體After Effects(性質又偏離更遠,故本文不列入討論)。

以下簡評各工具的優劣。

 

 

framer

別看官網上的coffeescript教學,好像語法很簡潔很好上手,開發者若不具備獨當一面的程式能力,很難隨心所欲實現腦海中天馬行空的互動原型。所以無程式基礎的設計者即便看得懂案例的原始碼,往往在舉一反三時卡關。

  • 自由度高,很適合對自身程式能力有信心的開發者。
  • 開發環境理想,很有sublime與xcode的人性味。
  • 即時預覽,也有手機版APP。
  • 即時預覽的同步很快,只要code有更動,畫面會即時反映。
  • 能做出完全創新的互動。
  • 執行順暢,能做出高精度的互動原型。
  • 可模擬手勢操作。

 

  • Mac only。
  • 有試用期限,買斷需99美元。新版加上所見即所得編輯方式,調漲為129美元,價格上並不親民,新版功能值不值得花這筆錢,只能等試用過的人分享了。
  • 程式基礎薄弱的話較難自由發揮。雖然有好心人開發出免費的sketch套件“framer inventory”,可以在sketch先做好關鍵影格的畫面,設定完成後透過套件直接生成framer.js的動畫,程式也都由軟體自動產出了,但僅止於基本款的動態效果,要變化型還是得靠自己寫程式。
  • 承上,對生手來說會耗費更多開發時間,出錯時容易卡關。
  • 雖然是靠coffeescript產生過場,但程式碼無法移植到ios或android的APP。

 

Pixate

官方部落格在2016/10/04的新文章指出,2016/10/31將終止Pixate cloud,同時官方信箱、社群帳號也將關閉。至於桌面版開發工具Pixate studio,開發團隊將停止更新。

嗯,這個消息意謂著,可以改用其他原型設計工具了。


這是我偏好的原型設計工具,主要原因是免費,產出的互動效果也很逼真,同時還有手機APP,支援裝置預覽。

  • 免費。和目前動不動99美元起跳的高擬真度原型設計工具相較,這點實在是大利多。
  • 產出的原型操作流暢,互動反應逼真。
  • 支援手機即時預覽。
  • 可模擬手勢操作。

 

  • 軟體本身沒有內建基本的介面元件,仰賴從外部匯入圖片。
  • 匯入圖片應該要有更聰明的管理、更新方式。
  • 操作互動的設定有一定的學習門檻,尤其是較為複雜、有脈絡關係的類型。
  • 不適合在單一檔案中製作多層級、太複雜的操作互動,除了製作時間會拉長,設定上會更繁瑣,發生問題時將不容易除錯。
  • 能模擬的操作互動受限於該軟體的既有功能與模組。

 

Principle

  • 容易上手,會用flash的人耐心看完官網首頁的示範影片,差不多就能上工了。
  • 編輯方式直覺又快速,拖曳線段設定連結頁面的方式很像Flinto。調整過場的介面令人想起式微的flash。
  • 支援手機即時預覽。

 

  • Mac only。
  • 99美元。
  • 可模擬手勢操作,但不夠順暢。
  • 能模擬的操作互動受限於該軟體的既有功能與模組。
  • 教學文件較少。

 

Flinto

擁有眾多支持者,廣受好評的介面原型工具。

  • 直接拖曳線段設定連結頁面,非常直覺方便。
  • 可模擬手勢操作。
  • 有外掛支援直接從sketch匯入圖檔到Flinto。
  • 支援手機即時預覽。

 

  • Mac only。
  • 99美元。因為這點,我選擇了pixate。
  • 能模擬的操作互動受限於該軟體的既有功能與模組。

 

Origami

Facebook出品的開發工具。

  • 免費。
  • 號稱可以直接輸出ios或andoird可用的程式碼,再利用價值最高,只是個人尚未實際應用過,不確定其實戰價值。
  • 支援手機即時預覽。
  • 可模擬手勢操作。

 

  • Mac only。
  • 學習門檻高。編輯模式較為抽象,看完文件與製作範例,還是很難舉一反三。
  • 製作時間長。即使是細微的互動反應,也可能要串聯一堆元件模組才做得出來。
  • 同pixate,不適合在單一檔案中製作多層級、太複雜的操作互動,發生問題時將不容易除錯。

 

Form

和Origami非常雷同的原型工具,但知名度較低,屬於google陣營。

  • 免費。
  • 內建material design組件。
  • 支援手機即時預覽。
  • 可模擬手勢操作。

 

  • Mac only。
  • 學習門檻高,編輯模式較為抽象,看完文件與製作範例,還是很難舉一反三。
  • 製作時間長。即使是細微的互動反應,也可能要串聯一堆模組才做得出來。
  • 同pixate,不適合在單一檔案中製作多層級、太複雜的操作互動,發生問題時將不容易除錯。

 

Keynote

  • osx內建,免費。
  • 學習門檻低。

 

  • Mac only。
  • 自由度低,修改不易。
  • 製作時間久,不適用於快速開發。
  • 操作互動的流暢性不足。
  • 無法模擬手勢操作。
  • 沒有專用的即時預覽APP。
  • 能模擬的操作互動受限於該軟體的既有功能。

 

 

分隔線以下是題外話。


工具再炫,還是要回歸基本的問題:

做這件事的效益?

對於APP工程師來說,即使像framer那樣有程式碼產出的原型工具,只要程式碼無法直接移植到APP,工程師還是得自行揣摩、轉換為APP可用的程式碼,並不會因為有了framer的coffeescript,程式開發就會省力一些。基於這一點,origami似乎是對工程師最友善的原型工具,網頁上宣稱輸出的ios.m、android.java或web.js,可以直接複製貼到專案中:

Origami can now export code for the parts of your prototypes you used to have to tediously spec to engineers. Now with the click of a button, you can deliver your animation specs as code to your engineers that they can copy-and-paste into the project.

看起來很強大是吧?完全超越原型工具僅僅是模擬、展示的境界。
但是在說明文件裡的code export又附上但書:

This feature currently exports the names and values of:
・Pop Animation patches
・Transition patches connected to Pop Animation patches
・The connections between those Transition patches and Layers

換句話說,目前的code export才剛起步而已,只能輸出pop類型的動畫,這跟首頁的廣告說詞實在天差地遠,還很容易造成開發者的錯誤期待。如果投入大量時間製作,輸出的原始碼卻無法移植到APP,這和其他原型設計工具產出的模型有何分別?一樣都停留在展示用的層次,依然需要APP工程師觀察模型揣摩、從零開始撰寫程式,這個”轉譯“過程很難不產生誤差。

所以接下來要思考的問題是,為了把這個轉譯過程造成的誤差降到最低,甚至是毫無誤差,值得額外花時間製作高擬真度的原型嗎?

如果是APP已經很常見的動態、過場效果,與其投入時間製作高擬真度的原型,不如多運用已開發好的第三方元件庫,就像下圖的APP:Libraries for developers,或是到Android Libraries找相近的效果。

 

第三方免費的android APP元件庫

 

這些元件庫都有現成的程式碼,直接套用後再來微調參數,整體效益會比製作高擬真度原型更好。即便採取這個做法會產生誤差,設計者也該捫心自問,這個差異有明顯到一般人足以分辨嗎?會造成重大影響嗎?

如果沒有,設計者不該執著在邊際效益偏低的環節上,搞得團隊人仰馬翻,見樹不見林。這樣講並不是要得過且過,便宜行事,而是在鑽牛角尖之前先想想,其他更重要更優先的事情都搞定了嗎?先把重點擺在”做對的事情“,尤其是資源相對弱勢的開發團隊,更需要省下時間去做更重要更優先的事情,例如除錯,或開發用戶更關切的功能與內容。

真要對付那個0.1秒,還是多移動1px的距離,請等產品獲得用戶認可之後再說。

那麼,什麼時候需要高度擬真的原型?

比如:

  • 完全創新的互動效果,找不到現成範例可供參考。
  • 優化階段用來檢視使用流程。
  • 比較不同互動效果的使用感受。
  • 產品完成前就需要對外展示。
  • 設計者要準備作品集。

此外,像是分工較細的開發團隊,就有需要先用高度擬真的模型取得共識。總之,行動之前不妨先抽離自身的角色,評估一下做這件事情的效益,詢問團隊成員的意見,必要的話再執行。

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *