5个最好的原型设计工具来测试你的网络和移动设计

原型是设计过程中不可或缺的一部分,因为它可以让您和您的团队在项目的早期阶段审查概念并分享反馈。通过创建网站或移动应用的交互式模拟,您能够在投入太多时间或金钱进行开发之前,确定设计的流程和可用性方面的任何缺点。

虽然每个设计师对他们的模拟图都有一套独特的需求,但下面的每个工具都提供了创建高度互动概念所需的功能和灵活性,而无需一行代码。希望在阅读完我们的列表后,你能找到完美的工具来测试你的网页和移动设计。而且一定要查看我们的lorem ipsum工具列表,以帮助您的设计过程,太。

#5原型设计工具


  1. InVision–创建高度互动的模拟模型
  2. Framer-设计精心设计的用户体验流程
  3. Marvel-简化原型设计流程
  4. 折纸–将你的移动和网络项目创意变为现实。
  5. Proto.io-设计感觉真实的原型。


获取一些灵感
与我们的综述,什么使一个强大的网页设计组合的伟大的例子。

1. InVision

原型设计工具: invision

InVision是一款基于网络的原型设计工具,它允许设计师为网络和移动项目创建高度互动的模拟图。虽然您不能直接在InVision应用程序中创建设计,但您可以将您的静态页面设计上传到该工具中,然后添加热点,将其转化为完全互动的模拟图。此外,InVision还能够与您的Sketch或Photoshop文档同步,让您能够在您选择的设计套件程序中实时更新您的原型。

在功能方面,InVision拥有大量有价值的工具来促进您的工作流程,包括预览模式、创建热点的构建模式、将资产交给团队成员的检查模式、评论、版本控制和文件同步。它还提供了各种过渡动画和移动手势(滑动、点击等),可以帮助你将设计变为现实。InVision中我最喜欢的功能之一是它能够为任何设计元素创建悬停状态。这可以让您的原型更能代表最终产品,因为您可以添加高级交互性,例如下拉菜单和按钮的悬浮状态。

InVision 致力于创造资源,在处理设计项目时为用户提供增强的功能。最近,InVision宣布他们收购了Wake,一个专注于支持整个特定组织的设计可见性的设计工具。InVision 不断地更新和改进他们的产品。请查看他们的网站,了解最新的功能公告。

InVision 促进协作的能力是其最大的资产。团队成员、客户或在模拟图上共享的任何人都能够留下特定位置的评论和线程。这消除了来回电子邮件线程所造成的混乱,并有助于确保在需要的地方准确地实施更改。此外,通过InVision的Freehand工具,团队可以共同绘制,实时分享草图和粗略的想法。

TL;DR

理想的原型设计格式。 网络和移动端(Android和iOS)。 分享功能: 卓越的功能,包括特定地点的评论和实时协作。 支持资源: 深入的文件。 价格: 价格从一个项目的免费试用到每月25美元的无限制。对于团队计划,InVision的价格从5名团队成员每月99美元开始。他们还为大型团队提供企业计划

通过Shopify合作伙伴计划发展您的业务

无论您是提供营销,定制,还是网页设计和开发服务,Shopify合作伙伴计划都会让您获得成功。免费加入并获得收入分享的机会、发展业务的工具以及充满激情的商务社区。

注册

2. Framer

prototyping tools: framer

Framer是一款运行在macOS上的屏幕设计工具,需要编码,最好在创建动画或交互式原型时使用。使用Framer,你可以设计精心设计的用户体验流程,插入形状,添加文字,并重新定位图像。该工具具有广泛的功能,从设计、协作和原型设计,使其成为具有不同技能和要求的团队的理想选择。

Framer提供了一个一体化的设计工作流程,其设计工作空间配备了一个矢量编辑工具包,可以轻松地将每个框架和形状导出为位图或矢量。Framer还有一个代码工作区,用于添加动画、手势和组件。您可以通过右键点击复制CSS或复制SVG来导出生产就绪的代码。

在设计工作区中,你的作品可以做成响应式的,这样就可以为各种设备进行设计。在Framer内部编程时,可以在应用内部轻松访问文档。这包括层、动画、状态、事件等的代码和构建块。编程是用CoffeeScript语言完成的,这是一个更容易理解的Javascript版本,创建者将其描述为,”试图以简单的方式暴露JavaScript的好部分”。

当你准备好与你的团队或利益相关者分享你的工作时,你可以复制和粘贴资产或导出你的整个画布。由于它是一个基于浏览器的工具,任何设计的东西都是针对网络优化的。对于需要协作的项目,可以通过交换评论和上传原型到Framer Cloud来完成。

如果你想试用Framer,有一个14天的免费试用期,可以让你完全使用该工具的所有功能,不需要信用卡。除了免费试用版,Framer还提供了个人计划和多个团队计划,以满足不同数量的用户需求。

无论你是想设计应用图标、插图,还是改造公司的整个设计系统,Framer都能提供帮助。

TL;DR

理想的原型设计选项: iOS,Android和Web。 共享功能。 预览项目,将工作上传到Framer云,并将原型作为本地应用程序向客户演示。 支持。 指南、教程、资源、实例以及在线和离线社区。 价格: Framer的个人计划每月12美元,按年计费,团队计划每月250美元至750美元不等,还有定制的企业计划。**Framer的个人计划每月12美元,按年计费,团队计划每月250美元至750美元不等,还有定制企业计划。

