App原型设计工具使用心得（下）

源地址：http://www.cocoachina.com/applenews/devnews/2014/0331/8072.html

http://www.raywenderlich.com/64672/app-mockup-tools-reviews-part-2

此前，我们在《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。