制作原型工具_15种顶级原型制作工具齐头并进

制作原型工具

Want to learn UX from the ground up? Get an entire collection of UX books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $14.99/month.

想要从头开始学习UX吗？ 借助SitePoint Premium，可以获得有关基础知识，项目，技巧和工具及更多内容的UX书籍的完整集合。 立即加入，每月仅需$ 14.99 。

As the number and variety of prototyping tools continues to grow, it’s becoming harder and harder to figure out which tools meet what needs, and who they’re suitable for. Since we first wrote this article back in 2015, countless design apps have dominated (and changed) the prototyping space.

随着原型工具的数量和种类的不断增长，越来越难弄清楚哪种工具可以满足什么需求，以及它们适合谁。 自从我们在2015年首次撰写本文以来，无数的设计应用主导了(并改变了)原型空间。

Stakeholder feedback and user testing is now taking a far greater role in UI design and this new generation of tools aims to connect these two previously separate stages of the design process. Clients want to be involved, and email isn’t cutting it anymore. Some apps like UXPin are also taking care of the wireframing stages, whereas others like InVision App are bridging the gap between designer and developer by offering design handoff tools.

利益相关者的反馈和用户测试现在在UI设计中扮演着越来越重要的角色，而这种新一代的工具旨在将设计过程的这两个先前分离的阶段联系起来。 客户希望参与其中，而电子邮件不再有用。 诸如UXPin之类的某些应用程序也在处理线框图阶段，而诸如InVision App之类的其他应用程序则通过提供设计移交工具来弥合设计师与开发人员之间的鸿沟。

Plus, there’s now a clear divide between desktop tools with cloud sharing (Adobe XD, Axure, Balsamiq, Sketch+InVision) and collaborative online tools (Figma, UXPin, Fluid UI, Proto.io).

此外，现在在具有云共享功能的桌面工具(Adobe XD，Axure，Balsamiq，Sketch + InVision)和协作在线工具(Figma，UXPin，Fluid UI，Proto.io)之间存在明显的鸿沟。

Many of these tools appear to be converging on a feature set that defines the role of the modern user experience designer. TL;DR—here’s a swift comparison of prototyping tools.

这些工具中的许多似乎都集中在一个功能集上，该功能集定义了现代用户体验设计人员的角色。 TL; DR-这是原型工具的快速比较。

This article was updated in March 2019 to reflect the current state of the prototyping tools market.

本文已于2019年3月更新，以反映原型工具市场的当前状态。

Adobe XD (Adobe XD)

Adobe may have been caught napping during the rise of Sketch, but they’re rapidly making up for it with Adobe XD. Launched in March 2016, it’s the latest addition to Adobe’s Creative Cloud Suite. While you can prototype interactions in Sketch with the help of the Craft Plugin, Adobe XD impressively offers these tools right out of the box, so designers are already comparing Adobe XD to Sketch like longtime rivals.

在Sketch兴起期间，Adobe可能已经被打n了，但是他们很快就用Adobe XD弥补了这一不足。 它于2016年3月推出，是Adobe Creative Cloud Suite的最新版本。 尽管您可以在Craft插件的帮助下在Sketch中创建交互原型，但Adobe XD令人印象深刻地提供了这些工具，因此设计师已经像长期竞争对手一样将Adobe XD与Sketch进行了比较 。

It’s definitely worth a look if you’re interested in a tool that covers all your bases (low-fidelity prototyping, high-fidelity prototyping, user flows, sharing and feedback) in a single app.

如果您对在单个应用程序中涵盖所有基础(低保真原型， 高保真原型，用户流，共享和反馈)的工具感兴趣，那么绝对值得一看。

Strengths

长处

• Available for macOS and Windows
  适用于macOS和Windows
• Everything you need in a single app
  单个应用程序中所需的一切

Weaknesses

弱点

• Plugin workflow non-existent, you’re locked into the Adobe ecosystem
  插件工作流程不存在，您已被锁定在Adobe生态系统中

InVision应用 (InVision App)

InVision App is the largest and most successful design collaboration tool currently on the market, the primary go-to tool for serious designers and enterprise teams alike. With tools like whiteboard collaboration, dynamic prototyping, comments, device preview, video calling, user testing, version control and design handoff, InVision is already a colossal force in the prototyping space, but when you factor in its Sketch and Photoshop integrations, it becomes an all-in-one design suite, especially when you throw in Craft, the Sketch/Photoshop Plugin that brings a lot of that functionality directly into your design app of choice.

