[译文]13 款为网页设计师准备的原型工具

2017-04-17 16:50:00

让我们看一下目前可供网页设计师选择的一些原型工具，排名不分先后：

Framer
Adobe XD
Adobe After Effects
Adobe Animate CC
Craft Prototype
Principle
Atomic
Proto
JustinMind
Origami
Flinto
Webflow
Marvel App

最初向项目相关人员或者客户提出想法看似不费吹灰之力，但是当事情变的困难的时候，我们就需要借助工具来帮助加速反馈进程。对于前端设计师来说网页正在变的越来越复杂，需要引入更多的交互需求。像拖拽(drag)与轻扫(swape)这样的动作仅仅是冰山一角，弄清楚如何将整个拼图拼凑到一起才是真正的原型交互艺术所在。

原型的适合场景

顾名思义，“原型”是用来测试特殊概念的早期样本。原型用来评估和提升系统以便从全局角度来更好地洞察项目。我们每天都会做项目，其中一些要比另外一些更为错综复杂，但是什么时候才需要使用工具来帮助我们实现反馈食物链的援助呢？

有些人认为代码可以更快的开始，但是有时候与其花费时间写那些有可能付之东流的代码，不如花时间使用一个原型。原型为交互和放置提供反馈。它是一个交互线框图，让客户更好的理解项目是如何整合到一起呈现给用户的。

另外，在写代码之前做原型可以通过找出任何可能错过的边缘情形帮助项目受益。

原型制作以及网页设计场景

当我们问自己当今的场景设计在什么地方更为应景，我们肯定会归功于动效工作需要的日渐兴起。界面随着交互内容的出现更为生机勃勃。简单的交互可以进行老套的口头解释，但是在其他一些情形下，它有助于获得交互如何被触发的观点，并且客户现在需要在签收认可之前看到这些概念的验证。现在比以往任何时候，对于在哪里，在什么时候需要出现原型的想法都尤为重要。

目前市场上众多可用的工具，哪一款是你应该使用的？让我们来看看。

1. Framer

高级许可：$15/每月 (仅限Mac)
企业许可: 联系开发团队

Framer借助熟悉的可视化灵活代码编辑，通过设备预览，版本控制以及简单化的分享，提供了一套连贯的工作流程。这是一款帮助开创全新交互模式来创建革新应用的程序。从你喜欢的API调入数据，捕捉真实的用户输入进行测试，以及与实际用户协作并获取反馈。可以从 Sketch，Photoshop 以及 Figma 直接导入图形。

尽管 Framer 可能看上去像是直接服务于移动app的，但是它也可以用于非app项目，或者作为独立的库使用。当单独使用 Framer JS库的时候，你可以完全避开IDE。本质上它是一款开源的用来进行快速原型开发的Javascript框架。可以定义动画和交互，使用筛选器完成动作，弹性物理引擎，3D效果以及更多。尽管 CoffeeScript 不是必须的，但是文档中使用了 CoffeeScript 以及 IDE。

你应该清楚，Framer 并不意味着可以用来创建满足各种生产环境（production-ready）的动画。

@UXDesignDad @framer 嘿，Andre! Framer 是Mac上的一款原型工具。因此没有生产力应用。
— Krijn Rijshouwer (@krijnrijshouwer) 2017年2月2日

由于 Framer 有自己的独立的图层概念并且重度依赖代码，你不能在纯（现有的）DOM中使用它，比如像你可能在GreenSock上做的那样。事实上，它在DOM中有自己的独立的画布，所有的动作都是在这个画布中运行。

2. Adobe XD

Adobe XD

价格：需要 Adobe’s Creative Cloud 账户

绘画，再利用，以及混合矢量图形及光栅影像来创建线框图，屏幕布局，交互原型以及满足各种生产环境（production-ready）的资源全都来自同一款应用。使用强大的工具进行UX设计，比如XD独有的重复网格（Repeat Grid）工具，图层（layers），元件（symbols），以及钢笔工具（pen tools）。使用不同的动画交互来创建画板之间的转场，从而进行app应用或者网站的流程模拟。

当你直接进行分享的时候，客户可以直接在你的原型上进行批注，并且可以在实际设备中进行实时预览。调整设计可以在不同平台上进行自动更新。线框图，视觉设计，交互设计，原型，预览以及分享可以轻松切换，非常强大的一体化工具。

虽然XD仍然是一款测试产品，但是如果它会为可预见的未来进行持续开发的话，我们还是拭目以待的。你可以从这里阅读更多关于功能的发布，包括即将带来的变化和增强功能。我们甚至发表了15个系列课程，覆盖了所有你需要开始使用Adobe XD进行设计和创建原型的基本工具。

3. Adobe AfterEffects

价格：需要 Adobe’s Creative Cloud 账户

