1、最最傳統(tǒng)的工具：筆+紙

手工草圖，這仍然是一個(gè)進(jìn)行原型設(shè)計(jì)的可靠的真實(shí)的方法。很多應(yīng)用程序就開始于紙上的草圖。

2、 POP（Prototyping on Paper）

紙+筆設(shè)計(jì)工具的升級版。非常火的一款原型軟件，第一次滿足了大家人人都是產(chǎn)品經(jīng)理的感覺。 很多公司在用：quora、sina、豆瓣、36氪、ifanr…

方法：拍照--添加觸控區(qū)--轉(zhuǎn)場方式--選擇圖片。
平臺：全手機(jī)操作。
缺點(diǎn)：分享不便。動(dòng)畫有如側(cè)滑、展開、消失，快現(xiàn)的搖一搖。操作只可以單擊。沒有控件，所有東西都靠你的照片。

3、UIDesigner + UIDPlayer

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

方法：windows電腦安裝UIDesigner，使用現(xiàn)成控件進(jìn)行可視化搭建，調(diào)試后通過網(wǎng)盤等方式發(fā)到iOS設(shè)備，用UIDPlayer打開即可。
平臺：支持Win+ iOS。
缺點(diǎn)：吹毛求疵吧，逼格不高。

4、Pencil Project

Pencil是一款開源的可以用來制作圖表和GUI原型的工具，可以作為一個(gè)獨(dú)立的app，也可以作為Firefox插件。內(nèi)置模版可以幫你繪制桌面和移動(dòng)界面中用到的各種各樣的用戶界面，包括流程圖、UI和一般的通用圖形。
通過它內(nèi)置的模板，你可以創(chuàng)建可鏈接的文檔，并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動(dòng)app模版。

5、Axure

Axure大家應(yīng)該都不陌生。這里主要說下移動(dòng)端的演示，這樣才充分表達(dá)原型意圖。按F5生成原型的時(shí)候，在“Mobile/Device”選項(xiàng)中可以設(shè)置適配移動(dòng)設(shè)備 的特殊原型（Axure 6.5以下版本），再用移動(dòng)設(shè)備訪問你生成的原型鏈接即可（該頁面創(chuàng)建一個(gè)桌面快捷方式）。

6、Briefs + Briefscase

一款比較不錯(cuò)，但要收費(fèi)的原型設(shè)計(jì)軟件。有三種模式，場景模式（Scene View ）和細(xì)節(jié)模式（Details View）分別負(fù)責(zé)交互設(shè)計(jì)和UI設(shè)計(jì)兩個(gè)部分，在設(shè)計(jì)完成后可以在第三個(gè)模式（Overview）查看整個(gè)APP的架構(gòu)。

方法：在場景模式中，添加Actors（按鈕，文本段落，文本熱點(diǎn)）和Actions（觸發(fā)動(dòng)作），可以設(shè)置界面跳轉(zhuǎn)時(shí)的TRANSITION效果，聲效，延時(shí)，Retina 空間等交互體驗(yàn)輔助特效。
然后在iOS設(shè)備上安裝Briefscase，通過Dropbox同步后使用。
缺點(diǎn)：要收費(fèi)。

7、Proto.io

dashboard 可以用來管理項(xiàng)目。編輯器是構(gòu)建原型的環(huán)境，由一組設(shè)計(jì)和開發(fā)原型的工具組成，另外還可以構(gòu)建交互。播放器用來觀看原型，并與原型進(jìn)行交互，并提供了相關(guān) 工具來標(biāo)注和保留反饋信息。你可以直接在真實(shí)的移動(dòng)設(shè)備上對原型進(jìn)行測試。并且可以使用iOS或Android上的瀏覽器以全屏模式運(yùn)行原型。

8、Blueprint + viewer

