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

此前，我們在《App原型設計工具使用心得（上）》中介紹了BluePrint、AppCooker、FluidUI、Photoshop以及Handmade Sketches，這篇文章中我們將再從自身經驗說說另外三款原型設計工具：Briefs、OmniGraffle以及Balsamiq Mockups很特別的一點是這些工具可以被用來做所有類型的原型，甚至是桌面應用和網站。我會在文章中對每個原型工具進行評論，並基於我的經驗為你推薦合適的原型工具。Briefs by MartianCraft

Briefs by MartianCraft 是一款售價199美元的一流Mac應用程序，讓原型設計變得非常簡單和有趣。像我在《五種App原型設計工具使用心得》中強調的那樣，你可以創建簡單的原型和交付迭代設計，甚至你也可以使用免費的iOS配套應用Briefscase與客戶分享你的項目。注意：在購買Briefs之前，MartianCraft為你提供了嘗試功能完善的應用的可能性。教程版本無有效期限，但scenes和timeline數量分別限定在10和1.Briefs是一款桌面應用程序，有著自身特別的優勢。比如，你可以充分享受使用大屏幕工作的舒適性以及其他桌面協作工具。但Briefs也有缺點，你不能像用Blueprint和AppCooker那樣做出動態更改。MartianCraft會緊跟最新的操作系統和硬體發布更新Briefs，該應用還為移動端和桌面端提供了一些模板。

Briefs的主要結構是帶有多個場景的時間線，每個場景代表單個的app的視覺狀態，它們包含多個actors來處理交互。

Briefs的菜單是直觀和必要的，但並不是以犧牲功能為代價的。你可以在右上角看到主菜單，它包括：

1.Scene list:可讓場景簡單地可視化，並在其間進行導航。 2.Inspector: 改變場景和actor屬性。3.Assets browser: 瀏覽庫中數量巨大的actors。Briefs庫包含四個子庫：Android、Blueprint、Desktop以及iOS，所以非常適合跨平台項目。你無需固定使用某個類型，但在一個原型中混用幾種類型有可能會讓你混淆各種元素。

你可以很輕鬆地調整actors上的設置：

你可以使用便利工具欄，改變actor的大小，鎖定位置，甚至聚合/解壓actors。

如果沒有找到某個你需要的actor，你不必恐慌或者宣告失敗，Briefs自有解決的辦法：1.創建新文件夾，並插入你的資產

2.在Managed Asset Folder中查找你此前創建的文件夾，在裡邊尋找你需要的actors。

Briefs會自動保存你的項目，所以每次你打開的項目都是最新保存的。你也可以把項目保存為brief文件，並在另一台計算機上載入它。Briefs的主菜單允許你以高效的方式移動原型和與原型交互。你可以在Timeline、Single Scene以及Blueprint之間切換。Timeline--可以突出所有的scenes以及它們之間的連接。

在單個scene中，你可以使用從scene list或timeline中選擇的單個視圖。

Blueprint是一個可以幫你系統化所有的app組件，並突出它們的屬性：大小、顏色、字體、空間...適用於non-retina和retina顯示屏展示。它提供了一個很棒的方法把你的設計清晰地傳達給客戶和其他開發者。另外，版本控制功能可讓你輕鬆跟蹤文檔。

這個有用嗎？你可以自動生成一個包含所有信息的PDF格式文件，可以方便地在開發者和設計師之間傳達像素的精確性，這麼做：File > Export as PDF

Example Blueprint PDF file download你也可以為原型添加交互性，這一點你可在其免費的配套應用Briefscase中預覽。這也是向客戶和開發者展示原型的好辦法。你可以通過兩種方式做到這一點：1.從主菜單中選擇一個actor和選項Select Actor > Add action

2.創建一個hotspot（假想它是一個觸摸敏感區）Select Actor > New Hotspot Actor

然後決定為觸發器賦予什麼樣的操作，並設置它的屬性（延遲、持續時間以及過渡類型等等...）

