App原型設計工具使用心得（上）

發表於2015-09-20

在開發的早期階段，原型設計無疑是很重要的，這也是詳查和分解應用最簡單最低成本的階段，所以你應該充分利用該階段，以避免後期改寫大量程式碼。

在設計過程中使用原型的優點：

很容易建立。如果客戶反饋引起了app結構上的或者其他大的更改，那麼原型可以降低成本時間。
便於討論。當團隊對app進行評判討論時，原型能提供可詳細討論的內容。
鼓勵良好的溝通。原型可以促進多個團隊之間展開頭腦風暴，幫助他們在演示和demo過程中釐清與app相關的概念。
幫你在早期發現設計問題。原型可讓你在早期階段發現app流程中的問題，以及其他設計問題。
對可用性測試非常有用。互動性的原型可以讓你在寫程式碼之前進行可用性測試。

幸運的是，有大量工具都可以幫你建立原型，但不幸的是需要逐一評論，這篇文章中，我特意挑選了5款工具：

BluePrint
AppCooker
FluidUI
Photoshop
Handmade Sketches

你可以在它們之間進行比較，我用每種工具為一款簡單的追蹤應用建立原型。這款應用可以讓你記錄有趣的地方，新增follower，並在followers的list中檢視興趣點。

繼續閱讀–深入檢視每個app原型工具，以及我個人對哪種情況下最適合哪款工具的一些建議。

Groosoft推出的Blueprint

Blueprint是一款售價19.99美元的iPad應用，已經針對iOS 7進行了優化，可以幫你輕而易舉地設計原型。Blueprint還有一個配套的免費內應用–Blueprint Viewer，你可以用它來檢視你的專案，或者通過iTunes File Sharing或者Dropbox Sync進行備份。Blueprint還具有自動儲存的功能，有助於你毫無顧慮地工作。

注意：如果你不想掏這20美元，你可以試試demo版本Blueprint Lite。

你也可以通過郵件傳送你的原型，或者或者直接從收件箱中用Blueprint或者Blueprint Viewer開啟原型。Blueprint支援PDF和PNG格式的輸出，這樣無需使用Blueprint，你就可以列印和分享你的原型。

如果你手頭上有多個專案，你會愛上這款簡單支援多個專案的原型工具–Blueprint。如果你需要把app從iOS 6遷移到iOS 7，Blueprint還提供了iOS 7專案轉換工具，定價9.99美元，需要通過IAP購買。

Blueprint的UI非常直觀，所有你需要的工具都觸手可及。你可以用Blueprint為iPad和iPhone app建立原型，並且它的所有原型元件都是可伸縮的，以適應不同尺寸螢幕的iPhone。

Blueprint還有一個模仿蘋果預設設計元件的外掛庫，包括按鈕、載入指示、表檢視以及地圖檢視。Blueprint還包括一些可以馬上上手使用的複合元件，比如彈出檢視或者操作表單。你可以簡單地重新定義外掛的顏色、尺寸，或者改變位置以滿足你的實際需要。

你可以通過Blueprint建立單個app檢視或者通過Actions建立一個完整的app體驗。Actions可觸發檢視間的過渡或轉場，你可以簡單地為某個外掛關聯任何手勢，或者選擇兩個檢視間轉場的型別和風格。

你可以在任何時候檢視app的流程，並通過為不同的操作連結型別設定不同的顏色。比如，我用黑色箭頭代表簡單的導航轉換，用紫色箭頭指示tab bar導航，用紅色箭頭指示返回主螢幕。在一個複雜的多檢視app中，這種組織方式非常重要。

Blueprint實際使用情況如何?

在沒有檢視任何Blueprint教程的情況下，我用20分鐘完成了示例app的原型，但是Groosoft在其網站上提供了一些很不錯的視訊教程，如果我在開始設計原型前看過，那會非常有用。

最初，我在Actions和檢視聯接上多花了一些時間和精力，但是其他任務進展的非常順利。Blueprint是非常直觀的，並且Blueprint Viewer可以輕而易舉地讓你分享專案。

