web 原型设计工具

让我们以不分先后的顺序看一下当今可用于Web设计人员的一些原型制作工具：

1. 成帧器
2. Adobe XD
3. Adobe After Effects
4. Adobe Animate CC
5. Craft.io原型
6. 原理
7. 原子
8. 原型
9. 贾斯汀·明德
10. 折纸
11. 富林托
12. 网络流
13. 奇迹应用
14. 额外： Placeit

首先，向利益相关者和客户提出想法似乎很轻松，但是当事情变得困难时，我们需要工具来帮助加快反馈过程。 对于前端设计师而言，Web变得越来越复杂，具有越来越多的交互式请求。 滑动和拖动之类的动作只是冰山一角，弄清楚整个谜题如何组合在一起才是原型制作真正的艺术所在。

原型适合的地方

根据定义，“原型”是用来测试特定概念的早期示例。 原型用于评估和增强系统，以更好地了解整个项目。 我们每个人每天都在做项目，有些比其他项目复杂得多，但是什么时候该召唤一种工具来帮助反馈食物链呢？

有人会说代码的编写速度要快得多，但是有些时候，最好花时间使用原型，而不是花时间设计可能会很快落到路边的东西。 原型设计邀请您提供有关交互和放置的反馈。 这是一个交互式线框，可让客户更好地了解该项目如何适合其用户。

其他时候，在编码之前进行原型制作可以通过识别可能遗漏的任何边缘情况来帮助使项目受益。

原型设计和Web设计环境

当我们问自己今天适合什么情况时，我们绝对可以归因于对运动工作的需求不断增长。 接口正在成为具有交互内容的生物。 简单的交互可以随意地进行口头解释，但是在其他情况下，它有助于了解如何触发交互-越来越多的客户要求在签字之前先查看概念证明。 现在就比以往任何时候都重要，要有一个想法，在需要原型时应该转向哪里。

1.成帧器

• 加许可：$ 15 / mo（仅限Mac）
• 企业许可证：联系方式

Framer使可视化编辑具有代码灵活性，从而提供了无缝的工作流，并辅以设备预览，版本控制和简化的共享。 一个有助于开拓新的交互模式以创建突破性应用的应用。 从您最喜欢的API中提取数据，捕获实际用户输入以进行测试，并与实际用户和反馈进行合作。 直接从Sketch，Photoshop或Figma导入图形。

虽然Framer看起来好像严格用于移动应用程序，但也可以用于非应用程序项目，也可以用作独立库。 单独使用Framer JS库时，可以完全避免使用IDE 。 本质上，它是用于快速原型开发的开源JavaScript框架。 定义动画和交互，并包含滤镜，弹簧物理特性，3D效果等。 尽管不需要CoffeeScript，但是文档使用CoffeeScript和IDE。

应当知道，Framer并非用于创建可用于生产的动画。

@UXDesignDad @framer嗨，安德烈！ Framer是Mac的原型制作工具。 所以没有生产应用apps

— Krijn Rijshouwer（@krijnrijshouwer） 2017年2月2日

因为Framer有其自己的层次概念，并且在代码方面非常繁琐，所以不能像在GreenSock中那样在普通的（现有）DOM中使用它。 实际上，它在DOM中放置了自己的画布，所有动画都在该画布中运行。

• https://framer.com/features/handoff
• https://framer.com/getstarted/guide
• https://framer.com/pricing/2017
• https://framer.com/getstarted/import

2. Adobe XD

• 价格：需要Adobe的Creative Cloud帐户

绘制，重用和重新混合矢量和光栅图稿，以从同一应用程序创建线框，屏幕布局，交互式原型和可投入生产的资产。 使用功能强大的工具（例如专门为XD构建的Repeat Grid）以及用于UX设计的图层，符号和钢笔工具。 使用各种动画来添加交互，以在艺术面板之间创建过渡，以模拟您的应用程序/网站的流程。

当您直接共享时，客户可以直接在原型上发表评论，并在实际设备上实时查看设计。 可以跨平台调整设计并自动更新设计。 通过一个强大的工具，可以轻松地从线框图，视觉设计，交互设计，原型制作，预览和共享中进行切换。

3. Adobe AfterEfects

• 价格：需要Adobe的Creative Cloud帐户

还可以在Tuts +上查看这个由十部分组成的系列，称为Welcome to After Effects 。

4. Adobe Animate CC

• 价格：需要Adobe的Creative Cloud帐户

5.Craft.io原型

• 价格：免费。 需要素描$ 99.00

使用您的真实设计文件构建高保真原型。 Craft是Invision系列的一部分； 如今，一家公司从外部实体那里购买了许多工具（例如Macaw和Easee ）。