Briefs實際使用情況如何?在沒有看任何教程的情況下，我花了25分鐘來熟悉Briefs，並完成示例app的原型。剛開始使用Blueprint的情況，像使用Groosoft的Blueprint那樣，我在actions和scenes連接方面遇到了問題，不過不久就弄明白了。Briefs是款非常出色的原型設計工具，並且讓項目分享變得非常簡單。不管是使用傳統的共享工具，比如郵件、IM、AirDrop，還是下載免費的組合iOS應用Briefscase進行實時交互，你都會獲得針對設計的及時反饋。優缺點：

Briefs更多信息Briefs是一個售價199美元的應用程序，包含功能完善的demoBriefscase是Briefs免費的配套iOS應用，方便你查看使用Briefs創建的原型。OmniGraffle 6 by Omni Group

OmniGraffle遠不止是一個線框圖工具，你可以用它繪製圖表、流程圖以及進行頭腦風暴，它是Omni Group四個productivity app之一。OmniGraffle有兩個版本：iPad版：iPad版的功能要少一些，但也為你繼續工作提供了強大動力。你可以花49.99美元從iOS App Store下載。Mac版：Mac版有普通版和Pro版（在此查看兩者的不同之處）。你可以花99.99美元從Mac App Store下載，通過89.99美元升級至Pro版。你也可以直接從Omni Store購買，有時候會有可觀的折扣。OmniGraffle的功能非常豐富，為了簡單起見，我將會說一些簡化我的跟蹤類app創建的功能。每次從OmniGraffle中打開新項目，Resource Browser會提示你選擇一個合適的模板。為了從一開始就配置文檔滿足你的需求，你可以創建自己的模板。在這篇文章中，我們使用的是iOS模板。

整體上看，OmniGraffle很好地平衡了功能、整體審美以及易用性之間的關係。但是我更喜歡Briefs的暗色UI，它會讓你更加關注原型內容。OmniGraffle的菜單非常直觀，並且主界面可以被分為四個主題部分：

1.黃色,：你可以在黃色範圍內與原型元素進行交互。2.紅色：紅色範圍內是工具欄，你可以在此找到工具來自定義和方便你的工作（縮放、圖形和直線工具，文本工具、前置和後置選項等等...）3.綠色：綠色範圍內是發現和組織canvasses以及它們的層次。4.紫色：紫色範圍內的inspector可以調整原型元素的基本屬性（圖形、排列、圖片以及對齊等）。你也可以添加模板，調整對象的排版，以及設置其他高級屬性。Inspector有一個模板庫，包含大量線框圖元素。

如果你想使用其他元素，可以簡單地從桌面上拖放自定義圖片。另一個選擇是到Graffletopia訂閱他們的服務。每月花費24美元即可在iPad和Mac上使用數百套模板。如果你是一個極簡藝術派，可以只買其中一個模板包。儘管有大量模板，但我發現 AppCooker和Blueprint的庫對iOS項目更為綜合和廣泛。不過，你可以通過OmniGraffle進行更高級別的自定義，以及通過簡單的拖放來整合外部的資源。總而言之，我發現使用OmniGraffle的感覺更好些，因為軟體能滿足我的期望，並且在重複任務方面為我提供了幫助。以下列出了它的有用性，在我為下面的tableview定位箭頭時：

1.拖放第一個箭頭2.複製和粘貼第二個箭頭3.複製第三個箭頭，and *Puff* it was already in the right place, since it noticed the first two arrows aligned! :D看起來很簡單，但是把這個行為放到一個更大的項目中或者每日設計任務中思考--它會幫你節省大量時間，不必做重複的點擊...點擊。繼續學習，側邊欄可以快速幫你與canvasses進行交互：

你可以簡單地添加新的canvasses和layers，同時保持整個項目組織。你可以精確地隱藏、鎖定以及編輯元素層。如果需要列印項目，你可以確定某個特定的層是否要列印出來。另外它還有一個一流的功能--共享層（展示在橙色範圍內），這樣當你在該層進行添加或者調整，它會在canvasses間自動分享。我必須承認我想在OmniGraffle中看到更多iOS組件。比如你很難在其中發現iOS 7上的分段控制項，所以我不得不從外部添加。但是OmniGraffle用自定義模板庫彌補了這點缺陷。

當canvasses準備完成後，你就可以通過操作把它們連接起來。

