12个顶级原型制作工具

null

原型设计是任何数字设计过程的重要组成部分。它有助于我们模拟我们的设计,探索不同的设计用户体验,并测试我们项目中的旅程和用户流程。打印和提供设计PDF的日子早已不复存在。

有很多网页设计工具周围,但原型工具近年来真正发挥作用。使用这些原型制作工具,您将能够应对您可能面临的任何设计挑战,无论您是想创造美观还是技术创意。对于任何原型,测试和使用您的界面非常重要,这样您就可以验证体验。

大多数这些工具都带有价格标签,但有些可以为单个项目或有限页面提供免费访问,让您找到适合您项目的应用程序。

主要插图:牛顿里贝罗

01. Proto.io

价钱:每月24美元起(免费试用)

优点:

  • 记录用户测试
  • 可共享的原型
  • 移动应用可用
  • 支持VR原型设计
  • 附加组件可用

缺点:

  • 不适合离线使用

Proto.io是一个令人难以置信的竞争者,可以创建逼真的原型,从粗略的想法到完全成熟的设计。该工具还为您的项目提供了许多可能性,包括创建详细的动画和自定义矢量动画。

当您评估帮助创建原型的工具时,它肯定是领跑者之一。使用Proto.io,启动项目就像您希望的那样简单。只需勾勒出一个粗略的想法,您就可以立即开始使用预定义的资产来快速发展您的概念。

一旦您对自己的想法感到满意,就可以将这些想法变成更加精致和流畅的线框,以便进一步验证和反思。之后的下一个重要步骤使您可以调整原型的设计,使其尽可能真实地达到最终结果。

Proto.io是一个基于Web的工具,附带了大量的附加组件和功能,包括导入Sketch和Photoshop文件,VR原型,UI库甚至用于用户测试的屏幕录制。如果您要转换到其他应用程序或从其他应用程序转换,这确实很有用

最终,您需要花些时间来掌握这个工具。可以用它做很多事情,并且有很多选项和菜单项可供使用。一旦你学会了解它,那将是一个很难收拾的东西。创建详细动画的前景确实使它成为一个优秀的使用工具,并以尽可能逼真的方式执行您的想法。

02. Adobe XD CC 2018

价钱$ 9.99加入/月|9.98 /月
尝试免费试用我们|联合王国

优点:

  • 只需点击几下即可添加互动
  • 清洁UI
  • 运行和导出原型以便于测试
  • 创建具有极少限制的原型

缺点:

  • 动画选项有限制

Adobe XD为Adobe下的数字项目提供了最佳环境创意云设计工具的集合。虽然如果你是一个敏锐的Adobe用户和XD的新用户,你可能不会发现界面非常熟悉,但它确实与其他领先工具相媲美。如果你已经在Photoshop中设计了一段时间,这是一个跳跃。但是,如果你是Adobe的忠实粉丝,这是值得的。

该工具使您能够以极少的限制创建高保真设计和原型。它肯定会成为更多视觉项目的军械库之一。它设计非常精巧,非常易于使用,具有一些非常简洁的功能,使设计过程更加高效和令人满意。

画布有两种模式:设计和原型。一旦创建了一组界面和画板,就可以开始在可点击元素和页面之间绘制关系。您可以决定滑动,推动和溶解等过渡样式。然后XD允许您运行和导出原型,以便您可以测试它们并将它们显示给客户端。

03. Axure

价钱:每月29美元起

优点:

  • 非常适合复杂的网站和想法
  • 非常适合处理动态数据
  • 条件逻辑
  • 能够导出为HTML文件
  • 非常实用

缺点:

  • 不适用于高保真设计的原型设计

Axure已成功地建立了市场上最好的线框工具之一的声誉,并且在处理需要动态数据的更复杂项目时是完美的选择。使用Axure,您可以将注意力集中在模拟项目上,这些项目更具技术性,在结构和数据方面需要更多关注。

