編者注：本文作者為新浪體育產(chǎn)品經(jīng)理

首先如果你小團(tuán)隊(duì)或者個(gè)人開(kāi)發(fā)，當(dāng)然可以用Xcode，如果大公司跨部門(mén)審核調(diào)整各種，還是有個(gè)快速的原型。

吐槽一下：各種說(shuō)用Xcode的無(wú)非就是顯擺一下自己寫(xiě)代碼牛掰而已。真讓他做個(gè)8屏以上明天要的他就尿了。特別討厭知乎現(xiàn)在這些抖機(jī)靈的。有勁嗎。

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

下面這些是我按照不同的特點(diǎn)進(jìn)行了歸類(lèi)，視你的具體情況而定吧。

我在選擇軟件這個(gè)過(guò)程中糾結(jié)了很久，也是用過(guò)在領(lǐng)悟真正的原理。但是這段時(shí)間的摸索對(duì)我以后也有很大幫助。

?

輕巧型

低保真；無(wú)控件；iOS；少交互；免費(fèi)。
Pop

非?；鸬囊豢钤蛙浖谝淮螡M(mǎn)足了大家人人都是產(chǎn)品經(jīng)理的感覺(jué)。

方法：拍照–添加觸控區(qū)–轉(zhuǎn)場(chǎng)方式–選擇圖片

平臺(tái)：全手機(jī)操作

缺點(diǎn)：分享不便。動(dòng)畫(huà)有如側(cè)滑、展開(kāi)、消失，快現(xiàn)的搖一搖。操作只可以單擊。沒(méi)有控件，所有東西都靠你的照片。

Tapcase

基本和pop一樣，就是軟件本身的UI更ios7一點(diǎn)，其他都一樣，也是導(dǎo)入圖片，加熱區(qū)就好了。缺點(diǎn)也是一樣的。

總結(jié)：輕巧型的就是適合簡(jiǎn)單軟件且是早期，在手機(jī)上稍微復(fù)雜一點(diǎn)的就痛不欲生了。但問(wèn)題是，如果簡(jiǎn)單到這么輕松了，那真的還需要用軟件模擬嗎？真的在紙上畫(huà)更輕松吧。點(diǎn)擊這種交互也不需要模擬了吧。

專(zhuān)業(yè)型

高保真度；自帶控件；Mac+iOS；全交互；收費(fèi)+免費(fèi)
UIDesigner + UIDPlayer

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

方法：windows電腦安裝UIDesigner，使用現(xiàn)成控件進(jìn)行可視化搭建，調(diào)試后通過(guò)網(wǎng)盤(pán)等方式發(fā)到iOS設(shè)備，用UIDPlayer打開(kāi)即可。

平臺(tái)：只支持Win+iOS?？赡芤彩莾?yōu)點(diǎn)，僅有的專(zhuān)門(mén)支持Win平臺(tái)的原型軟件。

缺點(diǎn)：吹毛求疵吧，逼格不高。

Briefs + Briefscase

這是我最近發(fā)現(xiàn)非常好的一款軟件，好在對(duì)交互的支持上，如果調(diào)整細(xì)膩一點(diǎn)，幾乎可以以假亂真。我是用它在UI定稿的情況下，提前當(dāng)完成品測(cè)試交互體驗(yàn)的。當(dāng)然也自帶控件，用于原型設(shè)計(jì)。

還有三種模式，場(chǎng)景模式（Scene View ）和細(xì)節(jié)模式（Details View）分別負(fù)責(zé)交互設(shè)計(jì)和UI設(shè)計(jì)兩個(gè)部分，在設(shè)計(jì)完成后可以在第三個(gè)模式（Overview）查看整個(gè)APP的架構(gòu)。

方法：在場(chǎng)景模式中，添加Actors（按鈕，文本段落，文本熱點(diǎn)）和Actions（觸發(fā)動(dòng)作），可以設(shè)置界面跳轉(zhuǎn)時(shí)的TRANSITION效果，聲效，延時(shí)，Retina 空間等交互體驗(yàn)輔助特效。

