[新武器] ProtoPie


“如何演示一些程序员代码才能敲出来的交互效果?”

原型是创意阶段的常用手段,它可以快速验证想法,获取用户反馈,低成本高保真迭代产品,实乃一大神器。但打磨产品体验阶段,需要针对一些交互细节动效调整,纸质原型或静态原型已不能满足沟通需求,然而ProtoPie 是一款移动端快速原型制作工具,无需手动敲打代码,无缝导入sketch文件,即时多端均可演示交互效果,专为设计师量身打造。

最近试用体验了Protopie \ Framer 等当今比较红的几款原型设计工具,发现零代码的Protopie更容易被大多数设计师理解、学习和运用,Framer支持直接敲代码,还原度比较高,但基础代码学习能力也是必须的,另外年费也要贵一些,今天先来讲讲Protopie 这个工具。

这是一款专为交互设计师打造的工具,优点突出:

  • 易上手
  • 无需学习代码
  • 丰富的交互效果
  • 无缝对接sketch源文件
  • 手机演示、预览器实时演示

ProtoPie 的产品基本概念浅显易懂,完全没有编程世界复杂的逻辑,非常好理解。尤其是可以无缝对接Sketch 和零代码这两点,瞬间涨粉不少。ProtoPie 的对象和sketch的图层非常相似,因此设计师用起来特别熟悉。

 

动效设计

Protopie 还支持无代码制作流畅的动画,目的:用优美又流畅的动画展示空间关系、功能或引导。当你想对某一个元素(图层)进行动态操作处理时,稍稍用一下编程代码时的思维,就可以把条件和反应在脑海中输出,从而指挥鼠标在界面上选择对象添加属性,上手很快。

虽然Protopie提供的trigger和responses 只有上面这些,但足以满足基本的原型动画要求,基础的动作组合成流畅的动画还是需要很多耐心,对时间、距离、属性等细节把握都要算得非常精准,才能让交互动画变得足够自然生动。

任何一门技术的掌握都需要靠大量练习来触达。

 

教程链接:http://www.protopie.cn/docs/
用户手册:http://www.protopie.cn/docs/index.html#Intro