header_v1.7.40

ProtoPie是否能成为交互神器?

2年前发布

原创文章 / 平面 / 教程
LEISHU 原创,如需商业用途或转载请与LEISHU联系,谢谢配合。

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


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



Protopie 测试版


b4565863158ea8012060c8438c2a.jpg

(图片来源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吧!



范例展示


2371586315b1a8012060c817ba68.jpg

(图片来源ProtoPie.cn)


谷歌收件箱菜单

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




cfa1586315dba8012060c82eee68.jpg

(图片来源ProtoPie.cn)

滚页和翻页

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



141558631689a8012060c8d5c4d5.jpg

(图片来源ProtoPie.cn)

谷歌地图

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



30b2586316aca8012060c8b475c0.jpg

(图片来源ProtoPie.cn)


Facebook Paper

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




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



Hype3


153b586316cca801219c773cfec1.jpg

(图片来源tumult.com)


简介

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


适用平台:OSX  IOS


优点

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

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

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

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


缺点

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

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

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



Flinto


5453586316e7a8012060c8b10a83.jpg

(图片来源flinto.com)


简介

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


适用平台:OSX  IOS  Android 


优点

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

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

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

4.支持常用的多种手势

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

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


缺点

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

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

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

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


Principle


d76c58631711a801219c771a65b2.jpg

(图片来源principleformac.com)


简介

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


适用平台:OSX  IOS 


优点

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

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

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

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


缺点

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

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

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


Framer


508b58631733a8012060c89d9cc5.jpg

(图片来源framerjs.com)


简介

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


适用平台:OSX  IOS  Android


优点

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

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

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

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


缺点

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

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



Axure


cde858631750a801219c77eeeaed.jpg

(图片来源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


4b975863176ca8012060c8f0f9e0.jpg


(图片来源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(这三个需要懂代码知识)




54c958631789a8012060c8e5db87.jpg

(Protopie下载地址http://protopie.cn/


Protopie教程


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


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



关注Protopie


d579586317b6a801219c776ce501.jpg

(图片来源meia,扫描二维码关注)



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







32

    文章信息

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功