虽然它不一定是高保真设计原型设计的首选,但它仍然能够通过第一阶段线框概念快速占领更大的项目/软件平台。

Axure的一个主要优点是它可以很好地处理动态内容,使您能够根据某些用户旅程或交互来更改和更改它。这是通过条件逻辑和通过设置变量和参数来操纵页面,内容块或文本的组合来实现的。

但是你可以用Axure做的事情的潜力并不止于此。这是一个可视化流程图和图表的绝佳选择,这可以帮助您阐明一些您可能遇到的技术性旅程。

谈到项目的技术方面,Axure应该是您的购物清单中的首选,用于解决设计的技术问题,以及数据引导或动态平台,其中设计最终仅仅是化妆品改造。想到了形式上的功能。

04. 折纸工作室

价钱:自由

Origami最初由Facebook开发,旨在帮助团队构建和设计产品。现在它是免费提供的:您可以注册为Apple开发人员,然后使用Quartz Composer下载并安装Xcode,以便在Mac上运行Origami。

与其他原型设计选项相比,此工具需要更多的安装工作。但是,一旦安装完成,您就可以开始创建模拟滚动,点击,滑动和页面链接的设计概念。 Origami的文档,教程和操作方法视频使您可以轻松入门。

Sketch和Photoshop设计可以导入到Origami中,您的项目图层将被保留,随时可以链接,动画和转换。 Origami也不是以设计为中心的移动设备:您可以设计响应式网站并模拟文本输入,FaceTime相机和OS X拖放等功能。

只需单击一下即可导出原型组件(包括动画),以便工程师可以复制并粘贴到项目中。 Origami包含一个演示工具,可让您为设计添加自定义背景,全屏查看以及模拟不同设备。

作为一款免费的原型设计解决方案,Origami可提供很多产品。但是,一个缺点是它还没有让您的客户或设计团队直接评论项目或版本历史记录。

05. 一个Webflow

使用Webflow可以快速,无缝地设计原型,但是这个工具真正发挥作用的是原型全部完成的时候。只需单击按钮,即可将完成的原型转换为生产就绪的站点。

最近,Webflow推出了一项改变游戏规则的新功能:用于原型的CMS。 Webflow的CMS完全可视化,允许您创建功能强大的动态站点,而无需编写任何代码。另一个特别有用的功能是它能够使用您的博客页面原型概念创建博客。

如果您是自由设计师并且很难找到开发人员将您的设计转变为生产网站,那么Webflow可能适合您。您甚至可以设置用户帐户或指定管理员来管理内容,您的客户将能够直观地进行更改。

或者,可以很容易地将原型导出到代码中。 Webflow的干净语义代码可以为您的工程师节省数小时的代码清理时间。

Webflow附带了可以拖放到原型中的网站模板和Web组件。这些加速了原型设计过程,因为它们意味着您不需要重新创建常用的设计资产。

如果您遇到困难并需要帮助,可以查看Webflow的详细文档或观看其有用的操作视频课程。当然,如果您是第一次使用Webflow,这种支持将有助于最大限度地减少学习曲线。

Webflow本质上是响应式的,因此您的网站布局将针对所有设备进行优化:桌面设备,移动设备和平板电脑。如果这还不够,您可以设计适用于移动设备和所有现代浏览器的动画。它仍然没有结束:Webflow内置了可扩展性,这使您可以轻松地将您的实时原型连接到Slack,MailChimp,Google Drive以及400多种其他服务。

06. 草图

价钱:$ 99 /年(免费试用)

优点:

  • 整洁的用户界面
  • 在功能方面非常灵活
  • 易于构建原型
  • 构建符号和可重用资产
  • 附加组件可用
  • 轻松分享您的原型

缺点:

  • 动画选项有限制

Sketch是一个在设计界深受喜爱的应用程序。它使用简单,为您提供创建漂亮界面所需的一切。直到最近,Sketch依靠第三方扩展来使用InVision进行原型设计,但它现在提供了一个独立的环境。

