美国Adobe公司 官方指定UI培训机构

UI设计 UE设计 平面设计 网页设计 淘宝美工 PS培训 学员作品 学员就业 合作企业 设计教程 UID简介 分级教学 关于我们

如何快速了解Origami

UI交互设计高级教程

  • 课程级别:
  • 课程数量:
  • 课程评分:
  • 课程简介:
  • 中级技能
  • 更新至第9套教程
  • 等级
  • 免费在线分享电商美工必备小技巧,快速学习电商美工技巧,全面掌握电商干货技能,从电商美工菜鸟变身达人。

IT培训网数字艺术学院拥有众多业内专业实战讲师!名师面对面,巴拉拉……

0元试听 名师解惑

如何快速了解Origami原型制作工具

UI交互设计高级教程2016-02-15
如何快速了解Origami

关于单位

在Origami里,width、height、position都是以pixels为单位;opacity和scale是百分制,0-1分别对应0和100%。

常用Patch

这部分也是参考了网友的智慧~~~把他们按照类型简单归了一下类,很清晰~

显示类

如何快速了解Origami

交互触发类

如何快速了解Origami

交互响应类

如何快速了解Origami

其他

如何快速了解Origami

常用快捷键

如何快速了解Origami

大招来了 Origami + Sketch

如何快速了解Origami

在Sketch里,只要把文件的名称命名规范,就可以用插件自动切图,再然后在Origami里面,所有图都可以用Live Image这个patch来承载,这样当你在Sketch调整图片的时候,使用快捷键“shift + option + command + o”,便可以一键同步到你的动态demo。

如何快速了解Origami

终极武器

你可以说以上内容其实我们都可以用PS + AE完成,但Origami有一个终极理由让你使用它来做动画——导出代码。

因为QC本来就是Xcode的一个可视化程序,因此它的运行逻辑其实和代码是一样的,Origami做了一件事情是可以直接一键导出代码,据说开发GG可以直接使用哦!这个我也还没有试过,如果真的可以很方便的导出代码直接给开发用,那么又省掉一个环节提高效率啦~~~~~~~

如何快速了解Origami

附录

以下是对我帮助最大的几个网址,这份文档很多内容也参考了他们,非常感谢~~~

http://facebook.github.io/origami/
http://www.zhihu.com/question/20956344
http://www.csdn.net/article/2014-06-09/2820131
http://www.douban.com/group/topic/49037071/