网站首页 > 平面设计> 文章内容

五种App原型设计工具使用

※发布时间:2017-11-26 12:22:11   ※发布作者:habao   ※出自何处: 

  在开发的早期阶段,原型设计无疑是很重要的,这也是详查和分解应用最简单最低成本的阶段,所以你应该充分利用该阶段,以避免后期改写大量代码。

  在开发的早期阶段,原型设计无疑是很重要的,这也是详查和分解应用最简单最低成本的阶段,所以你应该充分利用该阶段,以避免后期改写大量代码。

  原型可以促进多个团队之间展开头脑风暴,帮助他们在演示和demo过程中厘清与app相关的概念。

  幸运的是,有大量工具都可以帮你创建原型,但不幸的是需要逐一评论,这篇文章中,我特意挑选了5款工具:

  你可以在它们之间进行比较,我用每种工具为一款简单的追踪应用创建原型。这款应用可以让你记录有趣的地方,添加follower,并在followers的list中查看兴趣点。

  是一款售价19.99美元的iPad应用,已经针对iOS 7进行了优化,可以帮你轻而易举地设计原型。Blueprint还有一个配套的免费内应用--Blueprint Viewer,你可以用它来查看你的项目,或者通过iTunes File Sharing或者Dropbox Sync进行备份。Blueprint还具有自动保存的功能,有助于你毫无顾虑地工作。

  你也可以通过邮件发送你的原型,或者或者直接从收件箱中用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中,这种组织方式非常重要。

  最初,我在Actions和视图联接上多花了一些时间和精力,但是其他任务进展的非常顺利。Blueprint常直观的,并且Blueprint Viewer可以轻而易举地让你分享项目。

  点击“+”按钮可以导入项目,并像真实app一样演示,并且Blueprint还提供了合适的指南让你清楚原型的哪些部分是可以进行交互的。

  的核心app只适用于iPad设备,售价19.99美元,另外IAP项目--iOS 6/iOS 7项目转换工具售价9.99美元。

  是一个售价14.99美元的iPad应用,已经针对iOS 7进行了优化。它并不仅仅是一个原型,它还提供了一个让你从概念捕获灵感的工具箱,从图标草图和原型设计,到App Store信息收集以及创建商业模式。管理整个app项目计划周期是一个棘手的任务,不过AppCooker通过对各个方面信息的汇集可以简单地帮你达到专业的结果。

  和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资料库和了不起的背景。跟Blueprint一样,你所有的进程都被自动保存,这样你可以更多关注原型,而不用担心系统是否保存了你的工作。

  你可以以AppCooker、AppTaster或者PDF三种格式输出项目。项目文件不仅包含你的原型,也包含app的icon、App store以及定价信息。另外,针对特定的工作区,你可以输出PDF或者JPG格式的文件。你还可以通过AppTaster交互式查看原型,并留下反馈。

  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 SmartBack links简单和高级的功能。克隆屏幕以及其他便捷操作(比如注释、对齐)都非常容易,会让你节省大量时间。使用集成到工作区的Fluid player可以让你随时演示屏幕流。Fluid Player模拟了你的原型如何在移动设备上运行,虽然你可以在真机上演示你的原型。如果你还想要试试这个很酷的特性,可以扫描下方的二维码,并跟随说明或者简单地跟随FluidUI提供的链接。

  用Fluid UI做原型花了25分钟。虽然Fluid UI没有辅助性的app(注:比如AppCooker和AppTaster),但你可以通过邮件分享你的原型链接,并且收件人无需安装任何额外软件就能看到你的最终。付费FluidUI用户可以以PNG屏幕、交互式的HTML原型以及PNG屏幕流图表输出项目,甚至可以打印出来。FluidUI还有一个免费计划,通过这个简单的免费计划,你可以在Twitter或者 Facebook上分享你的项目。最后,Fluid UI允许你在账户之间移动项目。

  Fluid Software的Fluid UI是跨平台开发者一个很好的选择,而且使用Fluid Player预览原型非常简单。

  Photoshop是Windows和Mac上一款知名的桌面应用,它不是最简单的mockup and prototyping工具,但它是迄今为止最全面的设计软件包。虽然Photoshop售价不低,但对于一个设计师来说是物有所值的。你可以以19.99美元的价格购买Photoshop Creative Cloud,或者你可以以49.99美元的价格购买整个Creative Cloud package。如果你想了解更多详细信息,可在此Photoshop有一个陡峭的学习曲线,但是一旦你学会了基本的技能,以后你会有一个灵活性的优秀的原型设计工具。当设计工作流程(包括布局、指南、图形以及其他等等)时,Photoshop大部分基础的功能可以给你提供很好的帮助。

  1.即时可见的视图模板:DevRocket可为所有iOS设备(iPad/iPhone)生成横向和纵向的视图模板,并智能展示模板。2.智能icon工作流程:DevRocket可以使用单张icon设计生成各种尺寸的icon。

  1.在线搜索可以满足你需求的免费或者付费PSD文件;你可能会找到一个涵盖iOS 7UI组件的库。

  结合使用Photoshop, DevRocket以及PSD素材,我用了40分钟完成一个mockup设计。相比较其他几种工具,使用Photoshop花费的时间略微有点长,尤其是当你还不熟悉PS的时候。不过PS设计的弹性灵活性值得你投入这些时间。一旦你创建好所有的屏幕视图,你可以把他们添加至共同的工作区,如果你想把这些屏幕视图连接起来的话。

  有越来越多的第三方工具以神奇的方式扩展了Photoshop的兼容性。Bjango推出的Skala Preview可以让你和客户分享你的Photoshop mockups,并且

  2.在Photoshop中创建一个远程连接。Edit Remote Connections,然后提供一个service name和password,确定勾选了Remote Connections。4.打开Skala View app,确定你已经同时运行了Skala Preview和Photoshop,确保运行Skala Preview的Mac和iOS设备使用了同一个wifi网络。为了实时预览你在Photoshop中编辑的文档,需要在Skala Preview输入Photoshop Remote Connection和密码,设置可在Settings\PhotoshopSettings中完成。

  Skala Preview可以把原型像素完美的图片发送给任何iOS或者Android设备。你甚至可以进行色盲测试。

  最后介绍的是手工草图,这仍然是一个进行原型设计的可靠的真实的方法。很多应用程序就开始于纸上的草图。

  我花10分钟完成了原型,使用了我们内部现成的模板,提供了信息的,比如日期和mockup id,如果你需要对工作进行分类,那么这一点非常有用。提供了大量令人惊讶的模板,为你开始原型设计提供了的基础。也为你的原型草图提供了专业的外观。另外,Intece Sketch Templates还提供了iPhone和iPad草图模板,也为Android、web app以及WP 8提供了草图模板。

  我特意用荧光笔标出了视觉上的抽象信息,比如手势、操作以及选择元素。对我来说,这不仅简单灵活地描出信息,也让应用的流程一清二楚。

  分享手工原型更为简单:使用iPhone拍张照片,然后上传至Dropbox,或者通过邮件分享。但手工设计原型有优点也有缺点,有些缺点并没有在下面的图表中列出,比如它没有内置的方法来保存原型草图,没有简单的方法在草图间复制/粘贴元素。

  在我看来,AppCooker性价比最高,它提供了高级功能,较为直观并且可用性很高。而AppTaster作为一个非常有用和免费的viewer,很好地完善了AppCooker。Blueprint使用起来非常简单,Blueprint Viewer对项目的可移植性处理的很好,它最大的特性是直观性和即时性。FluidUI的显著特点是跨平台兼容性,更具有灵活性,还有一个丰富的部件库。使用FluidUI创建原型非常简单和快捷。如果你有时间学习使用新工具,那么Photoshop则提供了一个功能多样的。容易可用的插件和PSD模板可以让你的原型设计工作非常有趣。最后是快速、便宜、易用的手工草图。它们抛却了炫目花哨的图形来展示app的核心功能,可以获得大量的反馈。

  推荐: