在開發(fā)的早期階段，原型設(shè)計無疑是很重要的，這也是詳查和分解應(yīng)用最簡單最低成本的階段，所以你應(yīng)該充分利用該階段，以避免后期改寫大量代碼。
在設(shè)計過程中使用原型的優(yōu)點：
很容易創(chuàng)建。如果客戶反饋引起了app結(jié)構(gòu)上的或者其他大的更改，那么原型可以降低成本時間。
便于討論。當團隊對app進行評判討論時，原型能提供可詳細討論的內(nèi)容。
鼓勵良好的溝通。原型可以促進多個團隊之間展開頭腦風暴，幫助他們在演示和demo過程中厘清與app相關(guān)的概念。
幫你在早期發(fā)現(xiàn)設(shè)計問題。原型可讓你在早期階段發(fā)現(xiàn)app流程中的問題，以及其他設(shè)計問題。
對可用性測試非常有用。交互性的原型可以讓你在寫代碼之前進行可用性測試。
幸運的是，有大量工具都可以幫你創(chuàng)建原型，但不幸的是需要逐一評論，這篇文章中，我特意挑選了5款工具：
BluePrint
AppCooker
FluidUI
Photoshop
Handmade Sketches
你可以在它們之間進行比較，我用每種工具為一款簡單的追蹤應(yīng)用創(chuàng)建原型。這款應(yīng)用可以讓你記錄有趣的地方，添加follower，并在followers的list中查看興趣點。
繼續(xù)閱讀--深入查看每個app原型工具，以及我個人對哪種情況下最適合哪款工具的一些建議。
Groosoft推出的Blueprint
Blueprint是一款售價19.99美元的iPad應(yīng)用，已經(jīng)針對iOS 7進行了優(yōu)化，可以幫你輕而易舉地設(shè)計原型。Blueprint還有一個配套的免費內(nèi)應(yīng)用--Blueprint Viewer，你可以用它來查看你的項目，或者通過iTunes File Sharing或者Dropbox Sync進行備份。Blueprint還具有自動保存的功能，有助于你毫無顧慮地工作。
注意：如果你不想掏這20美元，你可以試試demo版本Blueprint Lite。
你也可以通過郵件發(fā)送你的原型，或者或者直接從收件箱中用Blueprint或者Blueprint Viewer打開原型。Blueprint支持PDF和PNG格式的輸出，這樣無需使用Blueprint，你就可以打印和分享你的原型。
如果你手頭上有多個項目，你會愛上這款簡單支持多個項目的原型工具--Blueprint。如果你需要把app從iOS 6遷移到iOS 7，Blueprint還提供了iOS 7項目轉(zhuǎn)換工具，定價9.99美元，需要通過IAP購買。
Blueprint的UI非常直觀，所有你需要的工具都觸手可及。你可以用Blueprint為iPad和iPhone app創(chuàng)建原型，并且它的所有原型組件都是可伸縮的，以適應(yīng)不同尺寸屏幕的iPhone。
Blueprint還有一個模仿蘋果默認設(shè)計組件的插件庫，包括按鈕、加載指示、表視圖以及地圖視圖。Blueprint還包括一些可以馬上上手使用的復(fù)合組件，比如彈出視圖或者操作表單。你可以簡單地重新定義插件的顏色、尺寸，或者改變位置以滿足你的實際需要。
你可以通過Blueprint創(chuàng)建單個app視圖或者通過Actions創(chuàng)建一個完整的app體驗。Actions可觸發(fā)視圖間的過渡或轉(zhuǎn)場，你可以簡單地為某個插件關(guān)聯(lián)任何手勢，或者選擇兩個視圖間轉(zhuǎn)場的類型和風格。
你可以在任何時候查看app的流程，并通過為不同的操作鏈接類型設(shè)置不同的顏色。比如，我用黑色箭頭代表簡單的導航轉(zhuǎn)換，用紫色箭頭指示tab bar導航，用紅色箭頭指示返回主屏幕。在一個復(fù)雜的多視圖app中，這種組織方式非常重要。
Blueprint實際使用情況如何?
在沒有查看任何Blueprint教程的情況下，我用20分鐘完成了示例app的原型，但是
Groosoft在其網(wǎng)站上提供了一些很不錯的視頻教程，如果我在開始設(shè)計原型前看過，那會非常有用。
最初，我在Actions和視圖聯(lián)接上多花了一些時間和精力，但是其他任務(wù)進展的非常順利。Blueprint是非常直觀的，并且Blueprint Viewer可以輕而易舉地讓你分享項目。
點擊“+”按鈕可以導入項目，并像真實app一樣演示，并且Blueprint還提供了合適的指南讓你清楚原型的哪些部分是可以進行交互的。
Blueprint更多信息
Blueprint的核心app只適用于iPad設(shè)備，售價19.99美元，另外IAP項目--iOS 6/iOS 7項目轉(zhuǎn)換工具售價9.99美元。
Hot Apps Factory推出的AppCooker
AppCooker是一個售價14.99美元的iPad應(yīng)用，已經(jīng)針對iOS 7進行了優(yōu)化。它并不僅僅是一個原型，它還提供了一個讓你從概念捕獲靈感的工具箱，從圖標草圖和原型設(shè)計，到App Store信息收集以及創(chuàng)建商業(yè)模式。管理整個app項目計劃周期是一個棘手的任務(wù)，不過AppCooker通過對各個方面信息的匯集可以簡單地幫你達到專業(yè)的結(jié)果。
AppCooker工具箱中的組件包括：
Notepad
Ideas definition
Mockup editor
Icon factory
AppStore info manager
Pricing and business model tool
雖然AppCooker有很多個工具，但我主要關(guān)注的是Mockup editor工具。
和Blueprint Viewer一樣，AppCooker也有一個免費的版本--AppTaster，可以讓你通過email、Dropbox、Box或者iTunes File Sharing保存和分享可演示的原型、屏幕或者整個項目。AppCooker還可以讓你簡單地創(chuàng)建和管理多個項目。
Mockup editor工具的首界面是一個無限的空間，你可以在此構(gòu)建你的app。通過雙擊可創(chuàng)建多達200個單個屏幕視圖。你可以通過聯(lián)接屏幕和設(shè)置過渡觸發(fā)器以更具交互性的方式調(diào)整app流程。圖中白色的箭頭可視化地展示了兩個屏幕之間的聯(lián)接。高級的聯(lián)接功能和過渡預(yù)覽功能相當震撼。
你可以在原型中使用幾種手勢，比如單擊雙擊以及長按。AppCooker提供了四種不同的聯(lián)接類型：Simple Link--在屏幕視圖間進行切換；Smart Back--可以讓你自動返回正確的屏幕；Swipe Area--在不同屏幕視圖之間進行切換；Timer Tag--執(zhí)行定時操作。你可以簡單地預(yù)覽屏幕過渡的類型和持續(xù)時間。
AppCooker為iPad和iPhone提供了一整套UI元素。真正的iOS動態(tài)組件功能，比如map view允許你選擇你想要展示的地方，以及你喜歡使用的縮放比例。AppCooker還提供了更大的靈活性和實用性，可以呈現(xiàn)iOS 7的模糊效果，并保持像素完美的圖形。你也可以繪制方形、圓形以及其他自定義的圖形，徒手繪制項目，使用Dropbox或Photo庫的圖片。
該原型工具還有一個大的icon庫--包含你標準的系統(tǒng)icon和200+的其他icon，還有Hot Apps Factory提供的大量字體。在將來的版本中，AppCooker還會有Subtle Patterns資料庫和了不起的背景。
AppCooker實際使用情況如何?
跟Blueprint一樣，你所有的進程都被自動保存，這樣你可以更多關(guān)注原型，而不用擔心系統(tǒng)是否保存了你的工作。
你可以以AppCooker、AppTaster或者PDF三種格式輸出項目。項目文件不僅包含你的原型，也包含app的icon、App store以及定價信息。另外，針對特定的工作區(qū)，你可以輸出PDF或者JPG格式的文件。你還可以通過AppTaster交互式查看原型，并留下反饋。
你可以在此
here查看我的成果視頻。如果你想試試AppTaster，可下載this file ，并把它上傳至你的Dropbox文件夾。AppCooker優(yōu)點和缺點
AppCooker更多信息
Hot Apps Factory的
AppCooker適用于iPad設(shè)備，售價14.99美元。當然你也可以在iPhone上免費使用
AppTaster，你可以在AppTaster上試玩你在AppCooker中創(chuàng)建的原型。
Fluid Software推出的FluidUI
Fluid UI是一款用于移動開發(fā)的Web原型設(shè)計工具，無平臺限制，支持Windows、Mac以及Linux系統(tǒng)。FluidUI是一項收費服務(wù)，但它提供了一項免費計劃--允許你創(chuàng)建一個最多包含10屏幕的項目，并且沒有更高級的功能。不過，這項免費計劃應(yīng)該足以讓你清楚他們的產(chǎn)品是否符合你的產(chǎn)品需求。
Fluid UI的收費服務(wù)定價在12美元-89美元不等。更多細節(jié)，可在其產(chǎn)品定價頁面查看。
Fluid UI服務(wù)最強大的功能之一--你可以創(chuàng)建適用于iOS、Android以及Windows Phone平臺的應(yīng)用原型。非常適合跨平臺開發(fā)者。
Fluid UI的界面整潔，井然有序，不過在執(zhí)行某些特定任務(wù)（比如創(chuàng)建包括兩個分段的分段控件）時會讓人覺得有點笨手笨腳。即便如此，F(xiàn)luid UI的整體體驗是非常不錯的。Fluid UI包含超過2000個的iOS、Android以及Windows 8插件（針對手機和平板電腦）。
你可以選擇低保真的線框圖來加快開發(fā)，也可以選擇高保真的組件來模仿真實的操作系統(tǒng)。你可以在整個庫中搜索你想要的UI元素,如果2000個仍不能滿足你的要求，那你可以上傳自己的圖片。
像我前邊提到的那幾款工具，使用Fluid UI創(chuàng)建交互性原型非常簡單。你可以簡單縮放工作區(qū)和需要連接的屏幕。不過，F(xiàn)luidUI沒有AppCooker Smart Back links簡單和高級的功能?？寺∑聊灰约捌渌憬莶僮鳎ū热缱⑨?、對齊）都非常容易，會讓你節(jié)省大量時間。
使用集成到工作區(qū)的Fluid player可以讓你隨時演示屏幕流。Fluid Player模擬了你的原型如何在移動設(shè)備上運行，雖然你可以在真機上演示你的原型。
如果你還想要試試這個很酷的特性，可以掃描下方的二維碼，并跟隨說明或者簡單地跟隨FluidUI提供的鏈接。
Fluid UI實際使用情況如何？
用Fluid UI做原型花了25分鐘。雖然Fluid UI沒有輔助性的app（譯者注：比如AppCooker和AppTaster），但你可以通過郵件分享你的原型鏈接，并且收件人無需安裝任何額外軟件就能看到你的最終成果。
付費FluidUI用戶可以以PNG屏幕、交互式的HTML原型以及PNG屏幕流圖表輸出項目，甚至可以打印出來。FluidUI還有一個免費計劃，通過這個簡單的免費計劃，你可以在Twitter或者 Facebook上分享你的項目。最后，F(xiàn)luid UI允許你在賬戶之間移動項目。
Fluid UI優(yōu)點和缺點
Fluid UI更多信息
Fluid Software的Fluid UI是跨平臺開發(fā)者一個很好的選擇，而且使用Fluid Player預(yù)覽原型非常簡單。
Adobe推出的Photoshop
Photoshop是Windows和Mac上一款知名的桌面應(yīng)用，它不是最簡單的mockup and prototyping工具，但它是迄今為止最全面的設(shè)計軟件包。雖然Photoshop售價不低，但對于一個設(shè)計師來說是物有所值的。
你可以以19.99美元的價格購買Photoshop Creative Cloud，或者你可以以49.99美元的價格購買整個Creative Cloud package。如果你想了解更多詳細信息，可在此
查看整個Adobe產(chǎn)品列表。
Photoshop有一個陡峭的學習曲線，但是一旦你學會了基本的技能，以后你會有一個靈活性的優(yōu)秀的原型設(shè)計工具。當設(shè)計工作流程（包括布局、指南、圖形以及其他等等）時，Photoshop大部分基礎(chǔ)的功能可以給你提供很好的幫助。
為了加快你的iOS圖形設(shè)計工作流程，Photoshop也有很多不錯的插件，比如
DevRocket，它兼容Photoshop CS5及以上版本的，這樣你就沒必要額外多付19美元了。
該插件始終保持更新，并且內(nèi)置的工具可以讓的工作流程更高效：
1.即時可見的視圖模板：DevRocket可為所有iOS設(shè)備（iPad/iPhone）生成橫向和縱向的視圖模板，并智能展示模板。
2.智能icon工作流程：DevRocket可以使用單張icon設(shè)計生成各種尺寸的icon。
3.原生外觀預(yù)覽：在更原生化的環(huán)境中預(yù)覽你的原型設(shè)計。
4.輸出兩種分辨率的UI元素：標準UI設(shè)計版本和retina設(shè)計版本。
你有兩個方法在設(shè)計中使用UI元素：
1.在線搜索可以滿足你需求的免費或者付費PSD文件；你可能會找到一個涵蓋iOS 7UI組件的庫。
2.你可以通過DevRocket到Refill Store下載免費或者付費的UI元素。
注意：Photoshop會以自己的格式保存項目文件。
實際使用情況怎么樣？
結(jié)合使用Photoshop, DevRocket以及PSD素材，我用了40分鐘完成一個mockup設(shè)計。相比較其他幾種工具，使用Photoshop花費的時間略微有點長，尤其是當你還不熟悉PS的時候。不過PS設(shè)計的彈性靈活性值得你投入這些時間。
一旦你創(chuàng)建好所有的屏幕視圖，你可以把他們添加至共同的工作區(qū)，如果你想把這些屏幕視圖連接起來的話。
有越來越多的第三方工具以神奇的方式擴展了Photoshop的兼容性。Bjango推出的Skala Preview可以讓你和客戶分享你的Photoshop mockups，并且
通過Skala Preview分享項目只需簡單幾步：
2.在Photoshop中創(chuàng)建一個遠程連接。Edit > Remote Connections…,然后提供一個service name和password，確定勾選了Remote Connections。
4.打開Skala View app，確定你已經(jīng)同時運行了Skala Preview和Photoshop，確保運行Skala Preview的Mac和iOS設(shè)備使用了同一個wifi網(wǎng)絡(luò)。
5.預(yù)覽你的設(shè)計。
注意：為了實時預(yù)覽你在Photoshop中編輯的文檔，需要在Skala Preview輸入Photoshop Remote Connection和密碼，設(shè)置可在Settings\Photoshop Settings中完成。
Skala Preview可以把原型像素完美的圖片發(fā)送給任何iOS或者Android設(shè)備。你甚至可以進行色盲測試。
Photoshop更多信息
3.你可以從Mobile Tuxedo獲得一些免費的
手勢圖標，在原型中概念性地代表手勢。
Handmade Sketches--by You!
最后介紹的是手工草圖，這仍然是一個進行原型設(shè)計的可靠的真實的方法。很多應(yīng)用程序就開始于紙上的草圖。
雖然這些工具看起來非常簡單，但不要低估他們在繪制手工草圖方面的自由行和靈活性。
Handmade Sketches實際使用情況怎么樣?
我花10分鐘完成了原型，使用了我們內(nèi)部現(xiàn)成的模板，提供了信息的位置，比如日期和mockup id，如果你需要對工作進行分類，那么這一點非常有用。
Interface Sketch Templates提供了大量令人驚訝的模板，為你開始原型設(shè)計提供了堅實的基礎(chǔ)。也為你的原型草圖提供了專業(yè)的外觀。另外，Interface Sketch Templates還提供了iPhone和iPad草圖模板，也為Android、web app以及WP 8提供了草圖模板。
你可以看看我做的原型：
我特意用熒光筆標出了視覺上的抽象信息，比如手勢、操作以及選擇元素。對我來說，這不僅簡單靈活地描出信息，也讓應(yīng)用的流程一清二楚。
分享手工原型更為簡單：使用iPhone拍張照片，然后上傳至Dropbox，或者通過郵件分享。
但手工設(shè)計原型有優(yōu)點也有缺點，有些缺點并沒有在下面的圖表中列出，比如它沒有內(nèi)置的方法來保存原型草圖，沒有簡單的方法在草圖間復(fù)制/粘貼元素。
原型工具對照表
上邊是我盡自己所能給出關(guān)于原型設(shè)計工具的信息，而下表則是各種原型工具需要提供的：
那么結(jié)論是什么？
在我看來，AppCooker性價比最高，它提供了高級功能，較為直觀并且可用性很高。而AppTaster作為一個非常有用和免費的viewer，很好地完善了AppCooker。
Blueprint使用起來非常簡單，Blueprint Viewer對項目的可移植性處理的很好，它最大的特性是直觀性和即時性。
FluidUI的顯著特點是跨平臺兼容性，更具有靈活性，還有一個豐富的部件庫。使用FluidUI創(chuàng)建原型非常簡單和快捷。
如果你有時間學習使用新工具，那么Photoshop則提供了一個功能多樣的環(huán)境。容易可用的插件和PSD模板可以讓你的原型設(shè)計工作非常有趣。
最后是快速、便宜、易用的手工草圖。它們拋卻了炫目花哨的圖形來展示app的核心功能，可以獲得大量的反饋。
不過，要選擇最適合你的方法。
如果你有任何問題或者評論，可加入論壇自由討論。
推薦閱讀：
