ProtoPie这款交互原型设计软件最近很火，下面我们来感受一下这个软件的魅力所在吧！

Protopie 测试版

（图片来源protopie.cn）

简介：

ProtoPie是一家韩国公司打造的原型设计工具，用它可以快速制作交互原型并在手机上测试。 ProtoPie的操作原理也十分简单：交互=触发动作+反应动作+对象。 你只需要将下面表中的触发动作和反应动作自由组合，就可以像拼拼图一样轻松制作高保真交互原型了！

ProtoPie分解交互动作，通过不同模块组成一个完整的交互模型，比如支持多点触摸，传感交互，3Dtouch这些都不用编写代码，通过可视化操作就可以制作精细的交互模型。

适用平台：   OSX  IOS  Android  （windows之后会出哦，敬请关注）

优点

1. ProtoPie特有的交互界面可以直观地传达设计细节，尤其是交互栏的设计，可以迅速看清交互的逻辑

2. ProtoPie除了电脑上的编辑部分，还配有一个App叫ProtoPie Player，他可以帮助更直观地在表达自己的设计想法，而且效果非常流程，更像是原生应用

3.支持多手指手势，1-5根手指随便使。 预置 iOS 原生交互动作，例如最新的 3D Touch。

4.很容易上手，学习成本低，且制作原型效率高，也不用写代码就可以制作出很精美的交互原型

5.sketch制作后可导入ProtoPie，制作交互原型的效率更高

6.做出的原型完整度高，高保真

7.ProtoPie是现在唯一一个支持无代码就可以制作传感交互的原型工具

缺点：

1.不支持电脑预览（官方之后会在下一个版本更新哦），之后会支持视频录制

2.多页面复杂的流程制作起来会稍微麻烦，但不影响，希望之后会出现更好的解决办法

3.暂时不支持文字输入（目前是测试版之后功能会不断完善哦）

4.目前sketch不支持整体导入（因为protopie里面只有Container这个概念），目前的导入是只需要导入需要图层，其实也不算缺点，只是概念不同

5.暂时不支持web端网页制作和导出

讲解了这么多，还是要看到实际案例才会让你更加了解ProtoPie，下面我们就来深入了解一下ProtoPie吧！

范例展示

（图片来源ProtoPie.cn）

谷歌收件箱菜单

侧拉菜单一步完成，链动模块可以让每个图层与图层联系起来

（图片来源ProtoPie.cn）

滚页和翻页

翻页及滚页区域随意设定，上下左右随便滑动

（图片来源ProtoPie.cn）

谷歌地图

从单手知道五根手指，帮你完成多点手势交互

（图片来源ProtoPie.cn）

Facebook Paper

倾斜手机可以触发图层的多种变化

下面我们可以通过和其他交互软件来进行对比一下，为什么说Protopie是交互原型设计神器呢？

Hype3

（图片来源tumult.com）

简介：

软件定位是为Html 5设计师打造的，有强大的时间线，和AE、flash软件很相似，可以用来构建HTML5网页内容、无需编码、可引用写好的代码插入作为素材。

适用平台：OSX  IOS

优点：

1.软件是轻量级的易上手，对于会AE和flash的可以学起来很容易

2.动效属性更强，可交互，支持各种手势来触发相应行为

3.可以插入代码、对开发有一定的借鉴意义

4.输出格式跨平台，能够很好的在浏览器上浏览，基本上可以在任何设备上运行

缺点：

1.想要深入学习就需要花费大量的时间

2.做出来的原型质感不是很好，效率一般

3.不容易制作完整原型，而且做页面之间的跳转比较复杂

Flinto

（图片来源flinto.com）

简介：

Flinto是一款轻量、高效的综合性交互原型设计工具，你可以使用它创建任何原型，简单的页面跳转只需要连线，无需任何代码也没有复杂的时间轴

适用平台：OSX  IOS  Android 

优点：

1.常用的过渡效果和手势都有，也可以自定义编辑过渡效果，上手简单，与sketch无缝衔接，产出效率高

2.做转场动画比较好，整个APP页面逻辑跳转比较直观

3.可以对插入声音、视频，

4.支持常用的多种手势

5.电脑可直接预览，电脑上修改，手机上实时预览

6.可分享给别人查看（手机上需下载Flinto）

缺点：

1.查看原型的时候点击空白处能看到热区