點選“+”按鈕可以匯入專案，並像真實app一樣演示，並且Blueprint還提供了合適的指南讓你清楚原型的哪些部分是可以進行互動的。

你可以在Blueprint Viewer – Play觀看我的最終成果視訊。如果你想自己試試Blueprint Viewer，你可以下載 this file。上傳到Dropbox資料夾，試一試吧！

Blueprint更多資訊

Blueprint的核心app只適用於iPad裝置，售價19.99美元，另外IAP專案–iOS 6/iOS 7專案轉換工具售價9.99美元。
Blueprint Lite是一個免費的app，允許你在購買前試用Blueprint的大部分功能。
Blueprint Viewer是一款免費的app，允許你檢視使用Blueprint建立的mockup。

Hot Apps Factory推出的AppCooker

AppCooker是一個售價14.99美元的iPad應用，已經針對iOS 7進行了優化。它並不僅僅是一個原型，它還提供了一個讓你從概念捕獲靈感的工具箱，從圖示草圖和原型設計，到App Store資訊收集以及建立商業模式。管理整個app專案計劃週期是一個棘手的任務，不過AppCooker通過對各個方面資訊的彙集可以簡單地幫你達到專業的結果。

AppCooker工具箱中的元件包括：

Notepad
Ideas definition
Mockup editor
Icon factory
AppStore info manager
Pricing and business model tool

雖然AppCooker有很多個工具，但我主要關注的是Mockup editor工具。

和Blueprint Viewer一樣，AppCooker也有一個免費的版本–AppTaster，可以讓你通過email、Dropbox、Box或者iTunes File Sharing儲存和分享可演示的原型、螢幕或者整個專案。AppCooker還可以讓你簡單地建立和管理多個專案。

Mockup editor工具的首介面是一個無限的空間，你可以在此構建你的app。通過雙擊可建立多達200個單個螢幕檢視。你可以通過聯接螢幕和設定過渡觸發器以更具互動性的方式調整app流程。圖中白色的箭頭視覺化地展示了兩個螢幕之間的聯接。高階的聯接功能和過渡預覽功能相當震撼。

你可以在原型中使用幾種手勢，比如單擊雙擊以及長按。AppCooker提供了四種不同的聯接型別：Simple Link–在螢幕檢視間進行切換；Smart Back–可以讓你自動返回正確的螢幕；Swipe Area–在不同螢幕檢視之間進行切換；Timer Tag–執行定時操作。你可以簡單地預覽螢幕過渡的型別和持續時間。

AppCooker為iPad和iPhone提供了一整套UI元素。真正的iOS動態元件功能，比如map view允許你選擇你想要展示的地方，以及你喜歡使用的縮放比例。AppCooker還提供了更大的靈活性和實用性，可以呈現iOS 7的模糊效果，並保持畫素完美的圖形。你也可以繪製方形、圓形以及其他自定義的圖形，徒手繪製專案，使用Dropbox或Photo庫的圖片。

該原型工具還有一個大的icon庫–包含你標準的系統icon和200+的其他icon，還有Hot Apps Factory提供的大量字型。在將來的版本中，AppCooker還會有Subtle Patterns資料庫和了不起的背景。

AppCooker實際使用情況如何?
通過AppCooker，我用25分鐘完成了原型。AppCooker還在網站上提供了一些非常好的視訊教程。整個使用者體驗非常棒，並且我發現AppCooker比桌面設計程式更簡單易用。

跟Blueprint一樣，你所有的程式都被自動儲存，這樣你可以更多關注原型，而不用擔心繫統是否儲存了你的工作。

你可以以AppCooker、AppTaster或者PDF三種格式輸出專案。專案檔案不僅包含你的原型，也包含app的icon、App store以及定價資訊。另外，針對特定的工作區，你可以輸出PDF或者JPG格式的檔案。你還可以通過AppTaster互動式檢視原型，並留下反饋。

你可以在此here檢視我的成果視訊。如果你想試試AppTaster，可下載this file ，並把它上傳至你的Dropbox資料夾。

AppCooker優點和缺點