一款運(yùn)行在IPad上的APP原型設(shè)計(jì)軟件。是一個(gè)非常好的、免費(fèi)的HTML5應(yīng)用，通過它可以創(chuàng)建可愛樸素的線框圖、實(shí)體模型和UI概念。該程序使用起來非常簡單，并且有內(nèi)置的模板可以直接使用（模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等）。

Blueprint是一款售價(jià)19.99美元的iPad應(yīng)用，已經(jīng)針對iOS 7進(jìn)行了優(yōu)化，可以幫你輕而易舉地設(shè)計(jì)原型。Blueprint還有一個(gè)配套的免費(fèi)內(nèi)應(yīng)用--Blueprint Viewer，你可以用它來查看你的項(xiàng)目，或者通過iTunes File Sharing或者Dropbox Sync進(jìn)行備份。Blueprint還具有自動(dòng)保存的功能，有助于你毫無顧慮地工作。
 
注意：如果你不想掏這20美元，你可以試試demo版本Blueprint Lite。
 
你也可以通過郵件發(fā)送你的原型，或者或者直接從收件箱中用Blueprint或者Blueprint Viewer打開原型。Blueprint支持PDF和PNG格式的輸出，這樣無需使用Blueprint，你就可以打印和分享你的原型。

Blueprint的UI非常直觀，所有你需要的工具都觸手可及。你可以用Blueprint為iPad和iPhone app創(chuàng)建原型，并且它的所有原型組件都是可伸縮的，以適應(yīng)不同尺寸屏幕的iPhone。
Blueprint還有一個(gè)模仿蘋果默認(rèn)設(shè)計(jì)組件的插件庫，包括按鈕、加載指示、表視圖以及地圖視圖。Blueprint還包括一些可以馬上上手使用的復(fù)合組件，比如彈出視圖或者操作表單。你可以簡單地重新定義插件的顏色、尺寸，或者改變位置以滿足你的實(shí)際需要。

9、Moqups

是一個(gè)非常好的、免費(fèi)的HTML5應(yīng)用，通過它可以創(chuàng)建可愛樸素的線框圖、實(shí)體模型和UI概念。該程序使用起來非常簡單，并且有內(nèi)置的模板可以直接使用（模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等）。
它還提供了iPhone和iPad模板，以及iOS相關(guān)的按鈕、提示框、picker、菜單、開關(guān)以及鍵盤等。你可以設(shè)置網(wǎng)格的尺寸，并預(yù)覽和分享你的線框圖。Moqups提供了一個(gè)很有用的功能就是對齊網(wǎng)格，可以使對象精準(zhǔn)對齊。

開發(fā)Apple APP，用這個(gè)工具制作原型非常不錯(cuò)。

10、UXPin

UXPin是DeSmart團(tuán)隊(duì)開發(fā)的一個(gè)簡易快速的實(shí)體模型和在線可點(diǎn)擊原型創(chuàng)作工具。它基于優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)原則，在構(gòu)建原型中，它提供了一個(gè)完整的工具包（該工具包具有良好的用戶設(shè)計(jì)模式和元素）來從頭構(gòu)建一個(gè)出色的原型。

UXPin 具有響應(yīng)式的斷點(diǎn)功能，創(chuàng)建的響應(yīng)式原型和線框圖可以運(yùn)行在不同的設(shè)備和分辨率上。另外該軟件還提供了版本控制和迭代功能，可以輕松的共享預(yù)覽，直觀的注 解和實(shí)時(shí)的協(xié)同編輯和聊天。該軟件擁有大量具有吸引力的用戶界面元素風(fēng)格（包括web，iOS，Android等），并且具有快速、靈敏的響應(yīng)拖放接口。

11、Omnigraffle

OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結(jié)構(gòu)圖以及插圖等類型圖的app，也可以用來組織頭腦中思考的信息，曾獲得2002年的蘋果設(shè)計(jì)獎(jiǎng)。