2.复杂的动效比较难实现

3.虽然能直观的连线，但是app页面很多、流程复杂的话，面对满屏幕密密麻麻的连线无疑造成了麻烦（连线可隐藏，但是需要修改还是要显示）

4.可支持网页，但是不能再浏览器上查看，只能以导出视频和GIF的形式

Principle

（图片来源principleformac.com）

简介：

Principle 是前 Apple 工程师打造的一款交互设计工具，界面和Sketch类似，用画布能简单快速的制作你想要的效果

适用平台：OSX  IOS 

优点：

1.做两个页面之间的过度效果、元素切换、还有细节比较好

2.效率高、设计速度快、质感好，能完全模拟出你想要的效果

3.支持Sketch素材的复制粘贴

4. 可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台，也能够生成 Mac 应用，以及使用 Mirror 预览交互

缺点：

1.做整套原型的话比较吃力、画布较多的时候做交互比较麻烦

2.和Flinto一样导出不能再浏览器上查看，只能导出视频和GIF的形式

3.不擅长做Android 平台开发的产品

Framer

（图片来源framerjs.com）

简介：

用简单的代码开始，用代码的形式去写，基于开发的角度去实现，他可以实现你任何用代码能实现的交互效果

适用平台：OSX  IOS  Android

优点：

1. 支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览

2. Framer拉近了设计师与开发者的距离，JavaScrip能做到的它就能做到再也不用担心设计开发实现不出来了

3.可直接引用写好的代码，电脑手机上实时预览

4. 可生成一个公开页面，可以用Chrome或Safari查看，移动浏览器也（链接可以作为“应用”加入到IOS主屏）

缺点：

1.不会写代码的话学习成本很高，程序员的话无所谓，作为设计师的话就麻烦了

2.实现的原型写出的代码开发也不能直接使用

Axure

（图片来源axure.com/download）

简介：

Axure可以说是交互界的元老级别的软件了，它和上面Sketch一样，交互效果都能实现出来，包括动效，但是效率不高，需要很复杂的操作步骤才能实现某些效果

适用平台：  Windows   OSX  IOS  Android

优点：

1.可以在windows运行，不受设备的限制，跨平台

2.偏重交互、页面逻辑关系清晰，能够帮助梳理产品

3.拥有很完整的web控件库，直接拖拽即可快速制作网站原型

4.动态面板可以用来模拟各种复杂的交互效果

5.导出HTML后可以更加准确的传达信息架构和页面跳转。便于与用户的需求验证，也帮助我们构思交互细节，使前端和开发人员更容易理解我们的产品

6.制作复杂的交互设计，例如XX后台系统、XX平台的话建议使用axure而不是sketch

缺点：

1.效率不高，需要很复杂的操作步骤才能实现某些效果

2.制作APP原型手机预览很麻烦

3.制作动效实现起来复杂

Pixate

（图片来源www.pixate.com）

简介

Pixate是一个原生移动应用动态UI设计平台，其目标是帮助设计师和开发者方便开发出动感漂亮的原生移动界面，界面直观，用户只需要拖放设计原色进行属性设置，就可以在不许要编写任何代码的情况下完成交互原型

适用平台：  Windows   OSX  IOS  Android

优点

1.免费并且有win版，软件功能完善相对完善，这个对于不需要花钱的小伙伴是福利

2.Win、Mac，iOS、安卓都支持，实时连接

做出来原型质感很好，动效很丰富

缺点

1. 单画布多层次交互，做起来比较地花时间，学习成本相对其他几个来说也要大一点（上手更难一些）

2且不支持OG和Sketch素材的复制粘贴，必须手动导入素材

其他软件

还有其他的软件可以制作原型，墨刀，mockup，justinmind，Quartz Composer、 Form、demoo、flinto lite、atomic、Marvel、Invision等感兴趣的可以去了解一下，Origami、Form和Framer（这三个需要懂代码知识）

（Protopie下载地址http://protopie.cn/）

Protopie教程

基础教程：http://protopie.cn/tutorial/index.html

ProtoPie中国区经理亲开课：http://meia.me/special/ProtoPie012.html

关注Protopie

（图片来源meia，扫描二维码关注）

本文为原创，仅代表个人观点，转载和引用请注明作者出处，谢谢！

据说  点赞 的最后都成为了大神哦

Powered by Froala Editor