帶交互的 iOS 產品原型可以用什麼軟體製作？
首先如果你小團隊或者個人開發，當然可以用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,實在沒什麼更好的選擇了。
**總結：**分享方便，輕量級是最大優點。但是按月付費這個我覺得大公司不會承擔這筆費用，小公司有沒有必要花費在這方面都值得商榷。速度也確實有點問題。交互也不如專業型那麼靈活。
超大型高保真度；可拓展控制項；自定義庫；適配；少交互；收費。繞不開的巨人，就像圖片界的PS，文字界的Word。它最大的特點就是別人都用它（雖然大多是盜版），我之前也存了顯出不同逼格的心試了前面那麼多軟體，最後繞了一大圈還是回到了它的懷抱。
回來的原因主要有三
- 大家都在用。這個沒辦法，溝通，傳輸，修改都方便，PC+mac都可以看。你自己逼格到了，人家都感受不了有什麼用呢。
- 確實強大，熟練使用庫和自定義控制項後，效率大幅提升，遠勝專業型。
- 生成的HTML頁面自帶左側目錄邊欄。是的，這就是我棄用OmniGraffle的主要原因。
方法：不再贅述了，總之要用好自定義控制項，這個會讓效率成倍提升。
缺點：生成的原型在移動端很難用。是有方法的，其實也不錯了，但是我還是懶得費心研究。之所以用這個就是為了給開發和寫文檔，很多標註和邏輯流程，沒必要做出交互。所以不考慮用它做交互，你真都做成交互了，難道還要工程師挨個點開才能看到邏輯？
OmniGraffle為了捍衛mac的逼格，我用了幾天就放棄了。不可否認，OG在調整控制項時的流暢穩健，草圖的美觀（前提是你用英文）等方面，能讓你享受整個製作過程，這是很少見的。但是我一直搞不懂畫布層共享層等等的關係，用起來失誤頻繁，而且，生成的html沒有目錄啊，文檔可讀性差。
方法：不再贅述。
缺點：除了前面所說，僅支持mac，生成的交互原型更難用到手機上。
總結： 是的，這兩個軟體不光是用來做移動交互原型的，他們的強大體現在非常多的領域，但是針對移動交互原型而言，都不適合。A勝在文檔和大家都用，所以在個方面就屈從了吧。
輔助型特定功能（動畫；圖標；投影）Quartz Composer就是專門用來製作交互動畫原型的產品，免費，但是需要蘋果開發者賬號，學習曲線非常高，但是可以製作非常精美的強交互動畫。
Facebook Paper的動畫原型製作工具Origami及實現代碼Pop
LiveviewPS play等都可以快速把電腦上的內容投影到手機上。但是唯獨liveview可以支持交互。打開交互模式後，電腦端可以接受手機的點擊和滑動手勢。非常強大。
Icon Stricker專門用來測試icon的網站，出自Flinto。快速在主屏查看圖標。
輕量級圖標測試工具ICON STRIKE：快速主屏查看
總結我現在對原型的流程是這樣的：
- 用Axure繪製UE圖，導出成手機尺寸圖片
- 導入Briefs或者pop，加入交互，體驗一下
- 把UI圖轉成黑白，在Axure里標註，寫文檔，生成html
- UI定稿再導入briefs，高保真體驗
之前研究過一些原型工具，粗略做了個分類：一類是在原型軟體上完成原型製作和交互製作的全部過程，例如 Axure, OmniGraffle 等常見的工具，另外一類不提供原型設計的控制項，只支持把做好的設計圖導入進去，然後在圖片上選擇熱點區域，製作頁面之間跳轉的交互，把一張張設計圖連接起來，讓它看起來更像一個真實的產品，模擬產品上線之後的真實效果，例如 Briefs, Flinto, Marvel, Pop 等。
第一類大家很熟悉，略過不說。重點說下第二類的工具。
1. Flinto
先上我做的原型：Flinto – Skateboarding製作過程就是新建原型——導入設計圖（支持本地圖片和 Dropbox 導入）——添加交互——預覽、分享。
交互部分完成之後，就可以分享給團隊成員了，支持簡訊或者郵件分享，也可以把原型的鏈接發給對方即可。
對方收到之後，不只可以在 Web 端預覽，還可以用 iPhone 的 Safari 打開，然後添加到主屏，然後就可以點擊屏幕上的圖標打開應用預覽了，像一個真的 APP ！非常適合團隊內部分享。
大家可以在手機上點上面的原型鏈接試一試，Flinto 只支持 iPhone 手機預覽，Android 手機訪問網址時會提示你用 iPhone 訪問 
2. Marvel (https://marvelapp.com/)
同樣先上原型：https://marvelapp.com/fij21原型製作流程與 Flinto 一樣，除了圖片導入部分，Marvel 只支持從 Dropbox 選圖片，不支持上傳本地圖片。
Marvel 同樣支持用 iPhone 的 Safari 打開，然後添加到主屏的辦法預覽。另外，Marvel支持 Android 手機預覽, 這一點上優於 Flinto 。
另外 Marvel 有一款手機 APP （Marvel - Turn Sketches Into Prototypes on the App Store on iTunes），提供把紙面原型轉換為可交互原型的功能，類似於 POP （https://popapp.in）。
之前寫過一篇介紹在線原型設計工具的博客，裡面也包括了 Marvel ，有興趣可以看下：http://nicing.net/post/83893079236 。
3. Briefs (http://giveabrief.com)
@李志超 的答案中已經介紹得差不多了，Briefs 可以用提供的資源庫畫出原型，也可以導入做好的設計圖，然後添加交互。用下來的感覺也是不太順手，有些繁瑣，在手機上預覽的時候還要安裝手機應用，不像前面兩個工具可以直接用手機瀏覽器訪問原型。不過 Briefs 有兩個獨特功能，可以導出 PDF 格式的交互說明圖，另外還可以導出切圖（更適合用 Briefs 資源庫畫的原型）。下面是導出的交互說明圖。
===========
總結一下，用什麼工具還是要看你們想把產品原型中的交互做到什麼程度，是像做出擁有簡單點擊、滑動以及各種轉場動畫的交互，讓原型可以像實際的產品一樣進行操作；還是想做一些有炫酷交互細節的產品，例如 CAPPTIVATE.co 和 http://blog.brianlovin.com/ 裡面介紹的這種。前一種的話用上面說的幾個工具就行，如果是後一種的話，可能就要 QC 和 Xcode 了。對於這兩款工具我也不專業，不過有些資源可以分享下：- Quartz Composer 如何入門？
- http://dancounsell.com/articles/prototyping-with-facebooks-origami
- http://blog.mengto.com/prototype-xcode-storyboard/
- Learning Xcode 5 As a Designer
我是MockingBot的開發者，在開發這款工具時，我的首要目標就是保持它儘可能的簡潔輕量，同時確保整個工作流程儘可能的順滑，我們的工具專註於移動應用的交互原型設計，為了避免過早的考慮設計因素而分神，所以我們只提供了樸素的線框圖界面，讓用戶可以專註於應用交互本身。
如果大家喜歡這個應用，歡迎幫我們在Quora上隨手給MockingBot投一票：http://www.quora.com/Prototyping/What-are-the-best-rapid-prototyping-tools-for-iOS-apps先謝了親身實踐 @李志超 的答案後，針對個人設計師的情況給出一些看法。
1、嘗試學習了幾天QC，發現其最大的問題是性價比不高。QC的學習曲線相當陡峭，初期你會發現，即使是實現一個極其簡單的動效，比如一個 chart View 的 Momentum Scrolling 的複雜度就能讓你當場嚇成狗。而且雖然號稱QC不需要編程，但是實際上因為QC使用的是面向對象編程的邏輯，加上其中最強大的patch之一其實就是javascript patch，如果你想真正實現精美的動效，這依然是道不得不邁過的坎，而如果你說老子就想跳轉而已才不稀罕這些動效呢，那……你學QC幹嘛。
學習QC 的重點在於堅持爬過初期的壁壘、徹底適應軟體 flow式的工作邏輯，熟練掌握大量patch並形成自己常用的工作模塊，這樣才能真正體會到QC的好。而這也僅僅是給你帶來了一個可以在mac上用滑鼠交互的原型，一不能轉化為Xcode代碼，二（暫時）不能導成HTML 5之類的文件給別人分享。總得來說，這就是裝逼的代價。
2、對於IOS的交互設計來說，如果你遵( gan )紀( yu )守( ping )法( yong )，嚴格遵循IOS人機交互規範，不追求華麗動效，那Xcode的storyboard可能是更好的選擇。速度快，易上手，理想遠大一點還可以順手入門一下objective - C，進可攻退可守。
3、以上都是說的高保真，線框圖甚至低保真的話，我還是那個觀點：紙和筆是最好的工具。結合自己這幾天的摸索實踐，找到了一套高效實現iPhone快速演示簡單交互原型的方法，注意，是高效、快速的解決方案，非常適合在項目中期直接與團隊交流時使用。
原型製作Axure +原型演示Prototyping on Paper +文件傳輸 QQ
詳細流程：
1.打開已經做好的原型，複製；Web上的原型設計無論是Axure、OmniGraffle還是Wireframe都無所謂，找到自己最順手的即可，用PPT、Keynote都是一個道理. 這裡的建議是，盡量按照iPhone的標準尺寸比例設計原型，否則在最後一步，還需要剪切原型的圖片。
回答：appcooker
原因：
1.iPad上用的，可製作3.5"/4.0"/iPad應用原型，加上一隻稍微好點兒的觸控筆，分分鐘製作一個原型；2.可導出屏幕地圖，清晰展示各個頁面之間的跳轉關係；3.應用本身98RMB，但相應的播放軟體apptaster則免費，也就是說，你可以使用appcooker去製作原型，然後team成員可以使用免費的apptaster去播放你的原型，這樣成員交流起來效率更高；4.可連接DropBox、box、iTunes，共享你製作的原型，或者享用這些服務中存儲的各式各樣的圖標（http://easyicon.net）；5.發布原型時可填寫反饋郵件，這樣你可以將原型發送給幾個好友，讓他們進行測試，然後他們可以直接向你撰寫反饋郵件；6.製作原型階段，可以直接拖用自帶的各種ios控制項和DropBox中的圖標快速拖出一個原型，等到demo效果出來後，可以直接把demo圖放進去，然後加上各種交互，這樣可以在第一時間評析demo的真實運行效果；7.暫時沒想到....其實還很多....放上地址：Mockup, Wireframe or Prototype iPhone and iPad Apps with AppCooker
【我覺得axure雖然很強大，但實在太不輕巧了，很多時候我有一些想法都會隨手拿出iPad用appcooker快速變現他們，這點axure無法滿足】兩張圖
可以使用Xcode自帶的Storyboard功能，具體可以參考這個教程 https://medium.com/design-ux/62b643a3a0f7
我推薦OmniGraffle，原因很簡單。很多時候交互不需要那麼多複雜的動畫和動作，都可以用文字描述，不應該花時間在原型上。
OG可以生成UI級原型圖，可以方便視覺設計師對細節的參考。我覺得很需要UI細節非常更難用文字描述，所以用OG很好表達。快速用Flinto，精緻用Axure
axure可以做啊
Mockplus
這是一款基於桌面的用戶體驗工具， 可快速實現移動、Web及桌面應用原型設計 。憑藉著出色的易用性，用戶無需憑藉編程知識即可快速上手。Mockplus擁有良好的所見即所得功能， 例如大家熟悉的彈出菜單交互，3步即可實現：拖一個彈出菜單組件和一個按鈕到畫布，之後拖拽按鈕的鏈接點到彈出菜單，然後運行演示。 總而言之，Mockplus是一款價格便宜且能夠快速建立交互原型的出色工具。 此外，該產品還有個姊妹產品，Chainco，可專門導入UI視覺圖交互演示，簡單好用，可以試試。
不要浪費時間探索和BB了，把那些時間花在Axure上就自然會成精啦
推薦閱讀：
※為什麼 iOS 中加粗字體需要重啟(Respring)，而改變字型大小卻不用？
※iOS 和 Android 到底哪個優秀？哪個更有前景？理由是什麼？
※iOS開發，視頻播放，項目不支持橫屏，如何監測手機是否橫屏？並旋轉視頻播放器view？
※如何在 Windows 下進行 iOS 開發？
※iOS開發 APP必須使用HTTPS怎麼搞？
TAG:iOS開發 |