InVision App是目前市场上最大，最成功的设计协作工具，是认真的设计师和企业团队的首选入门工具。 借助白板协作，动态原型制作，注释，设备预览，视频通话，用户测试，版本控制和设计移交之类的工具，InVision已经在原型制作领域发挥了巨大作用，但是如果将其Sketch和Photoshop集成考虑在内，它将成为一个多合一的设计套件，尤其是当您投入Craft时，Sketch / Photoshop插件可将很多功能直接带入您选择的设计应用程序中。

Since the first edition of this article, the company has also released InVision Studio, a free but powerful UX design tool that’s been met by positive reviews. This allows users to forego Sketch and Photoshop and keep their entire design process within the InVision ecosystem. It’s available on the Mac now, with a Windows version in development.

自本文第一版以来，该公司还发布了InVision Studio，这是一个免费但功能强大的UX设计工具，受到了好评。 这使用户可以放弃Sketch和Photoshop，并将整个设计过程保留在InVision生态系统之内。 它现在在Mac上可用，并且正在开发Windows版本。

Strengths

长处

• Powerful, mature platform
  强大，成熟的平台
• Fully-integrated with Sketch for high-fidelity design
  与Sketch完全集成，可实现高保真设计
• Constantly being updated with new features
  不断更新新功能

Weaknesses

弱点

• Feature-set can be a little overwhelming at first
  刚开始时功能集可能有点让人不知所措

• InVision Studio is currently available for macOS only, but Windows support is on the way. Sketch is only available for macOS users only (but you can pair InVision with Photoshop on Windows, although Photoshop isn’t strictly a UI design tool)

  InVision Studio当前仅适用于macOS，但Windows支持正在发展中。 Sketch仅适用于macOS用户(但您可以将 InVision与Windows上的Photoshop配对，尽管Photoshop并不是严格的UI设计工具)

奇迹应用 (Marvel App)

A very strong favourite for those looking for simpler, friendlier alternatives to InVision App. Marvel App has excelled at creating a prototyping tool that works for both advanced UX designers and those simply looking to communicate high and low fidelity concepts. Plus, while they champion working with Sketch, they also offer component libraries to allow for a complete online workflow in Marvel. Marvel App also recently integrated fan-favourite POP, which allows designers to transform their pen/paper ideas into iPhone and Android apps.

对于寻求InVision App的更简单，更友好替代品的用户而言，这是一个非常受欢迎的选择。 Marvel App在创建原型工具方面表现出色，该工具既适用于高级UX设计人员，也适用于希望传达高低保真概念的人员。 另外，尽管他们支持使用Sketch，但他们还提供了组件库，以允许在Marvel中进行完整的在线工作流程。 Marvel App最近还集成了粉丝最喜欢的POP ，使设计师可以将笔/纸的想法转变为iPhone和Android应用。

Strengths

长处

• Great support for transitions for additional realism
  大力支持过渡以实现更多现实主义
• Friendlier for non-designers, especially when giving feedback
  对非设计人员更友好，尤其是在提供反馈时

Weaknesses

弱点

• Web based only
  仅基于网络
• No offline designing
  没有离线设计

UXPin (UXPin)

UXPin is the most complete online solution for UX designers in terms of their offering. While you can import from Sketch and Photoshop, you can also design complex and responsive interfaces with UXPin’s built-in libraries, making UXPin something of a wireframing tool as well. With their design systems features, UXPin becomes one of the most complex tools in terms of automated documentation, designer/developer handoffs and collaborative features. Plans start from $20 a month.

就UX设计人员而言，UXPin是最完整的在线解决方案。 虽然您可以从Sketch和Photoshop导入，但是您也可以使用UXPin的内置库设计复杂的响应式界面，这也使UXPin成为线框图工具。 凭借其设计系统功能，UXPin成为自动化文档，设计人员/开发人员交接和协作功能方面最复杂的工具之一。 计划起价为每月20美元。

Strengths

长处

• Responsive design with breakpoints
  带有断点的响应式设计

• Powerful animations (not just linking screens)

  强大的动画( 不仅仅是链接屏幕 )

• Complete design collaboration and handoff solution
  完整的设计协作和移交解决方案

Weaknesses

弱点

• Additional features increase the complexity of use
  附加功能增加了使用的复杂性

网络流 (Webflow)

Webflow is a visual tool for designing responsive websites that also exports clean code—it removes the headache of going from design to published on the web. Competing as much with WordPress as it does with Sketch App, Webflow lets you design fully functional responsive websites incorporating back-end (API) data and can automatically deploy to fully scalable, worry-free hosting with a single click of a button. It’s basically Adobe Dreamweaver for the modern-day designer who cares about clean code and mobile-friendly web design.

