Origami五分钟入门秘籍

Origami五分钟入门秘籍

早在Facebook推出Facebook Home时,相信强大的原型工具Quartz Composer就进入了很多设计师的法眼,无须编写代码就可以输出细腻丰富的动画,这个太刁了,和大家一样,彼时我也信誓旦旦励志要学会这个玩意儿,于是开始参考教学视频摸索,甚至拿着Quartz Composer的Guideline企图翻译,结果发现并不是那么简单。于是学QC这件事情就一直一直搁浅,直到Facebook又推出了Paper,有了Origami这个插件,QC的门槛瞬间降低了很多,终于,感觉自己入!门!了!!尤其是和Sketch联动,做demo真是方便了很多。这里按照自己的理解参考各种资料的总结对Origami整理了一份入门篇文档,真的可以帮助零基础的同学入门,欢迎同样在研究的同学一起探讨,有不对的地方求指正~

 

基本概念

首先说一下“模块”(patch),模块是QC里面最基本的元素,不同的模块实现不同的功能,要搭建一个原型,实际上就是把不同的模块按照逻辑像搭积木那样拼装的过程。

模块可以简单区分为这样两类:圆角和方角。

圆角是最普通的模块,而方角的模块叫做“宏”(Macro),可双击进入详细编辑。(我把它理解为文件夹)

Origami五分钟入门秘籍

模块还会有颜色的区别,蓝色的模块是输出模块,在画布中可以被看到;黑色模块是最常见的状态;紫色模块表示模块内部还有其他子模块。

模块和模块之间用连线的形式拼接起来,模块左侧是输入接口,右侧是输出接口,将A模块右侧的输出点连接到B模块左侧的输入点,即可将A模块的结果输出到B模块。

基本逻辑

这个模型是在一个文章里面一位朋友分享的,我觉得非常到位,基本上每一条操作都是这样的执行逻辑。

每一个动画首先有一个交互触发动作,然后用一个开关来控制一个动作的两种状态,两种状态对应变换两个数值,然后表现在层上~ 数值变化前多一个弹性动画来控制动效。

Origami五分钟入门秘籍

下图是最简单的图片放大缩小的例子,在数值变化的地方给图片大小一个初始值和结束值,就可以简单的实现点击图片放大缩小的效果了~~~~

Origami五分钟入门秘籍

Origami五分钟入门秘籍

小试牛刀

搞清楚基本概念和基本逻辑之后,就可以上手试试了。

我们先新建一个Origami file。

Origami五分钟入门秘籍

如下图,会弹出左右两个窗口,这是Origami默认的文件,由此也可以看出Origami为移动而生~ 第一个patch可以控制右侧手机的样式、横屏还是竖屏等等,第二个patch是方角的,也就是上面说的宏(Macro),双击它就可以将我们想要设计的内容放在手机里面了。第三个patch是蓝色的显示层。

Origami五分钟入门秘籍

每一个patch都可以双击修改名字,在后面内容变多的时候,起好名字变得非常重要。可以看到每一个patch都有自己的输入输出参数,可以都调一下试试看效果~~~

在viewer窗口,有很多很好用的快捷键可以调整展示的样式。例如,每次我会很习惯地去掉拿着手机的手……在viewer窗口激活的状态下, 键盘输入H,就可以去掉手了;键盘输入=/-可以切换背景样式;键盘输入F可以全屏展示,去掉手机框。

Origami五分钟入门秘籍

Demo1. Hello Origami

按照开发教程最习惯性的做法,我们先来做一个“Hello Origami”的demo。

双击Layer Group,进入界面内编辑态,这里有一个已经存在的patch是Fill Layer,这是一个填充图层,用来设置背景。

在编辑区域,键盘输入T,就出现了一个Text Layer。 这里说一下,调出所有patch库的快捷键是“command + enter”。(请叫我快捷键瘾君子~)

可以看到viewer区域已经有“text”显示了,选中Text Layer 按“command+1”,可以呼出这个layer的设置项,就可以随便调整试试看了,我们在Text项里写上“Hello Origami”,就完成Demo1啦~~~

Origami五分钟入门秘籍

Origami五分钟入门秘籍

Demo2,可交互的Origami

接下来我们试着让案例交互起来,做一个点击窗口,文案颜色和背景颜色互换的demo。

在编辑窗口,键盘输入I,可以看到出来了一个Interaction2的紫色patch,这是一个交互指令patch,输出交互指令,down是鼠标按下状态,up是鼠标单击状态,tap是触碰,drag是拖拽(这里提一下,从手机来操作时,感觉up和tap是一样的,我也有点不理解)。

在编辑窗口,键盘输入“command + enter”,呼出Patch Library,输入Color Transition,其实看名字大家应该就知道这是个啥,对就是这个东西来切换颜色。再在编辑窗口,键盘输入“shift + S”,得到Switch patch,这是一个开关。

连接几个patch,我们就可以切换Hello Origami的颜色了,同样的方式,把背景再同步切换一下,Demo2 完成~~~~

Origami五分钟入门秘籍

Origami五分钟入门秘籍

和切换颜色同样的道理,我们可以用Transition切换文本的大小。Layer中,scale是控制大小的元素,按百分比变化,1为100%以此类推。这时候你可能会觉得切换效果不够柔和,很生硬,在编辑窗口,键盘输入A,出现一个Pop Animation,这是一个动画过渡的效果,把这个patch放在颜色变化前,就会有过渡效果啦~~~~

Origami五分钟入门秘籍

 

如下图,就出来一个最简单的闪屏感觉的动画。

Origami五分钟入门秘籍

 

 

一些概念

关于坐标

在Origami里,每一个patch的anchor point,默认状态在画布中心(0,0),我们可以对每一个patch定义它的anchor point, 举例来说,如果想要一个元素在左上角,则可以设置它的anchor point为top left,然后设置它位于左上角的位置是(100,-100),如此,就可以得到一个距离顶部和左边缘分别100的位置。

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五分钟入门秘籍

 

下图的案例是简单做了一个QQ音乐里面播放页弹出的动效~

Origami五分钟入门秘籍

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/

 

本文由 腾讯ISUX 版权所有

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/8928/

(0)
iouedioued
上一篇 2015-08-27
下一篇 2015-08-27

相关推荐

  • “无 UI”开始流行,设计师是不是要失业了?

    编者按:本文作者 Diego Mendes,现在是 Pocket 的设计师。他通过设计叙述故事,并称自己是一位创造者。在本文中他论述了设计师存在的必要性和优秀设计师需具备的特质。 考虑到近期开始流行 “无 UI 是最好的 UI” 这…

    2016-05-11
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 创业还没听过在线Logo生成器? 那你就落伍了!

    创业还没听过在线Logo生成器? 那你就落伍了!创业的第一步 - Logo不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。品牌Logo可…

    2016-10-17
  • 苹果再次更新《App Store审核指南》,新增内容多达25处!

    近日苹果再次对《App Store审核指南》进行了更新!(这是苹果今年第三次更新《App Store审核指南》,前两次更新的时间分别是6月13日和4月19日)。 对比此前的版本,此次的修改和完善不仅涉及了SiriKit(Siri开发包…

    iOS 2016-09-23
  • APP UI 设计规范详解

    移动端 APP  UI 规范详解, 专注规范解析,提高设计效率!提升用户体验维度!

    2016-07-14
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • 1989-2014 网页设计的演变

    转载:hejidaren 2015.03.13 www.shejidaren.com⤴ 估计很多做网页的同学还不了解网页的历史,它是什么时候出现的?而那时的网页又是怎样子的呢? 如果想了解下网页设计的简史,请往看吧,我建议每位网页设计师都应…

    2015-03-16
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • 未来的汽车UI将惊艳世界

    今天多数汽车UI的设计,由于不直观、过时和缺乏美学表现力,一直饱受诟病。其他行业都将设计的品质奉为标准,汽车生产商在这方面则动作迟缓。所以,许多设计师抓住了这个机会,思考未来的汽车界面会如何改变我们的…

    2016-10-18