After Effects 不是一款专门为网站和应用开发的原型工具，但是它的确可以帮助那些寻求某种方式为客户进行动效模型绘制的人创建原型动效。为视频创建运动图形或者为网页创建动态效果。Tuts+ 上有一篇 Charles Yeager 写的非常棒的文章：

Also checkout this ten part series on Tuts+ called Welcome to After Effects.

4. Adobe Animate CC

Adobe Animate CC

价格：需要 Adobe’s Creative Cloud 账户

Adobe Animate 是 Flash专业版的进化。它包括这些功能，比如时间线，帧，大量的导出选项，支持第三方JavaScript库，摄像头定位调整以及更多。虽然它更多的对准动画师，但是不要愚蠢的以为它不能用于其它需求。记住，这个工具只有你想不到的，没有它做不到的。使用它绘制网站线框图，为app进行动效测试以及更多。你可以仔细读一下关于Adobe Animate内部工作原理的这篇文章：

5. Craft Prototype

Craft Prototype

价格：免费。需要Sketch，99美元

使用高保真原型创建你真实的设计文档。Craft属于Invision家族；一家拥有许多来自于外部工具（比如 Macaw 和 Easee）的实体公司。

[Craft Prototype](https://www.invisionapp.com/craft# prototype) 是一款强大的工具合集，可以让你使用真实的数据进行设计，一键创建样式指南。你可以在Sketch工作区的右侧进行原型创作，全都是一个空间里。通过实时连接你的手机同步测试你的设计原型。当你准备好进行分享的时候，你可以直接发布你的作品到Invision，即时获取你的用户或者团队成员的反馈。它甚至可以让你制作及其精准的动效，通过使用带有帧的时间线进行视觉上的调整。生成HTML及CSS，原生的swift代码，以及给开发者的文本。观看Vimeo上的这个短视频 Craft 2.0 预览 - 在sketch中进行原型创作了解更多。

6. Principle

价格：$129.00（仅限Mac）

Principle 让设计动态和交互的用户界面更为容易。无论你正在设计一款多屏App的流程，还是全新的交互和动效，Principle都会让你创作设计的时候倍感惊喜。这款应用和sketch的界面非常类似，包括熟悉的对齐，画板创建，屏幕连接，以及实时预览。点击动作图层可以深入到帧以及调整自定义缓动曲线，就好像你在其它动画工具中那样。Principle通过不限制你的预设过渡带给你一种非常自由的体验，并且你可以从Sketch直接导入画板。

Principle Mirror 是一款iOS应用，可以让你在其它设备上查看你的设计。当你做设计的时候，你可以将设备连接到你的电脑上进行即时交互，或者导出到一个独立的Mac应用让其他人查看。

7. Atomic

Atomic

新手：$15/每月
专业：$25/每月
无限：$25/每月

Atomic 是一款网页应用，与Sketch整合，允许你按需从任何地方导入设计。将设计导入Atomic非常简单，使用强大的SKetch插件或者从你喜欢的设计工具中直接拖拽过来。

Atomic 有内建的绘画和布局工具可以让你从头进行设计或是基于导入的设计进行继续创作。使用一系列的手势和过渡快速连接你的移动或桌面端设计。使用自定义的CSS应用额外样式并且可以导出CSS分享给其他开发人员。你可以到他们的网站上阅读更多关于Atomic的特性。

8. Proto

Proto

自由职业：$24/每月
创业公司：$40/每月
代理公司：$80/每月
公司：$160/每月

使用Proto易用的时间线可以创建精准的动画给任何交互设计模式。这款应用内置一系列UI库，如iOS9，Material Design，Windows 10以及更多。可以通过Sketch或Photoshop插件导入设计，导入图层并和Dropbox进行同步。直接导出UI资源。使用iOS或者Android版本的Proto应用在浏览器或者设备上预览原型。与客户或者团队成员共享协作与反馈。Proto集成领先的用户测试工具来获取强大的反馈与洞察力。

可以前往 Proto 网站了解更多特性。

9. JustinMind

JustinMind

专业版：$19/每月
企业版：联系开发团队

JustinMind是一款基于app的产品，将简单的视觉稿转换成iOS和Android的动态交互原型。得益于内建的UI库，内嵌HTML和文档，你可以随心所欲创建任何内容。付费账户允许多用户同时协作同一原型，获取回馈毫不费力。它甚至还有一个为设备模版量身定制的预设小部件的扩展库供你的项目选择。诸如交互按钮，复选框，列表甚至视差效果布局等元素都可供你使用。

如果你是初次接触此款工具，你可以查看这个非常棒的全套教程引导视频，它可以帮助任何人从新手成为专家。虽然它提供免费计划版本，但是如果你想和你的团队成员进行线上协作，你就必须升级到付费账户。使用JustinMind 原型工具你可以从任何设计工具导入图片，或者直接从网页浏览器导入，通过 ”image hotspot“ 工具将它们转化成令人振奋的网页原型。导出你的原型到具有完整功能的HTML文档并且可以在任何浏览器中进行查看。

https://www.justinmind.com/features

10. Origami

价格：免费，仅限Mac

Origami是为Facebook设计师们建造和使用的，它已经用来创建诸如Instagram, Messenger 和 Paper这样的应用。从Sketch拷贝并粘贴原始图层到Origami。快速调整，添加行为，并且为任何图层添加动效。该工具为设计师提供了一系列UI模式通用的手势和过渡动画。

Origami为交互原型提供了有用的功能，具备Sketch和Photoshop插件，并且在论坛里有一套完整的文档库。

这里有一个 “导出到代码” 的功能可以将你的设计转换成可用于iOS, Android, 或者网页的代码样例。你只能在你自己的设备上进行原型分享，但是你可以通过Origami Live预览你的原型，这款应用提供Android和iOS版本。前往Origami网站查看更多教程。

11. Flinto

Flinto

免费14天试用
基于网页的Flinto简版，订阅费 $20/每月
Mac应用：$99

Flinto Mac版本是一款基于App的工具，容许你创建任何内容，从简单的触碰原型，到复杂的具备交互功能的原型。没有程序和时间线，这是一款专门以设计师为核心的原型创建工具。根据你的意愿放置你的物件和组件。过渡效果可以简单也可以复杂，并且是可以再利用的。你可以精确控制每个图层，包括spring或cubic-bezier曲线。

使用 “behavior designer” 工具创建存在于同一屏幕内的微交互。这个功能对于像按钮效果，切换，循环动作以及基于滚动的动画非常棒。

在你的屏幕上添加滚动区域也非常容易；选择图层，点击“scroll group”按钮。你可以修改不同的选项，创建页面滚动群组，嵌套滚动群组，甚至创建基于滚动的动画。

所有你在Flinto Mac版本中的改动都可以在预览窗口中进行即时测试，或者通过免费的iOS预览软件在WiFi连接的环境下在iPhone或iPad中查看。

Flinto iOS预览应用可以在App Store中免费下载，这样你就可以将你的Flinto文件发送给任何你需要共享的人。

12. Webflow

Webflow

新手：免费
简化版：$16/每月
专业版: $35/每月

Webflow 是另一款基于网页的应用，可以直接在最新版本的Chrome和Safari中运行。这意味着该应用为这些浏览器进行了优化，但是创建出来的代码是跨浏览器支持的。

“无需编写代码创建动态，响应式的网站。一键启动，享受快速，最值得信赖的主机。导出简洁，语义化的代码给开发人员。”

Webflow重度聚焦于网页动画，交互以及响应式网页设计。Interactions 2.0 即将发布，并将提供基于跨断点（通常是设计师的痛点）的动画和交互的更多控制，当然还有创建视觉和代理代码的易用性。

为了让你见识一下Webflow的可能性，请查看这个在线视频，也可以在Webflow中预览，或者在Codepen演示中查看具体代码。你也可以观看该视频体会一下UI的好处。

生成的代码是具有语义的，简洁的，如果你要导出用于外部使用或者交给开发者也很容易上手。这里有一些示例展示生成的代码。

目前 Interactions V1 版本正在使用中，而 Interactions 2.0 版本将带来更多可自定义的视差类型动作以及视觉交互，还有基于鼠标／实时滚动位置的动画。Webflow希望能够尽快发布测试版本，这样 Interactions 2.0 将会成为界面上一个很大的组成部分，也会成为许多设计师和开发人员使用Webflow的重要诱因。

感谢来自 Webflow 的 Waldo Broodryk 抽出时间回答我的众多问题，并且分享了他的示例以及知识。

13. Marvel App

免费版：1人，2个项目
专业版：$12/每月
企业版：$48/每月

Marvel 是一款基于浏览器的编辑器，允许你将所有的设计关联起来，添加手势和过渡让你的原型更像一款真实的应用或者网站。为iPhone, iPad, 桌面端, Apple TV, Apple Watch 以及Android创建原型。

Marvel具有这些特性：协作，评论，使用“Canvas”在浏览器中进行设计，使用Photoshop, Sketch或者笔和纸添加图片。用户可以点击并且拖拽来创建设计中的交互热点，当这些设计被点击或者触碰的时候会做出反应。Marvel还有一些其他非常酷的特性，比如Sketch插件和iOS工具。iOS应用现在包括了Canvas（之前提到的），Marvel的快速设计工具可以让你从头创建一款app应用视觉稿。这款应用还包括 Iconfinder 和 Unsplash，供你使用成千上万的图片以及图标应用到你的设计中去。

Marvel 还具备这些特性：用户角色，使用文件夹组织项目，使用Google Drive同步设计，以及使用选项从YouTube, Spotify, Vimeo 和 SoundCloud嵌入视频和音频。