產品原型工具有哪些？

12-27

包括互聯網產品和移動互聯網產品，做原型工具都有哪些。大家都在用什麼？選擇這個工具的原因是？

雖然圖文並茂的回答問題會更好看，但是知乎伺服器載入圖片的速度實在不敢恭維，要想原型畫的好，以下工具都能幫到你：

墨刀－極簡超快的移動應用原型工具，早期版本是由 @張元一一人開發出來的
OmniGraffle－OS X 專用，曾獲得年度蘋果設計獎，可快速製作高精度頁面原型
Origami－基於 Quartz Composer 設計的原型工具
App Cooker－iPad 上的原型設計工具
乎之原型－原型快速設計工具及分享平台
Easel－讓不會代碼和用戶界面設計的創業者快速製作產品原型頁面
Prott－非常出色的原型設計工具
Neonto－iOS、Android UI 製作軟體
Protoshop－10 分鐘由平面設計稿打造出可在移動設備上運行的 Native App 原型
摩客－簡潔高效的原型圖設計工具
Epub360－畫原型，做 H5 頁面都能搞定
VXPLO 互動大師－基於雲計算方式的互動式網頁設計工具

覺得眼花繚亂，不知道如何挑選的話，可以前往 http://next.36kr.com/posts/collections/1 查看排名。

獨立項目，歷時一年傾心打造！

xiaopiu - 國內最新上線的一款免費在線原型工具

首先介紹xiaopiu.com是一款雲應用，您打開瀏覽器就能立即使用xiaopiu。作為一款雲應用，首先它具備了雲應用的基本屬性：即取即用，雲端存儲，應用版本實時更新，手機掃碼直接預覽，一鍵分享等功能。同時它還擁有下面幾個高級功能。

雲端資源，一鍵引用

但xiaopiu作為一款新型的原型工具，它的最大特點就是，提倡資源共享。你可以隨便引用他人公開的共享資源，可以在他人公開的資源裡面，直接編輯，學習他們的製作過程，選取你想用到的任何組件和素材。比如某位用戶做好了一個彈窗或者底部導航，他公開了資源，你就可以直接前往獲取，將樣式簡單調整為匹配自己頁面即可。我們的資源可以以組件為最小單位保存，同時會將它的事件和交互狀態同時保存下來。舉個小例子，如果你看中他們，點擊預覽或者編輯，直接對他們進行操作。

共享資源除了下載當然不夠，我們還推出了一個引用功能。通過對公開庫的引用，庫的作者實時更新，你就能獲取到最新的更新資源，直接放入到你的編輯界面左側的資源庫里。是不是很酷！讓大家想到了github是吧。喜歡創作資源共享的小夥伴們，趕緊來吧，xiaopiu在這裡等著您！

當然xiaopiu不像github，免費用戶必須公開項目，我們讓免費用戶也可以支持私有化和密碼設置訪問，讓你的項目和素材都可以作為私有資源。同時我們為免費用戶提供的功能許可權完全滿足個人使用。

精確到每一幀動畫

（點擊圖片放大，查看gif原圖）

所見即所得的交互動畫編輯方式，預覽，回放，拖拽停留，快捷方便。曲線和延時的調整，又能讓您的動畫更加生動，更好的表達動效之美。

為了滿足用戶創作交互動畫，xiaopiu提倡的是將組件的動效轉化為狀態的理念。

比如你需要製作一個小按鈕，你只需要將按鈕的基礎樣式製作完成後。給他創建兩個狀態，一個狀態為開啟狀態，一個狀態為關閉狀態。然後根據它所在狀態，調整為相應的呈現樣式，我們就會自動創建狀態之間的補間動畫。所以在動效的製作過程中，用戶只需要想好每個動態組件它需要呈現的各個狀態的樣子，動畫交互就為你自動關聯好了。&< 按鈕小示例 &> 打開底部的狀態動畫面板進行查看動效。