它采用拖放的所見即所得界面，你可以用鋼筆工具繪制自定義的模版或者圖形，此外還自帶Graffletopia提供的多個(gè)iPhone、iPad以及Android模版。

12、Balsamiq Mockups

Balsamiq Mockups是一款非常使用起來非常方便、非常高效的原型設(shè)計(jì)軟件。

Balsamiq Mockups目前包括75個(gè)界面控件和187個(gè)漂亮的icon，基本上自帶了常用的小控件，UI控件支持自動(dòng)拖拽，并且可以實(shí)現(xiàn)自動(dòng)對齊。還有不少隨即可用的元素，簡單拖拽就能形成效果圖。 Mockups To Go library中還有適合Android、Blackberry以及iOS開發(fā)者的模版，Windows、Mac OS、Linux下都可以使用。可使用XML語言保存元素，也可以導(dǎo)出PNG圖片，可以插入到任何項(xiàng)目。
Balsamiq Mockups再現(xiàn)在白板上繪制草圖的體驗(yàn)，共享原型進(jìn)行測試有助于合作與反饋。整體采用了手繪風(fēng)格，Balsamiq Mockups還提供了一個(gè)將圖片轉(zhuǎn)換成手繪風(fēng)格的選項(xiàng)，保持了整體風(fēng)格的一致。

13、JustinMind

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以輸出Html頁面。與目前主流的交互設(shè)計(jì)工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬于設(shè)計(jì)移動(dòng)終端上app應(yīng)用。

JustinMind 可以幫助開發(fā)者設(shè)計(jì)更豐富、更具交互新的移動(dòng)產(chǎn)品線框圖，包含了iPhone、Android 以及iPad常用手勢，滑動(dòng)、縮放、旋轉(zhuǎn)，甚至捕捉設(shè)備方向等，從而創(chuàng)造出更具交互性的原型。另外，它可以導(dǎo)出原型信息到Microsoft Word，生成規(guī)范的文檔。
此外，你還可以自定義小組件，創(chuàng)建自定義組件庫，并進(jìn)行分類，不管對象是iPhone、iPad、黑莓、Android還是其他。

14、FluidUI

Fluid UI是一款用于移動(dòng)開發(fā)的Web原型設(shè)計(jì)工具，可以幫助設(shè)計(jì)師高效地完成產(chǎn)品原型設(shè)計(jì)。Fluid UI 內(nèi)置超過1700款的線框圖和手機(jī)UI控件，并且還會(huì)經(jīng)常進(jìn)行更新。

Fluid UI無設(shè)備限制，無平臺限制（Windows、Mac以及Linux系統(tǒng)），支持Chrome和Safari瀏覽器（Chrome瀏覽器上的app也可離 線使用）。你可以使用Fluid Player來預(yù)覽你的設(shè)計(jì)，收集意見和反饋。還可以以PNG、PDF方式輸出。
Fluid UI使用方法簡單，采取拖拽的操作方式，不需要程序員來寫代碼。另外，F(xiàn)luid UI資源庫非常豐富，有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求，你也可以自行添加。

15、Mockflow

Mockflow是一款可以為網(wǎng)站和移動(dòng)app快速高效制作線框圖的工具，友好而強(qiáng)大，類似于Axure。內(nèi)置了許多經(jīng)常用到的控件和圖標(biāo)，比如按鈕、圖片、下拉式菜單、進(jìn)度條以及文字面板等等，能夠有效幫助用戶提高對傳統(tǒng)軟件以及富互聯(lián)網(wǎng)應(yīng)用軟件的快速設(shè)計(jì)和交互式用戶界面實(shí)體模型的規(guī)劃進(jìn)程。

Mockflow附帶有大量跟線框圖部件有關(guān)的資源庫，提供了四個(gè)可選模版(iPhone app、Android app、iPad app以及Windows Phone) ，你也可以選擇自己的布局和設(shè)計(jì)。你還可以通過MockStore下載更多元素和模版。
Mockflow支持協(xié)作和聊天功能，每個(gè)人可以在不同的頁面看到項(xiàng)目的實(shí)時(shí)進(jìn)展和變更。項(xiàng)目也可以以各種不同的形式輸出，你也可以在移動(dòng)設(shè)備或者臺式電腦上查看和測試app的功能。

