最近在找做 Prototype 的軟體或服務,狂測了一堆眼都花了。 Prototyping Tools 搜集很多做 Prototype 的工具,我還沒把每一款都摸過,先筆記有沾水的部份。可能某些服務的功能我沒摸透,如果你有其他的想法歡迎補充。

我需要的 Prototype 條件:

  1. 可產出運行在各種平台上的Prototype。
  2. 可產出實際能操作的介面,包含過場動畫、動態特效。
  3. Prototype 可供多人同時操作測試。
  4. 不用寫太多Code。(<<不要為難設計師好嗎?)
  5. 高保真原型,同最終產品長相。

Keynote

https://www.apple.com/mac/keynote/

在電腦上簡報給客戶看很讚!操作簡單、內建各種轉場動畫模式,是最容易上手的一款。原本產出 PDF,用點擊某區、跳到某頁的方式可以做放到手機上的 Prototype。

不過現在越來越講求動態效果,比如下拉後圖片會彈跳放大回縮之類,Keynote 就有點心有餘而力不足。

(試過用手機上的 Keynote 開 設好動畫的 .Key 檔,想說可以這樣 DEMO…手機上的 Keynote 竟然是 Landscape ,是橫的~是橫的~是橫的~打錯算盤…)

香港設計師 希羅 補充

Rotate Keynote Document for use as an app Prototype AdulteTerrible/DuplicateAndRotateKeynoteDocumentDroplet

可以試試,祝好運。

Justinmind

http://www.justinmind.com/

這套很紅,但我在操作官網的 DEMO 範例時很頓,不管做什麼操作都要等讀取等等等等等。做使用者測試時不能等 Loading,就先 Pass 了。

Hype3

http://tumult.com/hype/pro/

很好玩!非常靈活!內建很方便的動作庫,不用寫 Code 就能產出 HTML 檔這點很棒!像 Keynote 一樣可以分頁分場景做編輯。而且介面有中文喔!

時間軸設計有點像 AE 或 Flash,設計師上手還算容易,但要進階做點特效什麼的要再摸索。目前最喜歡的是這套,產出 HTML還挺乾淨的樣子,自主性很強。如果是網頁設計師用 Hype3 會如虎添翼。

提醒:用 Hype3 產出的檔案不要逼 RD 直接用!

Axure、Omnigraffle

http://www.axure.com/ https://www.omnigroup.com/omnigraffle

目前我都用 Axure 畫 Wireframe,可以像 Keynote 做簡單的點擊換場 Prototype,並產出網址方便內部展示。不過要擬真要動畫這套似乎不怎麼適用。

Omnigraffle 有點類似 Axure,改版後介面漂亮很多,不過這套適合做 Flow、畫 Wireframe,實際可操作有動效的高保真 Prototype 不是它的強項。

InVision

http://www.invisionapp.com/

POP 有點類似,現在很多這樣子的 Prototype 平台。上傳 jpg 圖檔、在圖上拉個可操作區域、設定點擊後跳到哪一頁。

InVision 內建數種轉場特效和手勢操作,非常方便。還可以產出網址,用手機開啟該網址就能操作,共享功能做得不錯。Prototype 頁數一多讀取速度似乎不太穩定…

缺點是沒有複雜的元件動態效果可套用,只能設定預設的那幾款。拿來測操作 Flow 、多人團隊合作是個好工具。

Pixate

http://www.pixate.com/

Taiwan UI/UX Designers 舉辦的 UI/UX Designers’ Night - 2015 Apr. 活動中提到這款工具。

試了下,很好用!靈活度也很高!入門的門檻有,不過比 3D MAX 簡單多了(喂)。亮點在內建的動作庫和細部設定,擅用細部設定可以搞出很多花樣。

可惜不是像 Hype3 或 Keynote 的分場景方式,比較像 Sketch 雜在一起的邏輯。所以若 Prototype 很多頁要測過場的話,應該會疊非~~常多圖層群組,很可怕…

結論

基於 RD 心態,所有只要平台/服務伺服器掛掉就不能工作的皆不在考量範圍內。再考慮到文章一開始的 Prototype 條件,就 Pixate 和 Hype3 這兩款符合我的需求。

只是我真的很擔心 Pixate 在製作超過 20 頁的 Prototype 圖層會有多複雜,以及 Hype3 的動態特效細節自己有沒有能力掌握…

補充:應該會買 Hype3+ 吧,以功能和價錢來看,這套不貴啊~~~(大量購買還有折扣、學生也有折扣呢!)

(好像 Get 到什麼點,知道為什麼 UI 設計師會跑去學寫 Swift 和 Html5 動畫…)

comments powered by Disqus