首先，对于现代设计师来讲，它已然成为了不可不具备的设计工具当中的一个。其次，各家原型设计工具都在暗暗地产生一些变动，以此迎合设计师们的要求Then，纷纷研发出了针对原型的插件。再者，存在着传统的桌面端原型工具，还有基于云平台的工具。然后，尽管并没有任何一条标准去规定你一定要使用哪一款工具，但是，怎样能够在众多的原型工具的组合里寻觅到最契合自己的工作流程，进而提升工作效率，这同样是一件耗费时间的工作。

于是乎最近摹客的那些小伙伴们用心地为大伙梳理出了一个，关于原型工具的集合，期望能够助力各位出色的设计师朋友们寻觅到契合自身的工具搭配，进而提升工作效率。

长久以来，在能够相互进行交流这个方面从来就不断被人指责。官方好像更期望把这些功能留给第三方的开发者去用来制作插件，自己安安静静地去做一个规模小但是很精致的绘图软件。而在今年进行更新的版本里面，它同样能够支持在自身内部开展轻量级的原型设计了。这对于众多的粉丝讲毫无疑问就是一件好事。

原型交互方式：

其里的原型来展开设计是凭借画板，还有热区链接达成页面间的跳转，以此得以实现动态交互的原型，这类似原型设计软件里的拖拽式链接点。可是，不得不去吐槽的一点在于，链接线添加过多会致使你眼花缭乱。

预览方式：

1） 支持在软件内部预览（类似于中F5本地预览）。

2） 内实时预览（ USB 连接或同局域网内预览操作）。

3）Cloud处在实时状态下，可以进行预览，具体是登录Cloud之后，能够把项目文件上传到官方云端，达成在线多人一起预览的效果，并且还能够展开讨论 。

缺点：

链接线过多会导致体验不好。

链接过渡效果有限。

相关资源：不可错过的19款线框图套件

1. +

它是一款能实现更快且更简单的原型设计的工具，自发布之后，深受国内外用户喜好，它适合软件团队，以及个人在软件开发的设计阶段去使用，其具备简单快速的交互功能，能够将设计很好地表达出来，助力设计师做到「关注设计，而非工具」。随着越来越多设计师对于协作功能有需求sketch官网，他们还推出了适合多人协作的团队版和企业版，为更多软件开发/设计团队提升了工作效率。

原型交互方式：

1） 下载 插件

第2点，当在其中进行操作时，拉住组件后面的链接点来拖动，借此达成组件和它组件这种情况的交互效果，还有组件与页面之间的交互效果，以及组件自身状态的交互效果，通过一拉一放的动作，达成3秒内的快速交互 。

预览方式：

具有8种预览途径，涵盖软件内部通过F5进行本地预览，在线发布成为HTML网页、微信小程序（借助搜索小程序），以及手机客户端（）利用扫描二维码这般形式 。

2. 摹客iDoc +

首先，是在达成交互快、设计快且演示快、上手快这样一种敏捷开发（Agile ）的大趋势以后，摹客团队于今年9月份推出了摹客iDoc。然后，朝向着更高效的产品协作设计平台方向去发展。接着，与的结合，致使其在原生原型设计以及摹客iDoc里实现高保真原型设计都极为高效、方便。

原型交互方式：

在摹客iDoc里，按压住鼠标于设计稿之上绘制出一个矩形的热区，随后松开鼠标借助左侧项目树挑选热区跳转的目标页面，如此便能完成交互跳转链接的设置。对于设置妥当的交互链接而言，还能够设置跳转动画，存在9种动画样式可供选择，默认状态下是没有动画的。并且还能够借助下拉框或者直接输入数值来修改动画执行的时长。

预览方式：

置于摹客iDoc里，轻点顶部那处导航栏右边的播放按钮之时，便能够去演示交互原型。在手机项目当中同样可生成那种二维码经由手机扫描来查看 。

3. Craft +

制作高保真原型之际，多数时候都得从和上传内容着手。那么你必定会遇上一个问题，即得往界面里填入好多真实的图片。这般过程极为耗费时间，有无能够节省时间的法子呢？当然是存在的，那便是Craft。

Craft是一款功能强大的插件，该插件不仅具有输出视觉规范（倾向于此）的功能，还具备复制并排列物件、定义间距、文本/图片自动填充以及对重复元素自动填充等很酷的功能。当你把这个插件安装到特定位置时，你能体验到工作的连续性。把设计和原型制作流程相结合，就能快速输出高保真原型。

原型交互方式：

可从官网的介绍知晓，其原型设计方式同样是借助添加链接的办法，于界面元素里给画板添加链接，设定过渡动画并且添加微交互，把静态画面转变为交互原型。

预览方式：

软件内部播放按钮预览。

4. +