你可能也喜欢: 如何使用Shopify主题设置来创建移动标识。

3. 惊奇

原型设计工具:marvel

Marvel是一款优秀的基于移动和网络的原型设计工具,它在简化原型设计过程方面表现出色。只要你注册了Marvel账户,你就会立即进入界面,并开始创建你的第一个原型。从那里,你可以轻松地将你的图像文件上传到Marvel中,并开始添加手势和过渡。该平台支持直接上传某些图像文件类型,包括PSD、GIF和JPG,也支持通过Google Drive、Sketch或Dropbox进行第三方上传。

虽然Marvel并没有提供其他软件中那种完整的图片编辑功能,但它有一些基本的功能,比如背景颜色的改变和图片大小的调整。在创建原型时,你还可以访问8个不同的项目框架。这让您可以放心,您的模拟图已经针对您设计的特定设备进行了全面优化。

万科的移动配套应用可能是该工具最酷的功能。如果你是一个喜欢在纸上开始项目的设计师,该应用程序可以将你的草图变成原型,只需拍摄照片。你的照片会自动与你的Marvel账户同步,让你在Photoshop或Sketch中设计一个布局之前,就能快速创建模拟图进行实验。

Marvel不仅使用简单,而且也很容易学习。他们的网站上有完整的FAQs,视频和书面教程,以及一个定期更新的博客。Marvel也是一个蓬勃发展的设计师社区,他们定期分享他们的原型设计,以帮助激发其他人的工作流程。

虽然Marvel的简单性可能会限制一些设计师所需的功能,但其较低的入门门槛和配套的应用程序使其成为快速启动和原型设计的完美工具。

TL;DR

理想的原型设计选项。 网络和手机(Android和iOS)。 共享功能: 可以共享和协作团队计划及以上。 支持: 常见问题解答、思想领袖博客和访问社区创建的内容。 价格: Marvel提供了四种不同的计划,单用户最多可以在两个项目上工作的免费版本,一直到包含6个用户的公司计划每月84美元。如果你愿意支付更多的费用,还有月度定价计划,提供额外的功能和用户。

你可能也喜欢: 什么是设计冲刺,你应该运行它们?

4. 折纸工作室

原型设计工具:折纸

Origami Studio是Facebook旗下的原型设计工具,曾被用于为Instagram、Messenger和Paper等多个应用创建模拟图。虽然Origami只为Mac用户保留,但它提供了在Android和iOS设备上实时预览原型的功能。该工具还为设计师提供了一套移动UI模式常见的手势和过渡动画–其中很多都可以通过下载的示例文件获得。

Origami为交互式原型设计提供了一些有用的功能,包括从Sketch中复制任何东西并将其粘贴为本地图层,以及一个广泛的文档库,其中包括论坛、视频教程和指南。在展示许多微交互时,Origami Studio非常有用,因为它们可以以高细节的方式可视化,以确切地展示某些东西将如何工作。

你可以通过配套的应用程序Origami Live,直接在iOS和Android设备中快速测试你的交互式移动原型。您只需从苹果应用商店下载该应用,然后将您的iOS设备插入桌面,瞧!–您就拥有了一个交互式移动工作环境。Origami的协作能力比我们提到的其他工具更有限,因为你只能将原型分享给手机上有Origami Live的人。

TL;DR

理想的原型设计格式: Web和移动端(Android和iOS)。 分享能力: 缺乏与队友的强大分享能力。 支持: 一些文档,包括教程和示例文件,以及一个非常活跃的用户社交社区。 价格: 免费

5. Proto.io

prototyping tools: protoio

Proto.io是一款基于网络的设计工具,用于为移动、网络平台、Apple Watch和游戏等多种界面创建完全交互式的原型。它是由SNQ Digital的实验室部门为用户体验专业人士、交互设计师、移动设计师和应用爱好者开发的。

Proto.io提供了一个熟悉而直观的拖放式用户界面,无需编码,使任何人都可以使用。它能够在不同的屏幕上创建图层,使原型的工作变得更加容易。Proto.io中的设计可以快速完成,因为整个交互库已经集成,可以随时应用到屏幕的任何一层。开发团队不断为产品引入新功能。他们最近推出了Overflow,这是一个面向设计师的用户流程图工具。

你可以在编辑器中直接预览动画,因为你正在制作你的动作设计,与Dropbox同步任何资产,通过JavaScript创建交互,并从Sketch/Photoshop导入。Proto.io允许一键分享,也可以通过公共链接分享,该链接可以在网络和手机上打开。这些共享链接包含了隐私设置,所以只有您赋予权限的人才能访问它们。

TL;DR

理想的原型设计格式: 众多的设备和屏幕,除了web和移动应用程序。 分享功能: 可以分享原型的实时版本和快照。 支持: 免费的在线网络研讨会,配备用户指南的帮助中心,电子邮件支持,论坛式的帮助。 价钱: 24美元/月,付费。 24美元/月,每年支付5个活动项目的费用。还有更高价格的计划,10、15或30个活跃项目,以及15天免费试用。

模板图标

增长您的技能的资源

将免费的《买方原型工具指南》直接发送到您的收件箱中。

电子邮件

免费获取副本

_通过输入您的电子邮件 – 我们也会向您发送与Shopify相关的营销邮件。您可以随时取消订阅。

我们的虚拟齿轮正在转动。

请注意,它可以采取
我们的电子邮件15分钟
以达到您的收件箱。

发表评论 0

Your email address will not be published. Required fields are marked *