AppCooker更多資訊

Hot Apps Factory的AppCooker適用於iPad裝置，售價14.99美元。當然你也可以在iPhone上免費使用AppTaster，你可以在AppTaster上試玩你在AppCooker中建立的原型。

Fluid Software推出的FluidUI

Fluid UI是一款用於移動開發的Web原型設計工具，無平臺限制，支援Windows、Mac以及Linux系統。FluidUI是一項收費服務，但它提供了一項免費計劃–允許你建立一個最多包含10螢幕的專案，並且沒有更高階的功能。不過，這項免費計劃應該足以讓你清楚他們的產品是否符合你的產品需求。

Fluid UI的收費服務定價在12美元-89美元不等。更多細節，可在其產品定價頁面檢視。

Fluid UI服務最強大的功能之一–你可以建立適用於iOS、Android以及Windows Phone平臺的應用原型。非常適合跨平臺開發者。

Fluid UI的介面整潔，井然有序，不過在執行某些特定任務（比如建立包括兩個分段的分段控制元件）時會讓人覺得有點笨手笨腳。即便如此，Fluid UI的整體體驗是非常不錯的。Fluid UI包含超過2000個的iOS、Android以及Windows 8外掛（針對手機和平板電腦）。

你可以選擇低保真的線框圖來加快開發，也可以選擇高保真的元件來模模擬實的作業系統。你可以在整個庫中搜尋你想要的UI元素,如果2000個仍不能滿足你的要求，那你可以上傳自己的圖片。

像我前邊提到的那幾款工具，使用Fluid UI建立互動性原型非常簡單。你可以簡單縮放工作區和需要連線的螢幕。不過，FluidUI沒有AppCooker Smart Back links簡單和高階的功能。克隆螢幕以及其他便捷操作（比如註釋、對齊）都非常容易，會讓你節省大量時間。

使用整合到工作區的Fluid player可以讓你隨時演示螢幕流。Fluid Player模擬了你的原型如何在移動裝置上執行，雖然你可以在真機上演示你的原型。

如果你還想要試試這個很酷的特性，可以掃描下方的二維碼，並跟隨說明或者簡單地跟隨FluidUI提供的連結。

Fluid UI實際使用情況如何？

用Fluid UI做原型花了25分鐘。雖然Fluid UI沒有輔助性的app（譯者注：比如AppCooker和AppTaster），但你可以通過郵件分享你的原型連結，並且收件人無需安裝任何額外軟體就能看到你的最終成果。

付費FluidUI使用者可以以PNG螢幕、互動式的HTML原型以及PNG螢幕流圖表輸出專案，甚至可以列印出來。FluidUI還有一個免費計劃，通過這個簡單的免費計劃，你可以在Twitter或者 Facebook上分享你的專案。最後，Fluid UI允許你在賬戶之間移動專案。

Fluid UI優點和缺點

Fluid UI更多資訊

Fluid Software的Fluid UI是跨平臺開發者一個很好的選擇，而且使用Fluid Player預覽原型非常簡單。

檢視Fluid UI–Demo來理解FluidUI更多可能性。

Adobe推出的Photoshop

Photoshop是Windows和Mac上一款知名的桌面應用，它不是最簡單的mockup and prototyping工具，但它是迄今為止最全面的設計軟體包。雖然Photoshop售價不低，但對於一個設計師來說是物有所值的。

你可以以19.99美元的價格購買Photoshop Creative Cloud，或者你可以以49.99美元的價格購買整個Creative Cloud package。如果你想了解更多詳細資訊，可在此檢視整個Adobe產品列表。

Photoshop有一個陡峭的學習曲線，但是一旦你學會了基本的技能，以後你會有一個靈活性的優秀的原型設計工具。當設計工作流程（包括佈局、指南、圖形以及其他等等）時，Photoshop大部分基礎的功能可以給你提供很好的幫助。

為了加快你的iOS圖形設計工作流程，Photoshop也有很多不錯的外掛，比如DevRocket，它相容Photoshop CS5及以上版本的，這樣你就沒必要額外多付19美元了。

