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

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

Origami studio

1、Origami studio

  官方网址:https://origami.design
  Origami studio是Facebook创作的一款\color{#FF0000}{免费}的设计工具,设计人员可以快速的完成交互设计。用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 较少 支持 支持

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容