测试你的网页和手机设计的5个最佳原型工具

原型设计是设计过程中不可或缺的一部分，因为它可以让您和您的团队在项目的早期阶段审查概念并共享反馈。通过创建网站或手机应用的交互式模型，你可以在投入太多时间或金钱开发之前识别设计流程和可用性中的任何缺点。

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

获得一些灵感with我们总结了一些优秀的例子网页设计作品集。

1.InVision

InVision是一个基于网络的原型设计该工具允许设计人员为web和移动项目创建高度交互的模型。而你却不能直接在InVision应用程序中创建设计，您可以将静态页面设计上传到工具中，然后添加热点将其转换为完全交互式的模型。此外，InVision具有与您的Sketch或Photoshop文档同步的能力，允许您在选择的设计套件程序中实时更新原型。

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

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

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

博士TL;

理想的原型格式:Web和移动(Android和iOS)
分享功能:出色的功能包括特定位置的评论和实时协作
支持资源:深入的文档
价格:价格范围从一个项目的免费试用到每月25美元的无限试用。对于团队计划，InVision的起价为每月99美元(5名团队成员)。OB欧宝娱乐APP他们还为大型团队提供企业计划

2.筹划者

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

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

在设计工作区中，您的工作可以响应，因此可以针对各种设备进行设计。当在Framer中编程时，文档很容易在应用程序中访问。这包括代码和层，动画，状态，事件等的构建块。编程是在CoffeeScript它是Javascript的一个更易于访问的版本，创建者将其描述为“试图以一种简单的方式展示Javascript的优点”。

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

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

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

博士TL;

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

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

3.奇迹

奇迹是一个伟大的移动和基于web的原型工具，擅长于它的能力简化原型设计的过程。一旦你注册了你的漫威账户，你就可以立即进入界面，开始创建你的第一个原型。从那里，您可以轻松地上传您的图像文件成惊叹并开始添加手势和过OB欧宝娱乐APP渡。该平台支持直接上传某些图像文件类型，包括PSD、GIF和JPG，以及第三方通过Google Drive, Sketch或Dropbox上传。

虽然Marvel没有像其他软件那样提供完整的图像编辑功能，但它确实有一些基本的功能，比如改变背景颜色和调整图像大小。在创建原型时，您还可以访问8个不同的项目框架。这可以让你放心，你的模型是完全优化的特定设备，你正在设计。

漫威的移动配套应用可能是这款工具最酷的功能。如果你是一名喜欢在纸上开始项目的设计师，只需拍张照片，这款应用OB欧宝娱乐APP就可以将你的草图变成原型。您的照片会自动与您的Marvel帐户同步，允许您在Photoshop或Sketch中设计单个布局之前快速创建模型进行实验。

Marvel不仅易于使用，而且易于学习。他们的网站上有常见问题解答，视频和书面教程，以及一个定期更新博客。漫威也是一个繁荣的设计师社区的家园，他们经常分享他们的原型设计帮助启发其他人的工作流程。

虽然漫威的简单性可能会限制一些设计师想要的功能，但它的低入门门槛和配套应用程序使它成为起床和起床的完美工具原型设计很快。

博士TL;

理想的原型选择:网页和移动设备(Android和iOS)。
分享功能:能够分享和协作团队计划及以上。
支持:常见问题解答，思想领袖博客，以及访问社区创建的内容。
价格:奇迹了四种不同的计划，提供免费版本，供单个用户最多处理两个项目，而包含6个用户的公司计划每月84美元。如果你愿意付更多的钱，也有附加功能和用户的月度定价计划。

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

4.折纸工作室

折纸工作室是一个facebook拥有的原型工具，用于创建几个应用程序的模型，包括Instagram, Messenger和Paper。虽然Origami只对Mac用户开放，但它提供了在Android和iOS设备上预览原型的功能。该工具还为设计人员提供了一套移动UI模式常用的手势和过渡动画，其中许多都可以通过可下载的示例文件。

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

你可以直接在iOS和Android设备上使用配套应用Origami Live快速测试你的交互式移动原型。你所需要做的就是从苹果应用商店下载这款应用，然后把你的iOS设备连接到你的桌面，瞧!-你有一个互动的移动工作环境。Origami的协作能力比我们使用的其他工具更有限提到的,因为你只能将原型分享给手机上有Origami Live的人。

博士TL;

理想的原型格式:Web和移动(Android和iOS)
分享功能:缺乏与团队成员的可靠共享功能
支持:一些文档包括教程和示例文件，以及一个非常活跃的用户社交社区
价格:免费的

5.Proto.io

Proto.io是一个基于网页的设计工具，用于为许多界面(包括手机、网页平台、Apple Watch和游戏)创建完全互动的原型。它是由SNQ数字实验室部适合用户体验专业人士、交互设计师、移动设计师和应用程序爱好者。

Proto.iooffers a familiar and intuitive drag-and-drop UI with no coding required, making it accessible to anyone. It has the capability to create layers on different screens, making working on a prototype much easier. Designing in Proto.io can be done很快,因为整个交互库是集成的，可以应用到屏幕的任何一层。开发团队不断地引入新功能到产品。他们最近推出了溢出，为设计人员设计的用户流程图工具。

你可以在编辑器中预览动画，当你制作你的运动设计，同步任何资产与Dropbox，通过JavaScript创建交互，并从Sketch/Photoshop导入。Proto.ioallows for single-click sharing, as well as sharing via a public link that can be opened in both网络在移动端也是如此。这些共享链接包含隐私设置，所以只有那些你授予权限的人才能访问它们。

博士TL;

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