16、Protoshare

在線網(wǎng)站開發(fā)協(xié)同制作工具是一個(gè)十分便捷的在線原型制作工具，側(cè)重于團(tuán)隊(duì)協(xié)作。團(tuán)隊(duì)成員可以通過這個(gè)工具對工作進(jìn)行審查，并及時(shí)提供反饋，對線框圖或內(nèi)容進(jìn)行建議。

作 為一個(gè)強(qiáng)大的線框圖和原型平臺，Protoshare提供了大量移動(dòng)工具集（有來自中心資源庫的大量移動(dòng)模版和大量2D、3D動(dòng)畫過渡）。通過“拖放”界 面，你可以快速創(chuàng)建交互式的線框圖和移動(dòng)原型，然后發(fā)送至iPhone、iPad或者Android設(shè)備進(jìn)行測試，體驗(yàn)app的功能實(shí)現(xiàn)情況。
另外，Protoshare還支持分享和反饋功能，項(xiàng)目成員可以標(biāo)記和跟蹤的反饋信息來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋創(chuàng)建移動(dòng)產(chǎn)品線框圖，進(jìn)而演變?yōu)楦弑Ｕ娴脑汀?

17、Wireframe

Wireframe是一款具有“點(diǎn)擊-拖-放”界面且超簡單的線框圖創(chuàng)作工具。雙擊實(shí)現(xiàn)編輯功能，有限的界面意味著你會(huì)把精力集中于你的想法上。還給每個(gè)線框圖分配了特有的URL，便于標(biāo)記和分享。

Wireframe有瀏覽器窗口和移動(dòng)手機(jī)兩個(gè)模版選項(xiàng)，移動(dòng)版有縱向和橫向兩個(gè)選擇。線框圖的每個(gè)元素都可以編輯和轉(zhuǎn)換。

18、InVision

InVision是一個(gè)便捷的產(chǎn)品原型生成工具，用戶制作一個(gè)在線原型只需要四部：創(chuàng)建一個(gè)工程、上傳視覺設(shè)計(jì)稿、添加鏈接以及生成在線原型。

確切說，InVision提供的不是準(zhǔn)確的線框圖，而是一個(gè)快速原型的環(huán)境，可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你 測試app的工作情況，同時(shí)該工具還支持協(xié)作和分享功能，生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論，便于準(zhǔn)確的交流。
針對iOS 開發(fā)，InVision還增添了其他功能，比如自定義主屏幕icon和自定義加載頁面。

19、WireframeSketcher

WireframeSketcher是一款強(qiáng)大的、靈活的線框圖和原型快速創(chuàng)作工具，適用于桌面app和移動(dòng)app開發(fā)者。WireframeSketcher可以作為單獨(dú)的app，也可作為一個(gè)Eclipse 插件。

WireframeSketcher還是一款簡單的帶有手繪風(fēng)格的創(chuàng)作工具，這樣你就不會(huì)被一些細(xì)節(jié)所打擾。它包含大量UI控件，可以進(jìn)行靈活的自定義設(shè)置。經(jīng)過優(yōu)化的界面、多個(gè)快捷方式、格點(diǎn)捕捉以及智能化引導(dǎo)都讓W(xué)ireframeSketcher成為快、高效的選擇。Mockups Gallery 還儲存了大量可供下載的插件、模版以及icon等。

20、Mokk.me