Craft Prototype是一组功能强大的工具，可让您使用真实数据进行设计，只需单击即可创建样式指南。 有了原型，您可以直接从Sketch完成这项工作； 全部集中在一个空间中。 通过实时镜像到手机，您可以立即测试设计原型。 准备好共享时，可以将您的工作直接发布到Invision，以获得来自客户和利益相关者的即时反馈。 它甚至使您可以通过运动以更高的保真度制作原型，从而为您提供了使用关键帧进行视觉调整的时间线。 为您的开发人员生成HTML和CSS，本机Swift代码和文档。 观看这段简短的视频，介绍Craft 2.0 Preview- Vimeo 上Sketch中的原型 。

6.原则

• 价格：129.00美元（仅限Mac）

Principle使设计动画和交互式用户界面变得容易。 无论您是设计多屏应用程序的流程，还是设计新的交互和动画，Principle都能使您创建外观和感觉都很棒的设计。 该应用程序看起来非常类似于Sketch for UI，包括对齐，画板创建和屏幕连接以及实时预览等其他熟悉的方面。 单击动画层可以更深入地研究关键帧并调整自定义缓动曲线，就像在其他动画工具中一样。 Principle可以让您自由进行实验，而不必局限于预定义的过渡，而且您还可以从Sketch导入画板。

适用于iOS的Principle Mirror应用程序使其他人可以在其设备上查看您的设计。 在设计时，您可以通过将设备插入计算机或导出独立的Mac应用程序供其他人查看来立即进行交互。

7.原子

• 入门级：$ 15 / mo
• 专业版：$ 25 /月
• 无限：$ 25 /月

Atomic是与Sketch集成的基于Web的应用程序，可让您从那里或您选择的任何位置导入设计。 将设计引入Atomic很简单； 使用功能强大的Sketch插件或从您喜欢的设计工具中添加元素。

Atomic具有内置的绘图和布局工具，可用于从头开始设计或在导入的设计基础上进行设计。 使用一系列适用于移动设备或台式机的手势和过渡来快速链接您的设计。 使用自定义CSS可以应用其他样式，还可以导出CSS与其他开发人员共享。 在其网站上了解有关Atomic功能的更多信息。

8.原始

• Freelancer $ 24 / mo
• 启动$ 40 /月
• 代理商$ 80 /月
• Corporate $ 160 / mo

使用Proto易于使用的时间轴为任何交互设计模式构建复杂的动画。 该应用程序带有一整套UI库，例如iOS9，Material Design，Windows 10等。 可以使用Sketch或Photoshop插件导入设计。 导入它们并与Dropbox同步。 直接导出UI资产。 使用适用于IOS或Android的原型应用程序在浏览器或设备中预览原型。 与客户或团队成员共享以进行协作并生成反馈。 Proto与领先的用户测试工具集成在一起，以获得强大的反馈和见解。

在Proto网站上了解有关其功能的更多信息。

9.贾斯汀·明德

• 专业版$ 19 /月
• 企业： 联系方式

JustinMind是一款基于应用程序的产品，用于将简单的模型转换为适用于iOS和Android的交互式原型，并创建Web和移动线框。 利用预构建的UI库，将HTML和文档嵌入您内心想要的任何东西。 付费帐户允许多个用户同时与同一个原型交互，从而轻松获得反馈。 它甚至具有广泛的预先存在的小部件库，这些库针对为您的项目选择的设备模板量身定制。 您可以使用交互式按钮，复选框，列表甚至视差布局之类的元素。

如果您是此工具的新手，它附带了出色的教程和指导视频，适用于从初学者到专家的每个人。 尽管它提供了免费的浏览器共享功能计划，但您必须升级到付费帐户才能在团队成员之间进行协作。 使用JustinMind Prototyper，您可以从任何设计工具导入图像，也可以直接从Web浏览器导入图像，然后使用“图像热点”工具将其转换为令人兴奋且引人入胜的Web原型。 将原型导出到功能齐全HTML文档中，并使其易于在任何Web浏览器中查看。

• https://www.justinmind.com/features

10.折纸

• 价格：仅免费Mac。

折纸由Facebook的设计师构建和使用，并已用于创建Instagram，Messenger和Paper等应用。 从Sketch复制任何内容并将本机图层粘贴到Origami Studio中。 快速调整，添加行为并为任何图层属性设置动画，而无需返回。 该工具为设计人员提供了UI模式常用的一系列手势和过渡动画。

Origami提供了用于交互式原型制作的有用功能，以及Sketch和Photoshop的插件以及论坛提供的文档库。

有一个“导出为代码”功能，可让您将视觉设计转换为iOS，Android或Web的书面代码示例。 尽管可以使用适用于Android和iOS的Origami Live预览原型，但不能与在自己设备以外的设备上操作的个人直接共享原型。 在Origami网站上查看教程以获取更多信息 。

11.弗林托

• 14天免费试用
• Flinto Lite； 基于网络的订阅$ 20 /月
• Mac App：99美元

Flinto for Mac是基于应用程序的工具，可让您创建从简单的点击式原型到具有交互功能的综合性原型的任何内容。 没有编程或时间表。 它是面向设计师的原型设计工具。 将对象和组件放置在所需的位置。 过渡可以是简单的，也可以是复杂的，并且过渡是可重用的。 您可以精确控制每个层，包括弹簧或三次贝塞尔曲线的松动。

