App原型設計工具使用心得(下)

發表於2015-09-20

此前,我們在《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美元的應用程式,包含功能完善的demo

Briefscase是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、一個商業計劃,或者記錄想法。

最好看的Mockups

AppCooker也是外觀最好看的原型工具。在我看來,它們的原型最有秩序,最具自定義以及最乾淨整齊。

最簡單最快速的原型工具

Balsamiq Mockups是最簡單最快速的工具,它很簡易,整齊以及直接。還支援跨平臺,並有一個web版本,這都讓這款工具更吸引人。我花了10分鐘完成一個原型,而使用其他工具完成原型的平均時間為25分鐘。

最佳組合應用程式

我認為Briefscase是最直觀的組合應用程式。雖然你可以通過dropbox傳遞檔案,但是該軟體可以自動同步傳遞。另外,Briefscase簡單易用,有著非常直觀的UI。

相關文章