從inspector的高級屬性中點擊某個元素，你會發現子菜單操作。你可以在這裡找打元素被點擊時執行的操作，並且你可以為線框圖添加基本的交互。你可以選擇不同的操作：打開URL打開文件運行腳本跳往別處展示/隱藏圖層在Jumps Elsewhere選項的幫助下，有可能從你的線框圖創建一個圓形。對移動原型來說，它可以展示或者隱藏圖層。比如，當用戶執行某個操作後，你需要展示一個警示框。最後但並非最不重要的一點，OmniGraffle項目是非常輕便的，並且可以以多種格式輸出。

OmniGraffle實際使用情況如何?作為一個mniGraffle新手，我花25分鐘完成了一個線框圖。依我看，OmniGraffle是最強大最適合的軟體之一，它不僅僅可以做app原型。也就是說，如果你的興趣首先是移動app線框圖，那你可能會發現之前評論過的其他工具更有用，因為它們有更加專註的開箱即用的功能，可以幫你做好項目。其他工具都有一個配套的app或者方法來幫你與團隊或者客戶分享項目。由於其廣泛用處和通用性，我們可以原諒OmniGraffle更耗時的界面。優缺點：

OmniGraffle更多信息OmniGraffle 6是一個售價99.99美元的付費Mac應用，帶有89.99美元升級至PRO版的應用內購。你也可以從Omni Store購買價值199.99美元的授權。OmniGraffle for iPad售價49.99美元，與桌面版相比，該版本的功能有限。Balsamiq Mockups by Balsamiq

Balsamiq Mockup是個進行快速設計創作的線框圖工具，簡單的元素不會讓評估人員或者客戶分心，可以讓他們更加關注內容和圖形質量。Balsamiq是款桌面應用，支持7天全功能的試用。在寫這篇文章的時候，Balsamiq的終身授權試用售價79美元。與其他工具不同的地方在於，Balsamiq Mockups支持跨平台，所以你可以在Mac、Windows或者Linux上使用。下載頁面在這裡。同時它還有一個web應用--myBalsamiq，試用期為30天，每月付費12美元可繼續使用。MyBalsamiq支持自動跨平台分享，包括PC，讓這款應用更加吸引人。現在我們來看看Balsamiq Mockups的真相。第一眼看去，它的界面非常整齊，UI分為三個主要部分：工具欄、元素欄以及canvas。

1.綠色。綠色範圍內是工具欄，包括多個實用工具，比如撤銷、重做、剪切、複製、刪除以及前置等。2.橘色。橘色範圍內是UI控制項欄，包括原型中可能用到的所有控制項，並且控制項按類別進行排列。3.藍色。藍色範圍內是原型組織頁面，包括多個頁面。你可以通過連接創建交互性的原型。我覺得UI控制項欄組織的非常好，但是當我打開iPhone類別時還是吃了一驚，控制項比較少：

所以我通過谷歌發現了一些UI控制項：

就我簡單的跟蹤類app，我使用了iPad Controls、iPad Controls by Raad、iPhone Glossy Bars以及iPhone Customizable.如果你仍需要自定義組件，你可以在Balsamiq Mockups中拖放圖片生成。當添加第一個自定義控制項時，它會在電腦上創建一個資產文件夾。

Project Assets category會引用該文件夾。

如果你需要自定義一個組件，這裡已經為你準備了極好的icon。

當你強調某個特定的組件，出現一個可改變其屬性的彈出視圖。

不同的組件有不同的屬性檢查器，你可以改變組群的屬性。

在canvas的幫助下，我的目標是快速複製和粘貼，這樣所有的原型就能處於同一個位置。10分鐘後我做到了。

雖然Balsamiq Mockups非常簡單，但具有很高的自定義水平。另外，它屬於用戶友好型的。創建一個交互性的原型非常簡單，你只需按照以下步驟：1.如果你像我此前一樣在一個canvas中工作，可根據你的視圖創建幾個canvasses。選擇新Mockup，點擊「+」按鈕來添加你的核心內容。

2.在每個canvas中複製粘貼單個視圖，點擊tab標籤給每個視圖命名，以保證項目的整齊，並在連接階段給你一定幫助。