當然大家想更好的學習xiaopiu的動效製作，我們這裡也提供了實例教程。教程比較長，大家可以分成幾段去完成。如果大家想要先快速學習一下xiaopiu，我們也提供了入門教程。

全局架構，自在掌握

（點擊圖片放大，查看gif原圖）

您可以直接快速切換至多視圖面板，所有頁面一覽無餘，對您的頁面進行快速處理和邏輯排列，使整個項目層次清晰。

大家在一個app原型項目的製作過程中，全局的預覽和邏輯頁面的排列一定是至關重要的，xiaopiu專門為大家提供了多視圖模式，讓大家在創作過程中，一直都有一個全局的概念。這樣可以讓原型項目的邏輯更加清晰，頁面切換更加方便，更能關注到風格的統一和公用元素的使用，跨頁面之間的複製也都更好的處理。

關於項目

xiaopiu是一個獨立項目，由兩人全職開發完成，項目啟動至今已一年。經歷了3個月的內測，12月中進行公測，收穫一波種子用戶以後，進行推廣。我們希望能通過xiaopiu，讓更多的用戶在創作原型時更加高效，同時讓資源共享，避免重複造輪子。

Prototyping Tools

首先如果你小團隊或者個人開發，當然可以用Xcode，如果大公司跨部門審核調整各種，還是有個快速的原型。

如你要求，可交互。包括常用的Axrue，我試用過下面提到的所有軟體，分別完整產出過不同的原型，還有一些市面上的你一看它介紹圖還在用ios6的就知道不必了，說明很久沒更新了。

下面這些是我按照不同的特點進行了歸類，視你的具體情況而定吧。

我在選擇軟體這個過程中糾結了很久，也是用過在領悟真正的原理。但是這段時間的摸索對我以後也有很大幫助。

輕巧型
低保真；無控制項；iOS；少交互；免費。

Pop

非常火的一款原型軟體，第一次滿足了大家人人都是產品經理的感覺。

方法：拍照--添加觸控區--轉場方式--選擇圖片

平台：全手機操作

缺點：分享不便。動畫有如側滑、展開、消失，快現的搖一搖。操作只可以單擊。沒有控制項，所有東西都靠你的照片。

Tapcase

基本和pop一樣，就是軟體本身的UI更ios7一點，其他都一樣，也是導入圖片，加熱區就好了。缺點也是一樣的。

**總結：**輕巧型的就是適合簡單軟體且是早期，在手機上稍微複雜一點的就痛不欲生了。但問題是，如果簡單到這麼輕鬆了，那真的還需要用軟體模擬嗎？真的在紙上畫更輕鬆吧。點擊這種交互也不需要模擬了吧。

專業型
高保真度；自帶控制項；Mac+iOS；全交互；收費+免費

UIDesigner + UIDPlayer

騰訊出品的原型軟體，中文，操作簡單，符合國人習慣，容易上手。方便分享。

方法：windows電腦安裝UIDesigner，使用現成控制項進行可視化搭建，調試後通過網盤等方式發到iOS設備，用UIDPlayer打開即可。

平台：只支持Win+ iOS。可能也是優點，僅有的專門支持Win平台的原型軟體。

缺點：吹毛求疵吧，逼格不高。

Briefs + Briefscase

這是我最近發現非常好的一款軟體，好在對交互的支持上，如果調整細膩一點，幾乎可以以假亂真。我是用它在UI定稿的情況下，提前當完成品測試交互體驗的。當然也自帶控制項，用於原型設計。

還有三種模式，場景模式（Scene View ）和細節模式（Details View）分別負責交互設計和UI設計兩個部分，在設計完成後可以在第三個模式（Overview）查看整個APP的架構。

方法：在場景模式中，添加Actors（按鈕，文本段落，文本熱點）和Actions（觸發動作），可以設置界面跳轉時的TRANSITION效果，聲效，延時，Retina 空間等交互體驗輔助特效。

