恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
三种交互工具使用感受总结
0.0°
2019-05-21 原创文章 经验/观点 举报 2903 4 3 0

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

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

origami studio

origami studio

1、Origami studio


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


principle

principle


2、Principle


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


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 ”,随后以连线的形式,去完成交互动画的实现。如下图:


Image title


上图中,紫色背景的“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的目录能把自己找晕掉- -!)。


总结


Image title


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






更新:2019-05-21

收藏

4人已收藏

  • 13

    作品

  • 10

    粉丝

  • 65

    关注

  • Kite Compositor官方demo讲解-Weathe
  • origami studio 练习动效
  • origami studio 卡片移动效果
  • origami  sutdio 实现banner图切换

    猜你喜欢

      2019-05-21 原创文章 经验/观点 举报 2903 4 3 0

      三种交互工具使用感受总结

      0.0°

      你确定要举报三种交互工具使用感受总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年05月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录