3.通過點擊會觸發操作和設置連接類型的組件和目的地連接canvasses。

完成設置後，你的views看起來應該向下邊這樣，帶有紅色的小箭頭和鏈接。

你可以以PNG、PDF,以及XML格式輸出項目，但是為了使其具有交互性，我輸出的是PDF文件，供你參考。Balsamiq Mockups實際使用情況如何？我花10分鐘完成了一個線框圖。Balsamiq Mockups是我使用過的最簡單易用的線框圖工具，非常直觀並且支持大量自定義。它還支持跨平台，比本文提及的其他工具更有優勢。你還可以使用瀏覽器上的應用在辦公室和家之間進行分享。優缺點：

Balsamiq Mockups更多信息你可以在其官網頁面上查看Balsamiq各個版本對比情況，也可以在其頁面進行下載。本文提及的原型工具對比該系列文章對比了多個app原型工具，並且很難把它們進行對比，所以在此貼上一個方便的表格，總結了各個原型工具提供的功能：

最後的結論是什麼？總體上，我覺得這些工具都不錯，每個都有獨特之處以吸引需求不同的開發者。但是你可能會想知道在我評論了這麼多原型工具後，哪一款是最好的，所以我根據不同類別挑出了其中的優勝者。Mac上最具價值的線框圖工具

如果你正在尋找一款專註於app原型設計的工具，並且時間和價格成本是關鍵，那麼推薦使用Briefs。在我看來，Briefs是一款優秀的應用程序，因為它提供了適量的功能來創建移動和桌面應用線框圖。Briefs非常直觀，並且有著令人愉悅的UI。我個人認為暗色的UI可以讓人更專註於當前的工作。最後其免費配套應用Briefscase非常有用。Mac上最有價值線的框圖工具，兼具其他功能

如果你正在尋找一款通用的，可畫圖表，可用於頭腦風暴，以及其他功能的工具，那推薦你使用OmniGraffle，你可以用它做很多事情，app原型只是其中的一部分。OmniGraffle的一個小缺點就是只適用於Mac。就成本而言，基本版售價99.99美元，89.99美元可升級至Pro版，這讓很多人選擇使用Photoshop作為替代品。Mac上最有價值的線框圖工具，如果時間和錢不是問題

如果時間和花費不是問題，那我建議你使用Photoshop，我此前推薦過該應用程序，因為它不僅僅是線框圖工具，也是app開發者工具箱中不可或缺的一部分。Photoshop並不便宜--Photoshop Creative Cloud售價19.99美元/月，總共算下來也是價格不菲，並且還比較耗時--有很多學習教程，並且使用Photoshop創建原型的速度也比其他工具慢（但是類似DevRocket的第三方工具更具吸引力）。但是，最大的優勢是原型的像素更完美，誇張一點說沒有什麼是你不能做的。還有，Photoshop使用範圍更為廣泛，協作和分享文件非常簡單。iPad上最佳工具

我非常喜歡AppCooker，它非常適用於做精細的原型，使用起來也非常有趣。AppTaster完善了該工具包，因為它在這款優秀的應用程序上添加了很多。但是我想要說明的是我沒有在iPad上嘗試OmniGraffle。雖然Blueprint也是一款優秀的工具，但是我覺得AppCooker的體驗更棒。事實上，它只需幾分鐘就能創建一個app icon、一個商業計劃，或者記錄想法。最好看的MockupsAppCooker也是外觀最好看的原型工具。在我看來，它們的原型最有秩序，最具自定義以及最乾淨整齊。最簡單最快速的原型工具

Balsamiq Mockups是最簡單最快速的工具，它很簡易，整齊以及直接。還支持跨平台，並有一個web版本，這都讓這款工具更吸引人。我花了10分鐘完成一個原型，而使用其他工具完成原型的平均時間為25分鐘。最佳組合應用程序我認為Briefscase是最直觀的組合應用程序。雖然你可以通過dropbox傳遞文件，但是該軟體可以自動同步傳遞。另外，Briefscase簡單易用，有著非常直觀的UI。原文：App Mockup Tools Reviews Part 2: Briefs, OmniGraffle, and Balsamiq
推薦閱讀：