使用“行为设计者”创建一个屏幕中存在的微交互。 这非常适合诸如按钮效果，切换开关，循环动画和基于滚动的动画之类的事情。

在屏幕上添加滚动区域也很容易。 选择图层，然后单击“滚动组”按钮。 您可以调整各种选项，创建分页滚动组，嵌套滚动组，甚至创建基于滚动的动画。

您在Flinto for Mac中所做的所有更改都可以在预览窗口中立即进行测试，或者使用免费的iOS查看器应用程序在连接WiFi的iPhone或iPad上进行测试。

Flinto的iOS查看器应用程序在App Store中免费提供，任何人都可以下载，因此您可以将Flinto文件发送给您想要共享的任何人。

• https://www.flinto.com/mac
• https://www.flinto.com/tutorial_videos
• http://blog.flinto.com

12. Webflow

• 入门级：免费
• 精简版：$ 16 /月
• 专业版：$ 35 /月

Webflow是另一个基于Web的应用程序，可直接在最新版本的Chrome和Safari中运行。 这意味着当前在上述浏览器中已对其进行了优化，但是生成的代码具有跨浏览器的支持。

“无需编写代码即可构建动态，响应Swift的网站。 一键启动，享受网络上最快，最可靠的托管。 导出干净的语义代码以移交给开发人员。”

Webflow专注于Web动画，交互和响应式Web设计。 Interactions 2.0即将面世，它将为跨断点的动画和交互提供更多控制（通常是设计人员所表达的痛点），当然还可以轻松实现可视化构建以及代码代理。

为了让您体会Webflow的可能性，请签出此实时演示 ，也可以在Webflow中查看该演示 ，或签出此CodePen演示中生成的代码。 在此视频中体验UI也很有帮助。

如果您在外部导出和使用它，或者将其交给开发人员，则产生的代码质量是语义的，易读的并且易于使用。 以下是一些演示产生的代码的演示。

当前可以使用Interactions V1 ，并且Interactions 2.0将包括更多的自定义视差类型动画和可视化内置的交互性。 基于光标/实时滚动位置的动画。 Webflow希望尽快推出Beta版，因此Interactions 2.0将成为界面的很大一部分，也是许多设计人员和开发人员使用Webflow的重要原因。

• https://wishlist.webflow.com/ideas/WEBFLOW-I-17
• http://3d-transforms.webflow.com
• https://webflow.com/prototyping
• https://webflow.com/feature/interactions-v2
• https://interactions.webflow.com
• https://flexbox.webflow.com

感谢Webflow的Waldo Broodryk，他花了时间回答我的许多问题，并分享了他的演示和知识。

13. Marvel App

• 免费（1个用户，2个项目）
• 专业版$ 12 /月
• 公司$ 48 / mo

基于Marvel的基于浏览器的编辑器使您可以将所有设计链接在一起，添加手势和过渡效果，以使原型看起来像真实的应用程序或网站。 为iPhone，iPad，台式机，Apple TV，Apple Watch和Android创建原型。

Marvel具有协作，评论等功能，并在浏览器中使用“画布”进行设计，此外，您还可以使用Photoshop，Sketch或笔和纸添加图像。 用户可以单击并拖动以在设计上创建交互式热点，这些热点在单击或触摸时会做出React。 Marvel附带了其他一些很酷的功能，例如Sketch插件 ，甚至是iOS工具 。 iOS应用程序现在包含Canvas（前面提到），Marvel的快速设计工具，使您可以从头开始创建应用程序模型。 该应用程序还包括Iconfinder和Unsplash ，它们为您提供了史诗般的数据库，其中包含超过一百万张照片和图标，可将其整合到您的设计中。

• https://marvelapp.com/design
• https://marvelapp.com/features
• https://marvelapp.com/sketch

14.额外：Placeit

• 订阅（休闲）：$ 29 /月
• 订阅（专业版）：$ 99 /月
• 订阅（视频）：$ 199 / mo
• 还提供图像下载包和单次购买

Placeit是一个模型生成器； 一个在线工具，可让您将自己的设计（包括UI设计，徽标，其他品牌资产）嵌入到演示环境中。 例如，您可能有一个应用程序设计，希望将其放置在iPhone的咖啡桌上，或将徽标叠加在模特的衬衫上。

也许您甚至希望将设计嵌入到这样的视频中：

拥有近3,000个模板并在不断增加，Placeit一定能满足您的需求。

• Placeit.net
• Placeit博客
• 地方新闻通讯

结论

无论您决定使用哪种工具，都请选择最适合您的工具和最舒适的工具。 如果您有提到的任何工具的经验，可以帮助他人尝试决定使用哪种工具，请在下面发表评论。 我希望本文能帮助您获得更多的见识，并在需要时做出明智的决定。

特别感谢这些人在我的研究过程中提供的投入，知识共享和观点：

翻译自: https://webdesign.tutsplus.com/articles/13-prototyping-tools-for-web-designers--cms-28254

web 原型设计工具