Webflow是用于设计响应式网站的可视化工具，该网站还可以导出干净的代码-消除了从设计到发布在网络上的麻烦。 Webflow与WordPress相比，与Sketch App一样，可以与WordPress竞争很多，它使您可以设计功能完整的自适应网站，其中包含后端(API)数据，并且只需单击一下按钮，即可自动部署到完全可扩展的无忧托管。 对于那些关心干净代码和适合移动设备的网页设计的现代设计师，基本上是Adobe Dreamweaver。

Strengths

长处

• Real data can be included (from APIs/JSON/etc)
  可以包含真实数据(来自API / JSON / etc)
• Creates high-quality, reusable code
  创建高质量，可重用的代码
• Responsive websites can be designed and deployed with ease
  响应式网站可以轻松设计和部署

Weaknesses

弱点

• Not useful for designing native mobile apps
  对设计本机移动应用程序无用
• Requires some knowledge of HTML/CSS to be at its most effective
  需要一些HTML / CSS知识才能最有效

菲格玛 (Figma)

A somewhat recent addition to the prototyping space, Figma boasts the most mesmerising real-time design collaboration features of any prototyping tool while modelling its feature-set on many of the intuitive design tools of Sketch and Adobe XD (such as symbols and device preview), along with a bunch of tools usually reserved for the online crowd (such as versioning and design handoff). Version 2.0, launched in July 2017, includes a prototyping mode with hotspots and developer handoffs to further streamline the design workflow. It works in the browser, on macOS, and on WIndows, although it sometimes can be slow.

Figma是对原型空间的最新补充，它拥有所有原型工具中最令人着迷的实时设计协作功能，同时在许多Sketch和Adobe XD直观设计工具(例如符号和设备预览)上对其功能集进行建模，以及通常为在线人群保留的一堆工具(例如版本控制和设计移交)。 2.0版于2017年7月推出，其中包括具有热点和开发人员交接的原型制作模式，以进一步简化设计工作流程。 它有时可以很慢，但可以在浏览器，macOS 和 WIndows上运行。

Strengths

长处

• Real-time collaborative design features are second-to-none
  实时协作设计功能是首屈一指的
• Fully-featured, ideal for designers from start to finish
  功能齐全，非常适合设计师从头到尾

Weaknesses

弱点

• Figma can can be laggy at time, especially with real-time collaboration
  Figma可能会有些时滞，尤其是在实时协作中

9个值得考虑的原型工具 (9 More Prototyping Tools Worth Considering)

流畅的用户界面 (Fluid UI)

With a strong focus on simplicity and communication, Fluid UI includes built-in high and low fidelity component libraries, live team collaboration, device previews and video presentations making it a top-notch solution for designers, product managers and founders alike.

Fluid UI着重于简单性和通信性，包括内置的高和低保真度组件库，实时团队协作，设备预览和视频演示，使其成为设计师，产品经理和创始人的一流解决方案。

原型 (Proto.io)

Mature and feature-rich, Proto.io is best used by designers looking to create high-fidelity and highly-animated prototypes in the browser.

成熟且功能丰富的Proto.io最适合希望在浏览器中创建高逼真度和高度动画化原型的设计师。

Axure RP 8 (Axure RP 8)

Established way back in 2003, Axure is an excellent choice for UX designers who need to create specifications for designs and animations in supreme detail. Axure’s includes support for conditional flow interactions, dynamic content and adaptive/responsive design, as well as high and low-fidelity prototyping. Axure is a serious tool for serious designers.

Axure成立于2003年，是需要创建最详细的设计和动画规范的UX设计师的绝佳选择。 Axure包括对条件流交互，动态内容和自适应/响应设计以及高保真和低保真原型的支持。 对于认真的设计师来说，Axure是一种认真的工具。

成帧器X (Framer X)

Straddling the line between design and code, Framer X allows a designer to create stunningly detailed animations with a minimal amount of coding (it uses a simplified version of JavaScript called CoffeeScript) and integrates well with other tools like Sketch and Figma. You’ll have to code animations and interactions, but the possibilities are essentially endless.

Framer X跨越了设计和代码之间的界线，使设计师可以用最少的代码创建令人惊叹的详细动画(它使用称为CoffeeScriptJavaScript简化版本)，并与Sketch和Figma等其他工具很好地集成。 您将不得不编写动画和交互代码，但是可能性基本上是无限的。