使用预定义的画板,您可以非常轻松地快速完成Sketch;只需开始加载图形或类型。使用此工具进行设计非常简单。

在Sketch中非常有效的功能之一是它如何处理符号。这是一种包装小型甚至大型界面对象并一遍又一遍地重复使用的简洁方法。使用符号,您还可以以非破坏性的方式编辑它们。例如,您可能将按钮元素打包到使用文本,图标和边框的符号中。您可以在设计周围重复使用符号,并根据需要更改文本元素。如果您在源代码处编辑符号,则可以更改字体样式和颜色等内容,它将更新您设计周围的所有符号。非常整洁,往往节省大量时间。

至于原型设计,您可以在画布上的对象和页面之间绘制关系。这些关系将为您提供可以开始连接的网页之间的链接,并使您能够在用户浏览网站时模拟用户的旅程。在Sketch中,您还可以使用唯一链接共享原型,并在必要时对项目进行任何更新。

素描是许多人的最爱,绝对值得一看。它是一个非常干净和多功能的设计工具。有许多可用的扩展,有助于使设计过程更快或更容易。

07. 成帧器

价钱:$ 15 /月(免费试用)

Framer是最受欢迎的原型制作工具之一。它基于这样一个前提:使用代码可以对任何东西进行原型设计,从而产生新颖而突破性的设计。

虽然这可能是真的,但该工具用于设计和动画原型的专有编码语言可能是一个障碍。有些人可能在陡峭的学习曲线结束时看不到奖励,特别是对于不能在Framer之外使用的语言。

但是,对于那些想要接受挑战的人来说,Framer编码语言的文档结构非常好,有大量示例来演示语言的工作原理。有关于Udemy和O'Reilly的操作视频以及课程。

这种方法对于不熟悉编码的设计人员特别有用。它提供了灵活和强大的代码的第一手视图。此外,Framer的Mac App设计精良,在您编写代码时提供实时预览,这对于第一次编写代码的人来说是鼓舞人心的。

这并不是说具有编码经验的设计师更喜欢编写HTML / CSS来设计他们的设计。 Framer可能只是您一直在寻找的工具:您不会受到其他应用程序的拖放工具的限制。此外,由于Framer使用代码构建原型,您可以将实时数据合并到原型中,例如Twitter和Parse等来源。

与其他工具一样,Framer支持Sketch和Photoshop项目,并且还将保留您的设计图层。另一个好处是 - 与大多数其他工具不同 - 您还可以导入After Effects文件。当您准备好共享原型时,Framer可以生成一个可以与您的客户共享的URL。可以在移动设备上打开这些可共享的URL以进行实时预览。 Framer还可以让你制作VR原型。

08. Vectr

You can design your prototypes on Vectr's web or desktop apps

您可以在Vectr的Web或桌面应用程序上设计原型

价钱:自由

您可以在Vectr的Mac和Windows桌面应用程序上设计原型,考虑到应用程序是免费的,这是令人印象深刻的。无论您是在桌面还是Web浏览器上工作,原型都会保持同步状态,让您在准备就绪时可以自由工作,并确保您始终可以访问最新的更改。

Vectr原型可以与URL共享,并集成到像Slack这样的应用程序中,以实现强大的协作。作为额外的奖励,与您共享模型的人可以对其进行注释和编辑。

目前,Vectr并不像许多其他选项那样功能丰富,但这不应该阻止你熟悉它。该应用程序的路线图已经发布,详细列出了一系列令人印象深刻的功能。其中包括:完全脱机的桌面应用程序,更多平台,内置版本控制,内置设计资产市场,完整的协作编辑,图像效果,插件,可点击的模型,内置反馈和注释工具以及离线桌面应用程序。

继续阅读5个更好的原型制作工具......



翻译字数超限