凭借其能够创建一些小型交互以及动画，进而达成多屏应用的整体流动（Flows）。借助它，能够极为迅速地构建跳转与转场动作。对于新手来讲，直观清晰，待习惯了使用后就会觉得格外顺手，菜单、工具以及选项皆变为最小化状态。运用它完全能够设计出令人记忆深刻的原型，防止陷入具备过多特点的状况，致使分散用户注意力 。

原型交互方式：。

能迅速达成交互设计，实现无缝对接，凭借插件就能将素材径直导入里面，增添链接与过渡效果，或者增添自动跳转。把图片上传，添加热点配合对应的交互动作，快速地生成原型，便利客户借助网页或者手机端来观看。

预览方式：

1） 点击软件内部播放按钮

其二，于处于同一局域网的手机以及电脑的环境下，去进行 iOS 手机端 App 预览的下载操作 。

5. +

它和有诸多相似之处，作为一款原型设计工具，其设计方式独具特色，较为侧重于转换制作的时间轴线路以及屏幕间的交互，对于有着不同习惯的设计师而言，有人青睐这种设计方法，而有人则更倾向于使用像中的或者中的Auto-Code（自动编程）。

原型交互方式：

它能够胜任，可以方便地为多屏App制作流动，或者专注于微交互这两种任务。与本文介绍的其它工具比，缺少一点润色。作为一款与众不同的原型设计工具，它的原型设计方式略微特殊。

1） 下载插件，导入素材

2） 建立过渡和交互动作

3） 用延迟和曲线来打磨动画

4） 添加滚动/分页/拖拽

预览方式：

1） 软件本地预览

2） 下载 手机预览

缺点：

1）画图不方便，所以建议大家在中做好图，再导入到中

2）不能在当前页中做动画。

3）处于中的素材没办法随意去进行尺寸摆弄，仅仅能够借助左侧面板那儿的scale选项来开展宽度、高度方面的变动，会有标点符号。

6. Axure +

众人皆知，Axure是一款老牌设计软件，它作为专业原型设计工具，能够快速且高效地创建原型，然而要输入高保真原型，就得把视觉设计师在其中制作好的矢量素材，像是图标、控件、按钮等，导入到Axure中，以此提高交互设计的效率。

原型交互方式：

一开始要将插件安装妥当，把选中的素材予以选定，接着点击菜单里的“Copy”。就一般的交互情形而言，于Axure里能够借由弹窗去逐个进行筛选设置，前往属性面板那儿予以筛选目标页面sketch官网，（假若页面数量较多的话就会略显麻烦）。稍微复杂些的交互，那就得依靠条件生成器来达成。Axure在交互设置这块儿，可以增添条件判断，不过这得用户具备一定的编程常识才行，不然的话掌握起来会存在相当大的难度。特别是在初次加以使用的时候。

预览方式：

本地发布预览

7. +

这是一款免费的原型设计Web应用，它能够开展网页设计，还能进行移动端的UI设计。它依据你设计好的PSD或文档，意思是你的视觉稿不用转换格式就能使用，当然线稿图（.jpg或.png）也行，导入后开展后续的交互设计。

原型交互方式：

经过插件把画板同步到，选定界面元素，将其通过热点（）与目标画板相连，设置页面的转场方式以及操作手势。因不像连线方式那般直观，故而容易致使逻辑错乱。

预览方式：

1） 直接在web页面中进行可交互的原型展示。

2） 生成URL通过邮件分享。

8. +

有的原型设计工具能够支持调用系统键盘，输入真实文本供其作为数据使用，也有的支持针对音频、视频进行真实的控制与监听，还有的对 HTML、CSS 以及其他方面有着无缝支持，单单音频和视频就有数十种属性和事件可被拿来运用，然而这款原型设计工具与其他几款不同，它可能是最特别的一款，因为它要求设计师具备代码能力，并且它制作出来的原型最接近真实效果 。

原型交互方式：

,X中原型设计的直观性变得更强了，仅仅通过点击几下就能构建出基本级别的交互，而将画板从中复制之后粘贴到中，运用“链接”工具加上推送以及叠加这类的过渡，或者借助多向手势去创建嵌套滚动视图 。

预览方式：

1） 本地预览

2） iOS/手机镜像预览

总结

以上便是一些相对较为常见的原型设计工具组合，当然，存在许多我们未曾罗列出来的工具，比如和UXPin，当然，也还有其他的。如同开篇所讲，并没有任何一项规定限定你必须运用哪一种工具，只要其契合自身的使用习惯，适合自身的语言环境，适合团队的工作节奏。在不同的原型设计工具之间进行切换使用，也是颇为常见的事情。

不管是运用的原型设计功能，还是采用原型设计工具组合的办法，只要有助于自身提升工作效率，设计出令人满意的现代原型，那便是很棒的组合。寻找到契合自身工作流程的原型工具，继而开启工作！

如有侵权请联系删除！