然後在iOS設備上安裝Briefscase，通過Dropbox同步後使用。

缺點：貴。1298元，感受一下。標註起來還是不太趁手。通過dropbox同步有點慢，又沒辦法加快，只能生等。可以先試用一下，覺得好再入手吧。

Blueprint + viewer

我最早用的原型軟體，現在製作出的原型已經出現在App Store里拉。Sakura Day。

當時用免費的功能（2個項目，無法導入dropbox圖片，無自定義控制項）就做出來了。後來接手公司大項目，專門買了完整版128元。

但是注意，這是用iPad做，iPhone或者iPad看，沒有電腦版的。我當時就是為了地鐵上可以用，是優點也是缺點。

方法：基本都一樣，就是在iPad上操作。觸控不那麼精確，但是操作體驗很好，完整版的自定義庫按鈕很多很豐富。

平台：iPad + iOS

缺點：最重要的就是只能在iPad上編輯，我做了個大型的項目，打開還是稍慢點，但是穩定，操作多了有點累。分享需要對方裝軟體，而且生成的項目文件會很大。

總結： 專業軟體還有很多，各有千秋，這兩個是最快支持iOS7的，說明他們很重視產品保證更新。但是價格確實也是不菲，優缺點很明顯，不符合國人習慣。騰訊那個整體是很不錯了，除非你和我一樣只用mac。

HTML型
中保真度；自帶控制項；全平台；需聯網；少交互；收費+免費

Flinto

在Flinto中快速製作iOS原型

我是通過下面提到的Icon Stricker發現的這個網站，試用了一下發現，它的特點是快捷的熱區和轉場操作，但是完全不帶控制項，也就是網頁版的 pop。需要你自己準備好圖片，不管是UI還是UE，這裡只負責交互。

最大的亮點就是支持滾動，前面提到的那些軟體，都需要通過轉場實現長圖滾動，這個可以原生支持。

方法：傳圖，熱區，轉場。看起來操作很簡單。

平台：全平台。

缺點：30天免費期，按月收費。不支持控制項。需要瀏覽器支持。

Fluidui

極簡風格的Fluid UI快速原型圖工具

最受推崇的網頁版原型網站。控制項從iOS到Android到WP。也是可以免費一個項目少量屏幕，然後按月收費。

方法：添加控制項，熱區，轉場。

缺點：我用網頁版的還是感覺有點遲緩，不痛快。勝在控制項實在很全，這個是很多桌面軟體都不支持的。如果針對安卓或者WP,實在沒什麼更好的選擇了。

**總結：**分享方便，輕量級是最大優點。但是按月付費這個我覺得大公司不會承擔這筆費用，小公司有沒有必要花費在這方面都值得商榷。速度也確實有點問題。交互也不如專業型那麼靈活。

超大型
高保真度；可拓展控制項；自定義庫；適配；少交互；收費。

Axure

繞不開的巨人，就像圖片界的PS，文字界的Word。它最大的特點就是別人都用它（雖然大多是盜版），我之前也存了顯出不同逼格的心試了前面那麼多軟體，最後繞了一大圈還是回到了它的懷抱。

回來的原因主要有三

大家都在用。這個沒辦法，溝通，傳輸，修改都方便，PC+mac都可以看。你自己逼格到了，人家都感受不了有什麼用呢。

確實強大，熟練使用庫和自定義控制項後，效率大幅提升，遠勝專業型。

生成的HTML頁面自帶左側目錄邊欄。是的，這就是我棄用OmniGraffle的主要原因。

方法：不再贅述了，總之要用好自定義控制項，這個會讓效率成倍提升。

缺點：生成的原型在移動端很難用。是有方法的，其實也不錯了，但是我還是懶得費心研究。之所以用這個就是為了給開發和寫文檔，很多標註和邏輯流程，沒必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個點開才能看到邏輯？

OmniGraffle