然后在iOS設(shè)備上安裝Briefscase，通過(guò)Dropbox同步后使用。

缺點(diǎn)：貴。1298元，感受一下。標(biāo)注起來(lái)還是不太趁手。通過(guò)dropbox同步有點(diǎn)慢，又沒(méi)辦法加快，只能生等?？梢韵仍囉靡幌?，覺(jué)得好再入手吧。

Blueprint + viewer

我最早用的原型軟件，現(xiàn)在制作出的原型已經(jīng)出現(xiàn)在A(yíng)pp Store里拉。Sakura Day。

當(dāng)時(shí)用免費(fèi)的功能（2個(gè)項(xiàng)目，無(wú)法導(dǎo)入dropbox圖片，無(wú)自定義控件）就做出來(lái)了。后來(lái)接手公司大項(xiàng)目，專(zhuān)門(mén)買(mǎi)了完整版128元。

但是注意，這是用iPad做，iPhone或者iPad看，沒(méi)有電腦版的。我當(dāng)時(shí)就是為了地鐵上可以用，是優(yōu)點(diǎn)也是缺點(diǎn)。

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

平臺(tái)：iPad + iOS

缺點(diǎn)：最重要的就是只能在iPad上編輯，我做了個(gè)大型的項(xiàng)目，打開(kāi)還是稍慢點(diǎn)，但是穩(wěn)定，操作多了有點(diǎn)累。分享需要對(duì)方裝軟件，而且生成的項(xiàng)目文件會(huì)很大。

總結(jié)：?專(zhuān)業(yè)軟件還有很多，各有千秋，這兩個(gè)是最快支持iOS7的，說(shuō)明他們很重視產(chǎn)品保證更新。但是價(jià)格確實(shí)也是不菲，優(yōu)缺點(diǎn)很明顯，不符合國(guó)人習(xí)慣。騰訊那個(gè)整體是很不錯(cuò)了，除非你和我一樣只用mac。

HTML型

中保真度；自帶控件；全平臺(tái)；需聯(lián)網(wǎng)；少交互；收費(fèi)+免費(fèi)
Flinto

在Flinto中快速制作iOS原型

我是通過(guò)下面提到的Icon Stricker發(fā)現(xiàn)的這個(gè)網(wǎng)站，試用了一下發(fā)現(xiàn)，它的特點(diǎn)是快捷的熱區(qū)和轉(zhuǎn)場(chǎng)操作，但是完全不帶控件，也就是網(wǎng)頁(yè)版的pop。需要你自己準(zhǔn)備好圖片，不管是UI還是UE，這里只負(fù)責(zé)交互。

最大的亮點(diǎn)就是支持滾動(dòng)，前面提到的那些軟件，都需要通過(guò)轉(zhuǎn)場(chǎng)實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)，這個(gè)可以原生支持。

方法：傳圖，熱區(qū)，轉(zhuǎn)場(chǎng)?？雌饋?lái)操作很簡(jiǎn)單。

平臺(tái)：全平臺(tái)。

缺點(diǎn)：30天免費(fèi)期，按月收費(fèi)。不支持控件。需要瀏覽器支持。

Fluidui

極簡(jiǎn)風(fēng)格的Fluid UI快速原型圖工具

最受推崇的網(wǎng)頁(yè)版原型網(wǎng)站。控件從iOS到Android到WP。也是可以免費(fèi)一個(gè)項(xiàng)目少量屏幕，然后按月收費(fèi)。

方法：添加控件，熱區(qū)，轉(zhuǎn)場(chǎng)。

缺點(diǎn)：我用網(wǎng)頁(yè)版的還是感覺(jué)有點(diǎn)遲緩，不痛快。勝在控件實(shí)在很全，這個(gè)是很多桌面軟件都不支持的。如果針對(duì)安卓或者WP,實(shí)在沒(méi)什么更好的選擇了。

總結(jié)：分享方便，輕量級(jí)是最大優(yōu)點(diǎn)。但是按月付費(fèi)這個(gè)我覺(jué)得大公司不會(huì)承擔(dān)這筆費(fèi)用，小公司有沒(méi)有必要花費(fèi)在這方面都值得商榷。速度也確實(shí)有點(diǎn)問(wèn)題。交互也不如專(zhuān)業(yè)型那么靈活。

