Origami studio、Principle、Kite Compositor三种交互工具使用感受总结

  工作中，有段时间我特别热衷于交互工具的寻找，自己也先后试用了Pixate、origami studio、principle、Kite Compositor等交互工具。虽然以上工具，截止目前仍未有一款，另我百分百满意，但已能解决工作中遇到的各种各样问题。现在总结下以上3款工具的使用感受（Pixate已停止更新，不再介绍了）：

Origami studio

1、Origami studio

  官方网址：https://origami.design
  Origami studio是Facebook创作的一款的设计工具，设计人员可以快速的完成交互设计。用Origami做交户设计需要有一定的逻辑思维能力，感觉更像是用开发者的思维去制作。与principle、Kite Compositor最大的不同是Origami没有时间轴，不能够逐贞观察动画。

Principle

2、Principle

  官方网址：https://principleformac.com/
  Principle可以帮助用户五分钟制作出一个具有完整交互动画的原型，并且可以生成 Mac 应用、或者使用 Mirror 预览交互。Principle+sketch的组合，可以让产出更加高效，相对于Origami、Kite Compositor上手也要简单许多。如果完全无开发经验，个人强烈建议使用这款交互工具，因为学习另外两款工具要付出相对较多的时间。

Kite Compositor

3、Kite Compositor

  官方网址：https://kiteapp.co/
  Kite Compositor同样可以快速的完成一个完整的交互动画。3款工具中，个人感觉Kite Compositor的自由度最高，它支持 Javascript 手动编写代码（其实多数情况下的交互设计不需要编写Javascript即可实现）。对于“shape”的支持也最灵活，同时“Library”的划分也很好理解（Kite Compositor可以导出代码，这样有利于将一些动效参数给研发工程师，但具体没用过，不知道是否好用- -！）。

三款工具制作交互的有哪些不同

  交互设计这个过程，简单理解，无非是用户通过操作（点击、长按、滑动等）手机屏幕，从而使屏幕的界面发生了变化（动画）。所以，交互工具的目的也是为了满足我们如下需求：

交互设计

  那3款软件，都是如何满足我们这个需求呢？

  首先是“origami studio”，由于sketch版本更新频率很快，所以origami studio对sketch的支持较弱，我一般都是重新将原型在origami studio中再画一遍，这样能保证动画效果更好。origami studio对shape支持很弱，一般我都以图片代替。origami studio是通过添加各种类型的“patch ”，随后以连线的形式，去完成交互动画的实现。如下图：

origami studio

  上图中，紫色背景的“patch”部分是用户操作“点击”事件，灰色背景的“patch”是动画实现过程（界面A到界面B发生的动画），蓝色背景的“patch”是发生动画改变“layer”的属性。之所以说，origami studio更像是用开发者的思维去制作交互动画，原因就在于灰色类型的“patch”在交互设计起到的作用，与开发者实现程序的作用是近乎类似的。

  origami studio的连线交互形式很新鲜，但是当做多个交互动画为一个文件时，连线可谓异常痛苦，因为原本简单的交互以连线的形式实现，难度瞬间上升了好多倍。同时可读性也较差。时间久了，打开之前做的源文件，读懂之前的想法就需要一定的时间回忆。

---

  其次是“Principle”，Principle相对于Origami studio就简单了许多，它可以将sketch中制作好的原型或视觉稿直接导入。随后在导过来的layer中添加“操作”状态，随后链接至下一个画板，两个画板间通过时间轴去控制动画效果。

Principle

  Principle由于是通过画板与时间轴完成动画效果的，这样导致我们完成一个动画，可能会需要多个画板，而且多个画板中的layer的名称，如果不一致，动画效果就会出错。而且如果出错了。时间轴中内容过多，调试也相当辛苦。不过Principle完成一个动画确实简单，高效。

---

  最后是“Kite Compositor”，与Principle一样Kite Compositor也可以将sketch中制作好的原型或视觉稿直接导入。并且Kite Compositor能将sketch中的“shape”导入，这点不同于Principle，Principle导入后“shape”都变为了图片。Kite Compositor通过在layer中添加“Actions”（就类似添加“操作”状态），然后在layer中添加“Animations”，随后在“Actions”中添加要执行的“Animations”。

Kite Compositor

  Kite Compositor相对于Origami、Principle提供的功能都多，并且相对于后者也更灵活，同时也能和sketch结合，减少在交互工具中设计界面的工作量。但是功能越多，也代表着复杂程度上升，同时“Action”与“Animations”都在左侧layer菜单的位置，如果目录层级很深，设置起来就及其不方便（有时候找layer的目录能把自己找晕掉- -！）。

总结

工具	Mirror	内置组件	粒子效果	导出视频	时间轴
Origami studio	手机、Mac	组件丰富	支持	支持	无
Principle	手机、Mac	无	无	支持	有
Kite Compositor	手机、Mac	较少	支持	支持	有

  以上三款工具均能作出流畅且酷炫的交互动画，并且能够直观方便的给予他人演示，应当都能解决我们目前遇到的交互方面的设计问题。但工具仅是工具，交互设计更重要的仍是设计思想，仍是如何通过友好的交互去解决人机交流障碍。所以选择交互工具更应该结合自身情况，不要为了学习工具而浪费过多的时间，从而忽视了交互设计的真正意义。