為了捍衛mac的逼格，我用了幾天就放棄了。不可否認，OG在調整控制項時的流暢穩健，草圖的美觀（前提是你用英文）等方面，能讓你享受整個製作過程，這是很少見的。但是我一直搞不懂畫布層共享層等等的關係，用起來失誤頻繁，而且，生成的html沒有目錄啊，文檔可讀性差。

方法：不再贅述。

缺點：除了前面所說，僅支持mac，生成的交互原型更難用到手機上。

總結： 是的，這兩個軟體不光是用來做移動交互原型的，他們的強大體現在非常多的領域，但是針對移動交互原型而言，都不適合。A勝在文檔和大家都用，所以在個方面就屈從了吧。

輔助型
特定功能（動畫；圖標；投影）

Quartz Composer

就是專門用來製作交互動畫原型的產品，免費，但是需要蘋果開發者賬號，學習曲線非常高，但是可以製作非常精美的強交互動畫。

Facebook Paper的動畫原型製作工具Origami及實現代碼Pop

Liveview

PS play等都可以快速把電腦上的內容投影到手機上。但是唯獨liveview可以支持交互。打開交互模式後，電腦端可以接受手機的點擊和滑動手勢。非常強大。

Icon Stricker

專門用來測試icon的網站，出自Flinto。快速在主屏查看圖標。

輕量級圖標測試工具ICON STRIKE：快速主屏查看

總結

我現在對原型的流程是這樣的：

用Axure繪製UE圖，導出成手機尺寸圖片
導入Briefs或者pop，加入交互，體驗一下
把UI圖轉成黑白，在Axure里標註，寫文檔，生成html
UI定稿再導入briefs，高保真體驗

重劍無鋒，大巧不工。

目前仍在使用Axure 6.5版本，等什麼時候拿出一張紙，隨手那麼一揮，一副界面圖就出來了，

那就真的厲害了

axure rp 最好用
visio畫流程還不錯
之前我也用過word 畫圖工具還有騰訊出的uid，結果發現還是axure好用

自薦下我們團隊的在線原型工具： MockingBot，小巧易用，非常容易上手，雖然功能上暫時還和Axure有些差距，但是我們是專門針對手機App的，可以快速做出在手機上直接查看的交互原型，如果不需要特別複雜的交互，基本上夠用了。

地址： MockingBot - Blazing fast mobile wireframing.

visio，最早使用的工具,簡單方便,不管是流程圖還是頁面結構圖都能產出，可以滿足低保真原型需求.缺點是，組件少且固定的幾個，不能添加交互；

balsamiq mockups，基於air的工具。跨平台，手繪風格的低保真原型利器.簡單，方便，容易上手.缺點是沒有免費版本，不過開發團隊提供了獲取免費版的方法；

Axure，優點大家都知道咯。我們一直在用,組件豐富，還可以外部導入組件，支持自定義組件，低保真高保真全部覆蓋.缺點是.嗯，6.0版還沒發現什麼缺點..

pencil，firefox插件版，但是FF升級到4.0後貌似悲劇了。

看了這麼多，就木有人推薦ProcessOn么？ProcessOn - 免費在線作圖，實時協作

目前支持UI界面原型圖、安卓界面原型圖、IOS界面原型圖，身邊不少產品經理在使用，相對墨刀和axure，這個門檻相對低很多，基本上上手就能操作，使用起來也很方便，強推。

除了支持原型圖，還能畫流程圖、思維導圖、UML圖，還不用下載客戶端，還是挺便利的

臨時即時隨性：筆和紙
單獨小頁面追求速度：Balsamiq Mockups
邏輯複雜的多頁面：Axure

Mockplus