超大型

高保真度；可拓展控件；自定義庫(kù)；適配；少交互；收費(fèi)。

Axure

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

回來(lái)的原因主要有三

1.大家都在用。這個(gè)沒(méi)辦法，溝通，傳輸，修改都方便，PC+mac都可以看。你自己逼格到了，人家都感受不了有什么用呢。

2.確實(shí)強(qiáng)大，熟練使用庫(kù)和自定義控件后，效率大幅提升，遠(yuǎn)勝專(zhuān)業(yè)型。

3.生成的HTML頁(yè)面自帶左側(cè)目錄邊欄。是的，這就是我棄用OmniGraffle的主要原因。

方法：不再贅述了，總之要用好自定義控件，這個(gè)會(huì)讓效率成倍提升。

缺點(diǎn)：生成的原型在移動(dòng)端很難用。是有方法的，其實(shí)也不錯(cuò)了，但是我還是懶得費(fèi)心研究。之所以用這個(gè)就是為了給開(kāi)發(fā)和寫(xiě)文檔，很多標(biāo)注和邏輯流程，沒(méi)必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個(gè)點(diǎn)開(kāi)才能看到邏輯？

OmniGraffle

為了捍衛(wèi)mac的逼格，我用了幾天就放棄了。不可否認(rèn)，OG在調(diào)整控件時(shí)的流暢穩(wěn)健，草圖的美觀(guān)（前提是你用英文）等方面，能讓你享受整個(gè)制作過(guò)程，這是很少見(jiàn)的。但是我一直搞不懂畫(huà)布層共享層等等的關(guān)系，用起來(lái)失誤頻繁，而且，生成的html沒(méi)有目錄啊，文檔可讀性差。

方法：不再贅述。

缺點(diǎn)：除了前面所說(shuō)，僅支持mac，生成的交互原型更難用到手機(jī)上。

總結(jié)：?是的，這兩個(gè)軟件不光是用來(lái)做移動(dòng)交互原型的，他們的強(qiáng)大體現(xiàn)在非常多的領(lǐng)域，但是針對(duì)移動(dòng)交互原型而言，都不適合。A勝在文檔和大家都用，所以在個(gè)方面就屈從了吧。

?

輔助型

特定功能（動(dòng)畫(huà)；圖標(biāo)；投影）
Quartz Composer

就是專(zhuān)門(mén)用來(lái)制作交互動(dòng)畫(huà)原型的產(chǎn)品，免費(fèi)，但是需要蘋(píng)果開(kāi)發(fā)者賬號(hào)，學(xué)習(xí)曲線(xiàn)非常高，但是可以制作非常精美的強(qiáng)交互動(dòng)畫(huà)。

Facebook Paper的動(dòng)畫(huà)原型制作工具Origami及實(shí)現(xiàn)代碼Pop

Liveview

PS play等都可以快速把電腦上的內(nèi)容投影到手機(jī)上。但是唯獨(dú)liveview可以支持交互。打開(kāi)交互模式后，電腦端可以接受手機(jī)的點(diǎn)擊和滑動(dòng)手勢(shì)。非常強(qiáng)大。

Icon Stricker

專(zhuān)門(mén)用來(lái)測(cè)試icon的網(wǎng)站，出自Flinto?？焖僭谥髌敛榭磮D標(biāo)。

輕量級(jí)圖標(biāo)測(cè)試工具ICON STRIKE：快速主屏查看

總結(jié)

我現(xiàn)在對(duì)原型的流程是這樣的：

1.用Axure繪制UE圖，導(dǎo)出成手機(jī)尺寸圖片

2.導(dǎo)入Briefs或者pop，加入交互，體驗(yàn)一下

3.把UI圖轉(zhuǎn)成黑白，在A(yíng)xure里標(biāo)注，寫(xiě)文檔，生成html

4.UI定稿再導(dǎo)入briefs，高保真體驗(yàn)