Mokk.me 是一個(gè)簡單快速的原型工具，通過界面上簡單的拖放操作，不用了解單線編程就能創(chuàng)作一個(gè)可以分享、測試以及多平臺的app。目前，Mokk.me正在測試 中，但它是一個(gè)簡單的基本的工具，任何人可以用它來創(chuàng)建app的布局。你可拖、放或者編輯小工具，可以搭建和連接頁面，還可以選擇過渡動(dòng)畫。它的特點(diǎn)還在 于頁面和按鈕、圖片小工具、文本輸入以及復(fù)選框形式。

另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你創(chuàng)建了原型，你還可以進(jìn)行分享，在iOS 和Android上進(jìn)行測試。

21、Omnigraffle

OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結(jié)構(gòu)圖以及插圖等類型圖的app，也可以用來組織頭腦中思考的信息，曾獲得2002年的蘋果設(shè)計(jì)獎(jiǎng)。

它采用拖放的所見即所得界面，你可以用鋼筆工具繪制自定義的模版或者圖形，此外還自帶Graffletopia提供的多個(gè)iPhone、iPad以及Android模版。

22、iPlotz

iPlotz 是一款可以用來創(chuàng)建可點(diǎn)擊、可導(dǎo)航的原型和線框圖工具，適合網(wǎng)站開發(fā)者和移動(dòng)app開發(fā)者。你可以在一個(gè)可調(diào)整的頁面拖放元件，然后連接起來，增加其他屏 幕或者頁面的熱點(diǎn)鏈接。你可以選擇使用iPhone/iPad模版或者Android模版，任何模版都有獨(dú)一無二的元件設(shè)置。

iPlotz界面明白易懂，支持協(xié)同工作、可分享的編輯權(quán)限、任務(wù)管理以及評價(jià)系統(tǒng)。另外，項(xiàng)目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。

23、Pidoco

Pidoco 是一款基于Web的原型設(shè)計(jì)軟件，用于快速創(chuàng)建可點(diǎn)擊的線框圖。也可以用于制作網(wǎng)站項(xiàng)目、移動(dòng)項(xiàng)目、企業(yè)應(yīng)用程序的用戶界面原型。擁有智能的共享和協(xié)同工作功能以及便捷的可用性測試模塊，更易于使用。

通過簡單的拖放界面，你可以使用軟件自帶的移動(dòng)UI元素來快速創(chuàng)建移動(dòng)app原型，或者使用移動(dòng)頁面模版來節(jié)省更多時(shí)間。你可以選擇"plain" 或者"sketched" 模式來展示你的線框圖。

24、FlairBuilder

FlairBuilder是一款可以用來創(chuàng)建交互性線框圖的快速原型工具，可以幫你把低保真度的草圖升級為高保真度的線框圖。FlairBuilder內(nèi)置數(shù)量超過70個(gè)的小部件或小元件，還帶有大量模版。你可以簡單快速地預(yù)覽你的項(xiàng)目，并且輸出功能齊備的HTML原型。線框圖以樹狀結(jié)構(gòu)出現(xiàn)，F(xiàn)lairBuilder可以讀取你的線框圖，并產(chǎn)生一個(gè)易于查看的層級式網(wǎng)站地圖。

FlairBuilder帶有iOS和Android模版，你可以以HTML形式輸出原型，這樣也易于在真機(jī)上進(jìn)行測試。

25、iPhone Mockup

iPhone Mockup最大的特點(diǎn)是簡單，可繪制簡單線框圖（illustration）和手繪風(fēng)格線框圖（pencil）兩種風(fēng)格的在線原型工具，你可以在兩種風(fēng)格之間自由切換。

iPhone Mockup支持協(xié)同創(chuàng)作和同步數(shù)據(jù)/操作，每個(gè)人都可以知道項(xiàng)目做了那些更改，只要他們有項(xiàng)目的URL，每個(gè)人都可以在線編輯。iPhone Mockup支持Firefox、Safari、Chrome以及Internet Explorer 8 瀏覽器。
缺點(diǎn)是沒有密碼保護(hù)，且組件有限，但卻是一個(gè)最基本且最簡單的工具，可以上傳圖片和更改文本標(biāo)簽。