Mockplus (Mockplus)

Mockplus is a wireframing and low-fidelity prototyping tool with a relatively simple learning curve and support for Windows, macOS, iOS and Android. With over 200 built-in components and 3,000 icons to help you build mockups quickly, Mockplus is a fairly solid rapid prototyping solution for teams using a range of devices and operating systems.

Mockplus是一种线框图和低保真原型制作工具，具有相对简单的学习曲线，并支持Windows，macOS，iOS 和 Android。 Mockplus拥有200多个内置组件和3,000个图标，可帮助您快速构建模型，对于使用各种设备和操作系统的团队来说，Mockplus是一个相当可靠的快速原型解决方案。

贾斯汀敏德 (Justinmind)

Justinmind is a feature-rich desktop app that’s surprisingly maintained fantastic usability for a tool that’s been growing in features for 8 years. Although not as mainstream as InVision and Adobe XD, it’s fairly easy to use and designers can create clickable wireframes and functional, high-fidelity prototypes with no trouble at all. Definitely a reliable choice.

Justinmind是功能丰富的桌面应用程序，对于功能已经增长了8年的工具，它出人意料地保持了出色的可用性。 尽管它不如InVision和Adobe XD主流，但它相当易于使用，设计人员可以轻松创建可单击的线框和功能强大的高保真原型。 绝对是一个可靠的选择。

弗林托 (Flinto)

Flinto is a macOS desktop app with a lighter web-based alternative called Flinto Lite, where both have a strong focus on high-fidelity mobile app prototyping with customisable animations. Flinto has an interesting pricing structure which sets it apart—Flinto for macOS is $99 one time, and Flinto Lite is $20/month but also comes with Flinto for macOS. If you’re a designer that works alone, Flinto for macOS the cheaper, smarter solution.

Flinto是一款macOS桌面应用程序，具有基于Web的更轻便的替代方案，称为Flinto Lite，在这两种方案中，它们都非常注重具有可自定义动画的高保真移动应用程序原型制作。 Flinto有一个有趣的定价结构，使它与众不同-macOS的Flinto一次是99美元，而Flinto Lite是20美元/月，但Flinto也附带macOS。 如果您是一个单独工作的设计师，那么适用于macOS的Flinto是更便宜，更智能的解决方案。

动画原型制作工具 (Animation Prototyping Tools)

折纸工作室 (Origami Studio)

Origami is Facebook’s design app. Designs from Sketch can be copied over into Origami where the mighty animation features will let you explore different animation with endless creativity. Origami comes with preview apps for iOS and Android, however the core app is only available for macOS users. Prototyping is limited specifically to animations.

折纸是Facebook的设计应用程序。 Sketch中的设计可以复制到折纸中，强大的动画功能可让您以无穷的创造力探索不同的动画。 Origami随附适用于iOS和Android的预览应用程序，但是核心应用程序仅适用于macOS用户。 原型制作仅限于动画。

Mac原理 (Principle for Mac)

Principle is another macOS-based tool with a focus on animation, and although it comes at a steep cost of $129/user, it has a very happy customer base. Principle lets you import from Sketch and preview designs on their iOS app, but there’s no Android app for testing, sadly.

Principle是另一种基于macOS的工具，着重于动画，尽管它的价格为129 /美元/用户，但其客户群非常令人满意。 Principle允许您在其iOS应用程序中从Sketch导入和预览设计，但是遗憾的是，没有用于测试的Android应用程序。

线框图工具≠原型工具 (Wireframing Tool ≠ Prototyping Tool)

Prototyping doesn’t necessarily = wireframing. You can create wireframes of high(er)-fidelity mockups (designers that enjoy sketching lo-fi mockups usually more onto wireframes afterwards), and you can also prototype low-fidelity mockups in a wireframe style, which is why some prototyping apps also include wireframing tools (such as Axure and UXPin, which I mentioned above). If there are any other prototyping tools that you think deserve a special mention, let us know in the comments!

原型不一定等于线框图。 您可以创建高(高)保真度模型的线框(设计人员通常以后会喜欢在线框上草绘低保真度模型)，还可以以线框样式对低保真度模型进行原型制作，这就是为什么一些原型设计应用程序还包括线框图工具(例如我上面提到的Axure和UXPin)。 如果您认为还有其他原型工具值得一提，请在评论中告知我们！

翻译自: https://www.sitepoint.com/invision-marvel-justinmind-prototyping-tools-compared/

制作原型工具