該外掛始終保持更新，並且內建的工具可以讓的工作流程更高效：

1.即時可見的檢視模板：DevRocket可為所有iOS裝置（iPad/iPhone）生成橫向和縱向的檢視模板，並智慧展示模板。
2.智慧icon工作流程：DevRocket可以使用單張icon設計生成各種尺寸的icon。
3.原生外觀預覽：在更原生化的環境中預覽你的原型設計。
4.輸出兩種解析度的UI元素：標準UI設計版本和retina設計版本。

你有兩個方法在設計中使用UI元素：

1.線上搜尋可以滿足你需求的免費或者付費PSD檔案；你可能會找到一個涵蓋iOS 7UI元件的庫。
2.你可以通過DevRocket到Refill Store下載免費或者付費的UI元素。

注意：Photoshop會以自己的格式儲存專案檔案。

由於標準的UI元素永遠都不夠，我在Teehan+lax free iOS templates網站上找了很多非常棒的元件模板。

實際使用情況怎麼樣？

結合使用Photoshop, DevRocket以及PSD素材，我用了40分鐘完成一個mockup設計。相比較其他幾種工具，使用Photoshop花費的時間略微有點長，尤其是當你還不熟悉PS的時候。不過PS設計的彈性靈活性值得你投入這些時間。

一旦你建立好所有的螢幕檢視，你可以把他們新增至共同的工作區，如果你想把這些螢幕檢視連線起來的話。

有越來越多的第三方工具以神奇的方式擴充套件了Photoshop的相容性。Bjango推出的Skala Preview可以讓你和客戶分享你的Photoshop mockups，並且Skala Preview還有桌面版本，iOS和Android版本。你可以在Bjango網站上檢視所有工具。

通過Skala Preview分享專案只需簡單幾步：

1.Download桌面版Skala Preview。
2.在Photoshop中建立一個遠端連線。Edit > Remote Connections…,然後提供一個service name和password，確定勾選了Remote Connections。
3.和下載了Skala View移動app的客戶分享你的service name和password。
4.開啟Skala View app，確定你已經同時執行了Skala Preview和Photoshop，確保執行Skala Preview的Mac和iOS裝置使用了同一個wifi網路。
5.預覽你的設計。

注意：為了實時預覽你在Photoshop中編輯的文件，需要在Skala Preview輸入Photoshop Remote Connection和密碼，設定可在Settings\Photoshop Settings中完成。

Skala Preview可以把原型畫素完美的圖片傳送給任何iOS或者Android裝置。你甚至可以進行色盲測試。

Photoshop更多資訊

如果你需要一款靈活的強大的原型工具，Adobe Photoshop是一個非常不錯的選擇：
1.UI Parade推出的DevRocket是一個非常棒的可幫你加快工作流程的外掛。
2.Teehan+lax上的PSD素材在提供了大量原型UI元件外，還可以幫你節省大量時間。
3.你可以從Mobile Tuxedo獲得一些免費的手勢圖示，在原型中概念性地代表手勢。
4.如果你需要分享自己的原型，可使用Mac上的Skala Preview，可使用iOS裝置上的Skala View。

Handmade Sketches–by You!

最後介紹的是手工草圖，這仍然是一個進行原型設計的可靠的真實的方法。很多應用程式就開始於紙上的草圖。

不少公司都為開發者提供了手工草圖繪製工具，我們來看下UIStencils網站上提供的：

雖然這些工具看起來非常簡單，但不要低估他們在繪製手工草圖方面的自由行和靈活性。

Handmade Sketches實際使用情況怎麼樣?

我花10分鐘完成了原型，使用了我們內部現成的模板，提供了資訊的位置，比如日期和mockup id，如果你需要對工作進行分類，那麼這一點非常有用。

Interface Sketch Templates提供了大量令人驚訝的模板，為你開始原型設計提供了堅實的基礎。也為你的原型草圖提供了專業的外觀。另外，Interface Sketch Templates還提供了iPhone和iPad草圖模板，也為Android、web app以及WP 8提供了草圖模板。

你可以看看我做的原型：