26、HotGloo

HotGloo是一款為傳統(tǒng)軟件以及富互聯(lián)網(wǎng)應(yīng)用軟件制作產(chǎn)品原型的在線工具，友好而強(qiáng)大。內(nèi)置了許許多多會(huì)經(jīng)常使用到的控件和UI元素，鼠標(biāo)拖拽至畫布，再組織繪制即可。能夠有效的幫助用戶提高對傳統(tǒng)軟件以及富互聯(lián)網(wǎng)應(yīng)用軟件的快速設(shè)計(jì)和交互式用戶界面實(shí)體模型的規(guī)劃進(jìn)程。
最近，該軟件新增了iPad和iPhone專用的模板套件，包括基本的界面元件，比如標(biāo)簽、icon、地圖、按鈕以及大量表視圖。
HotGloo輕量級但卻非常強(qiáng)大的模版系統(tǒng)給人深刻印象，雙擊可編輯模版組件，還有助于強(qiáng)調(diào)app中響應(yīng)式的交互設(shè)計(jì)。協(xié)作功能可以讓團(tuán)隊(duì)多人參與到線框圖制作過程中，你也可以邀請別人來參看或者給你一些反饋和意見。內(nèi)置的聊天功能可以讓成員實(shí)時(shí)討論線框圖的繪制情況。

27、InVision

InVision是一個(gè)便捷的產(chǎn)品原型生成工具，用戶制作一個(gè)在線原型只需要四部：創(chuàng)建一個(gè)工程、上傳視覺設(shè)計(jì)稿、添加鏈接以及生成在線原型。

確切說，InVision提供的不是準(zhǔn)確的線框圖，而是一個(gè)快速原型的環(huán)境，可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你測試app的工作情況，同時(shí)該工具還支持協(xié)作和分享功能，生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論，便于準(zhǔn)確的交流。
針對iOS 開發(fā)，InVision還增添了其他功能，比如自定義主屏幕icon和自定義加載頁面。

28、AppCooker

AppCooker是一個(gè)售價(jià)14.99美元的iPad應(yīng)用，已經(jīng)針對iOS 7進(jìn)行了優(yōu)化。它并不僅僅是一個(gè)原型，它還提供了一個(gè)讓你從概念捕獲靈感的工具箱，從圖標(biāo)草圖和原型設(shè)計(jì)，到App Store信息收集以及創(chuàng)建商業(yè)模式。管理整個(gè)app項(xiàng)目計(jì)劃周期是一個(gè)棘手的任務(wù)，不過AppCooker通過對各個(gè)方面信息的匯集可以簡單地幫你達(dá)到專業(yè)的結(jié)果。

AppCooker工具箱中的組件包括：
Notepad
Ideas definition
Mockup editor
Icon factory
AppStore info manager
Pricing and business model tool

跟Blueprint一樣，你所有的進(jìn)程都被自動(dòng)保存，這樣你可以更多關(guān)注原型，而不用擔(dān)心系統(tǒng)是否保存了你的工作。

AppCooker為iPad和iPhone提供了一整套UI元素。真正的iOS動(dòng)態(tài)組件功能，比如map view允許你選擇你想要展示的地方，以及你喜歡使用的縮放比例。AppCooker還提供了更大的靈活性和實(shí)用性，可以呈現(xiàn)iOS 7的模糊效果，并保持像素完美的圖形。你也可以繪制方形、圓形以及其他自定義的圖形，徒手繪制項(xiàng)目，使用Dropbox或Photo庫的圖片。

總結(jié)

App原型設(shè)計(jì)的工具有很多，以上僅是筆者從網(wǎng)上整理了一些比較常用的。至于哪一款更適合你，這就要仁者見仁，智者見智了。總之，工具只是一種輔助的方法，要做一款好的APP，思想和創(chuàng)意才是關(guān)鍵！