VisionMobile：2015年UI和互通原型工具状况

VisionMobile在2015.12.3发表了博客The state of UI and Interaction Prototyping tools in 2015，下面是该文的翻译。

用户界面设计过程在过去几年发生了根本性变化。有无数工具为线框图和原型设计提供辅助，设计者挑花了眼。谁是最好用的工具？

有一样是明确的，静态设计肯定不能省去。设计者应该采用动画和交互元素来进行凸显，如今比以往更重要。

为何要原型？

原型是早期的样品，模型或用于测试概念或流程的产品发布，或用于复制和学习的东西。

在设计阶段使用原型最重要的原因是为了在进入开发阶段之前评估互动模式。这在手机应用中尤为重要，因为实现一个高级动画或互动通常比桌面网站要花费显著更多时间。原型可以解决你设计中问题，甚至在它们出现之前。

另一个重要原因是加强设计者和开发者之间的沟通。虽然一个动画可能在设计者脑海中非常清晰，开发者往往很难真正可视化并实现它。这就是原型的作用。不同于尝试通过语言来解释UI是什么样子或感觉如何，设计者可以使用可视化原型工具与开发团队来沟通他们确切的所需。

流程原型

每个设计者需要了解的最基本原型方式是流程原型，用于创建互动式和功能化的屏到屏的原型。流程原型可以帮助展示产品，因而作为设计者和开发者沟通的基础。

你要的合适的流程原型工具应该是容易使用，快速，具有协同工作功能（例如用户/团队管理，评论）以及版本历史。

Invision和Mavel

对于基础的屏到屏原型，InvisionApp和MarvelApp是两个最流行的选择。这两个应用允许设计者和产品团队快速拿出他们的web或者手机应用工作原型，只需简单上传屏幕（或工作设计），增加热点和从一个页面切换到另一个，形成固定的原型可以用来共同合作和/或交付给开发者。



大量的屏幕切换提供是即开即用，因此允许用户通过极其易用界面，几乎无需学习时间，就可创建高度忠实的原型。然而值得一提，这些应用都不提供UI中单个元素的转换或动画（除了Invision的叠加工具可以在一定程度上模仿）。

就合作方面，Invision无疑是优胜的，因为其具备共享选项，用户和团队管理，项目管理工具和情绪板。然而，Invsion免费计划只允许一个项目，相反Marvel的免费计划则不进行限制，因此适合于那些只是寻找一个免费工具来进行工作的设计者。

（国内很多人使用Axure）

高级的互动原型

如果需要进行屏幕切换或者屏内动画和互动，Invision和Marvel就不够用。Framer，Principle，Quartz Composer和Form是设计者和开发者的易用高级互动原型工具。

Principle

Principle可能是最为易用的工具之一，让设计者可以在短时间内创建高保真原型，为更好动画处理提供伟大的辅助时间轴浏览器。如果你曾经使用KeyNote做原型，会发现你在家里有一个即用的“神奇电影”转换，以及多种先进转换处理工具。

（注：软件结合了Sketch、Keynote、Flash以及After Effect等软件的优点）

软件优秀地集成了Sketch，允许直接对层和组进行复制-黏贴，节省了导入/导出特定元素的时间，而这是费时的，重复性工作，大部分设计者都希望避免。

Framer

Framer是当中最高级的原型工具，主要是因为它是基于代码。和Principle不同，没有花俏的所见即所得编辑器和拖拽界面。

所有互通和动画都是通过CoffeeScript或JavaScript。这自然会有个陡峭的学习曲线，但在积极的另一方，意味着设计者可以制作几乎任何他们想要的原型。

Framer有非常强大社区，和无数例子和教程可以学习，这使它成为最那些不惧怕编程的人最为坚固的原型工具之一。它集成了Photoshop和Sketch，使之很容易直接导入设计。原型可以视为一个实际设备，如同其他所有流行工具那样。

Quartz Composer, Origami, Form

除了如Framer那样存粹基于编码工具，以及如Principle那样完全所见即所得的工具，还有其他工具类型实现，称之为可视化编程或者基于节点编程。如Quartz Composer和RelativeWave Form（现在被Google收购）这些工具是通过搭建块（成为补丁），通过箭头连接来描述状态之间的互动和转换。尽管这些工具比Principle有更为陡峭的学习曲线，他们可以在状态之间进行更为高级动画和互动，是基于编程工具，如Framer的一种替代。

小结

产品	公司	成本	高级动画功能	要求编码技能	整体
Invision	Invision	1个项目免费，至每月$25无限制	No	No	快速流程原型和简单动画。协助功能好。
Marvel	Marvel	免费提供限制功能，至每月$15	No	No	快速流程原型和简单动画。
Framer	Framer	一次性$99	Yes	Yes	非常详细原型。陡峭学习曲线。基于编程（Javascript/Coffeescript）
Principle	Principle	一次性$99	Yes	No	易于创建原型和导出视频。使用可视化/所见即所得编辑器。
Quartz Composer	Apple	免费（包含在Xcode开发环境中）	Yes	No	非常详细原型。陡峭学习曲线，基于可视化编程（节点）
Form	RelativeWave, 被Google收购	免费	Yes	No	非常详细原型。陡峭学习曲线。基于可视化编程（节点）

对于大多数设计者，他们需要基本UI流程原型和团队协作，Invision或Marvel可以覆盖他们的大部分需求，同时需要很少甚至不需要时间来学习，就能开始进行原型设计。如果需要更多高级转换和动画，考虑到出色的易用性和掌握所需要的时间，Principle是个很好的选择。如果需要更高级互动，如编程可使用Framer，或者基于节点工具如Quartz/Origami，有或者使用可视化编程的Form。

有一样是肯定的，现代设计者可以尽可能快地掌握原型和互动设计。工具可以更换，但是在他们工作流程中结合快速原型和动画设计可以改变他们的观点和潜力，无疑帮助他们创造优秀体验。

 

相关链接：我的产业生态链和杂谈文章