這是一款國產、基於桌面的用戶體驗工具，可快速實現移動、Web及桌面應用原型設計。憑藉著出色的易用性，用戶無需憑藉編程知識即可快速上手。Mockplus擁有良好的所見即所得功能，例如大家熟悉的彈出菜單交互，3步即可實現：拖一個彈出菜單組件和一個按鈕到畫布，之後拖拽按鈕的鏈接點到彈出菜單，然後運行演示。總而言之，Mockplus是一款價格便宜且能夠快速建立交互原型的出色工具。此外，該產品還有個姊妹產品，Chainco，可專門導入UI視覺圖交互演示，簡單好用，建議試試。
中文版目前更新也比較快。

我要安利一款：vxproto, 網址是https://vxproto.com
也是一個在線的原型工具，界面長這樣：

和flinto，pop很像，是上傳圖片直接畫框型的，排版自由可隨意拖拽，鏈接跳轉可實現基本動效，然後就可以分享預覽了。
手機上的預覽動效都很流暢，圖片載入也很快，桌面端的還可以選擇不同的機型：

以上都是基本使用，各個原型工具其實都差不多
但由於本人是手繪黨，最開始構思階段其實還是紙筆用的最多，我比較喜歡vxproto的一個功能也是它可以直接拍照上傳編輯（右欄的高級功能里）：

還有一個用的比較多的功能是它可以把你頁面上所有原型圖的布局和鏈接指嚮導出成一張大圖：

直接把這張圖丟給程序員比寫文檔或跟他在那講半天效率高多了我覺得。

所以我現在的一般流程是：先畫界面（有美工的話就直接手繪一些框畫個簡單版的就好了，需要自己當美工的話我會用sketch），然後上傳到vxproto編輯交互，出原型，寫文檔。

感覺挺不錯的，大家可以去試試～

基本上使用的都是Axure RP。交互功能強大，保真度高。若有IPAD的話，推薦結合 mindo思維導圖軟體、omni軟體（繪製流程圖等）、繪圖類推薦sketchbook（隨時繪出想法）、當然文檔工具不可缺（這個就不用介紹了吧）。我製作原型的過程中大概就是使用這些軟體，希望對你有所幫助。

1，我上1張圖片，匯總一下
2，出處
《原型設計：實踐者指南》([美]沃菲爾（Todd Zaki Warfel）)【摘要書評試讀】
《原型設計：實踐者指南》

3，歡迎大家補充
我把文本信息也一併分享上來

紙

PowerPoint/Keynote

Visio

Fireworks

Axure RP Pro

HTML
。。。。。。。。

圖例
● 理想
? 能，但不理想
○ 不合適
。。。。。。。

紙

數字化

敘述式

互動式

快速

早期

後期

Mac

Windows

開銷

網路

移動

手勢/姿態

可復用代碼

協作性

分發性

可跟蹤性

。。。。。。。

若是有任何細節，補充，可以直接私信我，謝謝

最常用：
紙筆
word
visio
axure
ps

一個大腦、一張紙和一支筆

舊題新答。原型工具都有哪些其實不重要，重要的是值得一用的有哪些。站在2017年這個時間節點看，值得一用的其實不多。

一、值得推薦的產品原型工具

Axure 老牌產品原型工具，特點在於功能強大（完備）。

墨刀近幾年新崛起的一款產品原型工具，特點在於輕（功能輕）快（操作快）。

Flinto 跟墨刀比較接近，特點同樣在於輕（功能輕）快（操作快）。

Principle 簡單易上手的移動項目交互動畫設計工具，側重點在交互動效上。

簡單來說，注重細節、效果，用高大全的Axure；注重高效、敏捷，用墨刀、Flinto；注重交互動效表現，輔助使用Principle。

二、以上幾款工具的介紹與對比

圖勝於文，先上圖：

簡要介紹：

Axure

高大全的老牌產品原型設計工具

優點：功能、用戶體量、教程及資源積累。用戶自產出了大量優質組件庫，可輕鬆復用。

缺點：學習成本高、操作複雜、對app原型設計及預覽支持不友好。雖說其目前版本迭代有意識對操作、分享進行優化，但事實依舊是：墨刀、Flinto幾秒鐘能搞定的操作， Axure 可能需要幾分鐘。藉助AxShare實現移動預覽的方式，相比墨刀、Flinto的「一鍵預覽」也相對複雜很多。

---

墨刀

作為近幾年新崛起的產品原型工具的典型代表，墨刀輕快、易上手的操作體驗及一些功能上的創新和Axure形成了鮮明的對比。

優點（相對Axure而言）：學習操作成本低，移動原型設計支持好，原型移動預覽方便（網頁鏈接預覽、微信掃碼預覽、安裝到桌面預覽）、數據即時雲端同步、支持Sketch導入。

缺點：輕快靈活意味著墨刀的功能不像Axure那樣複雜而全面，理所當然原型效果實現上與Axure有一些差距。

---

Flinto

單從功能角度來看，Flinto比墨刀更「輕」，它有點像是像是一款介於整體原型設計與交互動效設計之間的產品。

優點：學習操作成本低，移動原型設計支持好，原型移動預覽方便（網頁鏈接預覽、安裝到桌面預覽）、支持Sketch導入。

缺點：同上，首先，輕快靈活意味著Flinto的功能不像Axure那樣複雜而全面，理所當然原型效果實現上與Axure有一些差距。其次，缺乏組件庫資源是一個硬傷。最後，只支持Mac...

---

Princple

Principle在產品設計中結合了Sketch界面設計和功能布局、Keynote的神奇移動效果，本身的學習成本、操作複雜度較低。作為側重交互動效設計的工具，Principle適合用於設計部分產品頁面轉場或者元素切換的擬真動畫。

優點：學習成本低，設計效率高，動效表現力強。

缺點：不適合設計完整的產品原型。也是只支持Mac...

PS：Axure、墨刀是嚴格意義上的原型設計工具，Principle則只是交互動效工具，Flinto介於中間。因為產品原型包含頁面、元素、交互三部分，兩類工具在原型設計中可以說是互補的。

三、不推薦使用的產品原型工具（特別針對新手）

國外在線工具：1.很可能因伺服器問題，出現操作載入緩慢的情況 2.無中文版

不信的話可以自行感受一下

Invision、Prott、Marvel、atomic、Proto.io、POP

---

非專業工具：專業的事情用專業的工具來做是比較靠譜的。

以下列舉這些工具本身很優秀，但原型設計基本都不算它們的核心功能，僅是"可以用來做原型"而已，因此不建議用它們來畫原型。

Sketch Mac系統下的強大矢量繪圖工具。雖說不推薦使用它，但用Sketch做好原型圖頁面導入到墨刀或者Flinto中製作交互效果還是不錯的。

ProcessOn 一個綜合性質在線作圖工具。流程圖、思維導圖、UI原型圖、UML、網路拓撲圖、組織結構圖

Visio 微軟旗下繪圖工具。

OmniGraffle Mac系統下的繪圖（圖表、流程圖、組織結構圖）工具。

Keynote Mac系統下的幻燈片演示工具（蘋果開發）。

xcode Mac系統下的集成開發工具（蘋果開發）。

---

涉及敲代碼的工具：反正我是敲不來...

Framer Studio

origami

---

掛掉的工具：很多答主提到其它的工具都掛掉了，不止這兩個

Pixate Studio

被Google收購了，16年10月份已經停止維護跟更新。

Form

被Google收購了，目前已停止維護跟更新。（也涉及敲代碼）

鉛筆和紙是最方便最快速記錄關於產品雛形的一些想法！方便貼和白板也不錯把每一個模塊寫在一張方便貼上貼在白板上方便梳理每個模塊之間聯繫從哪裡進入從哪裡出！

Axure RP ：功能無比強大，交互設計能力出眾，控制項庫豐富，hpx-party核心團隊一直在跟進漢化；
Mockup：基於Adobe air,具有手繪風格的原型工具，適合畫線框圖及原型，不適合帶有交互性質的原型設計；