Note:Prototype 製作軟體

最近在找做 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 動畫…)

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
Adobe Muse CC 心得


「Adobe Muse CC 是為了想要建立網站但不想撰寫程式碼的設計師而設計。」官網開章明義就直接寫了這句話。好吧如果是為了不會手寫Code的設計師、只需要產出一些不需要套用程式的網站的話,Muse 是滿有吸引力的。(先不提它產出的 Code 很噁心這件事…)

試閱:網頁設計職人必修:網頁設計鐵則&問題對策 84
試閱:網頁設計職人必修:網頁設計鐵則&問題對策 84

感謝旗標出版社贈書試閱,我有好好把這本書看完。本文除了心得外、另寫了些個人和書中觀點不同的部份。這是本值得入手的好書。

設計和 F2E 的切圖與切版

收到讀者來信,這位讀者是 F2E,發現設計師的切圖和 F2E 的切版似乎不太一樣,所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明,其實還滿想回他一句「多被RD罵幾次就會了啊」…orz

初學者的 Mockup

在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種,最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧,其實指的就是製作 Mockup 的能力,字體設計、按鈕樣式、扁平化、擬物風等等。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close