產品原型製作工具(Prototyping Tools)使用分享
Prototype，顧名思義是產品原型，而為什麼要做產品原型？在現在軟體開發速度提升的環境下，產品開發已經不是老舊的Waterfall方法(構想 →分析 →測試 →開發)，不僅時間慢而且非常的危險，萬一想法不好怎麼辦？開發出來之後產品生死就是一場豪賭。 現在流行的產品開發方式偏向Agile，讓設計和調研等步驟不斷的循環去測試到底產品有沒有在正軌上面，有沒有在符合使用者的需求？在開發之前常常使用產品原型去做調研，一方面設計師可以非常快速的視覺化想法，在團隊上分享得到意見，另一方面也可以在開發前就做出可以互動的產品去研究產品到底資訊架構好還不好，或是視覺上排得會不會上使用者困惑，而避免花大把鈔票和時間開發出來最後卻發現產品功能做得不盡符合使用者需求。
產品原型從Low-fidelity(低保真)到high-fidelity(高保真)都有，許多情況在早期的構思使用Low-fidelity prototype去做易用性測試(Usability Testing)就可以大概得知這個想法好還是不好，不僅省時間也可以測試許許多多的idea!
言歸正傳，Wei今天主要是以個人經驗分享接觸過的Prototyping工具和大概比較他們的優劣：
1. 紙和筆
使用紙和筆是最方便的工具惹，不僅能快速想法還能貼在牆上讓自己看起來很文青。（妹子：哇你牆上那個是什麼呀？ 你：我的創意想法太多了，我貼在牆上怕我忘記，哎。 ）
不是說用紙就無法做出可以互動的產品原型，你根據你的產品資訊架構可以畫出許多頁（不用畫出全部，畫出你要測試的部分就好），讓測試者在紙上按再去換介面，其實許多時候在這階段就可以測試出許多東西了。
更多資訊或教學可以參考這裡
優點：快速、方便
缺點：想不太到…太不會畫的人可以畫得沒有人看得懂
2. POP
台灣人的團隊，前陣子被Marvel收購。好處就是可以將你畫出的介面拍下來，再去設定按哪裡連到哪，非常的易用和快速。
優點：快速、易用
缺點：較適用於早期做concept時候使用
3. Balsamiq
也是個可以迅速做出低保真的產品原型工具。其實我認為這幾種低保真的產品原型在做測試時可以讓測試者不會混淆真的產品，反而可以讓他們注意在使用流程和體驗上。
優點：繪畫感（不會讓使用者測試時以為是真的產品而失去測試目的）、快速、有許多裡面已經有的icon可以使用
缺點：比起紙和筆慢許多，比較適合測試資訊架構和大致上的軟體layout
4. Keynote
可以拉一拉做出Low-fidelity的互動式原型，也可以導入設計好的介面做高保真的產品原型。
小編是覺得做Low-fi直接用畫的或Balsamiq畫畫就好還比較快，做High-fi不如用Invision或Marvel比較快。
優點：免費
缺點：不是給做Prototype用的軟體，用其他方法比較有效率點
接下來介紹的比較偏做Mid-fi到High-fi的工具。大致上以功能歸類成圖層式和頁面式的Prototyping工具，每種都有其優缺，圖層式主要是可以做比較酷炫的動畫，或是設定一個按鈕有不同state等等，而頁面式是大都需要你在Sketch或illustrator做好再導入，再去定義按哪個區域連到哪裡，可以做的自由度比較低些。
5.InVision
頁面式的工具，小編之前非常愛用，可以設熱點，容易分享給別人測試都是其優勢，現在愈來愈強還可以遠端錄影測試者的反應，還可以直接Sketch導入做成Spec讓Developer直接在上面載assets等等。
主要是要先用Illustrator或sketch做好設計，導入InVision再去連每個介面和哪裡到哪個介面，可以設定page interaction（上滑或下滑等等）。
分享也可以傳網址給別人手機，或是載下來都可以，也可以讓大家在上面評論。
優點：簡潔易用、功能愈來愈多、還可以放GIF做些簡單的動畫、易分享而且可以在上面討論
缺點：網頁版（個人比較愛桌面軟體比較不會累格）、貴
6. Adobe XD
頁面式。這不是Adobe後面放表情符號，就是Adobe XD。現在常常用這個，主要原因是公司有Creative Cloud，不然比較想用InVision…
基本上跟InVision很像是導入設計再去定義哪頁連哪，不過他一次性將所有介面放在一頁我覺得比較清楚的讓設計師可以有架構的去做產品原型。他也有基本功能讓大家可以拉拉線等等簡單地畫出Low-fi的原型
優點：跟Creative Suite是一起的，容易上手
缺點：有些功能沒有InVision做得好，像無法放gif、用Illustrator沒有好處、無法定義Footer（做比較長的介面沒辦法讓底下那塊tab bar在產品原型中秀出）
7. Axure
圖層式。許多公司要求的必備工具，不知為何各家UX設計師常常用這個（我們也不例外）
功能強大，可以定義Button的各種state然後設成Master(就像Sketch或Illustratro裡的Symbol )，也可以導入你原本做好的介面作業面試的產品原型。還可以做text input field或設置條件(按這個按鈕到什麼State時另外一個按鈕發生甚麼事等等)
小編並不是很愛用，因為實在是非常複雜！親測過做一個一模一樣的Prototype用Adobe XD或Invision可能花一個小時但用Axure需要花到三四個小時。
但是有些功能在某些條件下是很好用的，譬如你要做一些條件設置比較複雜的產品原型時其他工具比較辦不到。但是我是覺得如果要做到很複雜的東西時，花那麼多時間在那上面真的值得嗎？那是要易用性測試的重點嗎？做到那個程度是不是直接Code出來比較快? 或是用Framer? 對開發者而言還可以比較容易重複使用，所以在做產品原型時可以根據你要測試什麼來決定你的工具。
優點：強大、功能包山包海
缺點：上手難度較高、做簡易產品原型所需時間較多
8. Proto.io
圖層式。跟Axure有點像，之前用過一陣子，可以做些動畫像是After Effect的時間軸去調，跟Axure一樣上手時間較長，需要花時間學習。他有library可以拉IOS或Material Design的東西直接出來用
優點：較Axure易用
缺點：上手難度較高、網頁版
9. Principle
圖層式。最近蠻愛用這個！做動畫非常好用，有像after effect的時間軸去調整動畫，也可以設定Component在動畫裡再弄動畫(全面動畫)(像Axure的Master一樣)很適合做些比較細微動畫的Prototype，或是想要測試幾頁介面的比較高保真的動畫。
不過如果你做好設計要做整個產品的產品原型就不要用這個了，請用InVision或Marvel或XD之類的快五倍。
優點：做動畫直覺易用
缺點：不適合做較多頁面的產品原型、分享較不容易
10. Framer
最後這個工具是Framer，最近在花些時間邊做邊學使用這個工具。Framer使用CoffeeScript，是個像是比較簡易版語言可以編譯在Javascript，對不寫程式碼的設計師來說比較困難，需要花些時間去習慣學習使用程式語言，對Developer來說又有些有的沒的客製化API（我同事說的不知道他在供三小）沒那麼易用。
好處是Framer是給設計師相對非常直覺化用程式碼的軟件，你可以在右邊看到即時的產品原型，而程式碼讓你的Prototype基本上沒有限制，可以客製出各種你想要的動畫，或是data-driven的prototype，可以跟程序員直接傳達產品原型的動畫邏輯，或是他們可以直接拿去一些code使用。
另外Framer提供了相當完整的教材和社群，網路上也有些教學(有些要付錢)讓你使用，我認為使用Framer可以讓比較複雜的東西可以完整有邏輯的呈現，也不需要像其他軟體花那麼多時間呈現而工程師又需要從頭做起，可以更有效率地傳達設計。
當然你只是要做頁面式的產品原型就不是那麼需要用這個了。
優點：使用程式碼、基本上功能沒什麼限制
缺點：入門門檻高
這篇主要是基於小編使用過的經驗做非常主觀的心得分享，當然有些工具小編不是很愛使用但其他人可能愛不釋手。
小編很愛試用各種不同的工具做產品原型，也很愛嘗試不同的設計軟體或是各種工具讓設計師更好互相或跟工程師溝通，有機會再分享其他使用心得！
謝謝大家～
-Wei
