准备有意识的去做些事情，这个过程发现Origami系统的教程还比较少，希望自己能够边学习边发些自己的理解，用以回馈社会。

Origami是基于Quartz Composer的交互设计利器，广受PM和UX的喜欢。

那么，为什么选择Quartz Composer + Origami的组合，而不是PS+AE，或者是Keynote+Sketch。

原因很简单，交互效果可以直接生成代码！！！

准备工作

在学习Origami之前，我们先了解一下Origami的前世今生

Origami是Facebook开发的Quartz Composer的插件。

Quartz Composer则是Mac OS X中的Xcode开发环境的一部分的用于处理和呈现图形数据的基于节点的可视编程语言。

所以，在使用Qrigami前，你需要拥有这三款应用：

关于下载中的问题，请自行Google，（ 所需应用下载 ）当你拥有以上三样应用时，我们就可以开始接下来的工作了。

创建你的文件

File > New Origami File

熟悉你的工作环境

• Editor是你可编辑交互内容的工作台。

• Viewer是你编辑内容的交互输出展示台。

• 理解patch概念，工作台里的三个初始模块，就是三个patches，你可以理解为三块积木。

工作台里的世界

• Black patch（图中的Layer Group）是接收输入并处理它们，然后创建各种输出的处理器。

• Purple patch（图中的Viewer Size） 和处理器的概念一样，但是它更强调交互的展示。

• Blue patch（图中的Viewer ）是Viewer里显示的内容,也就是交互展示的内容。

• Patches 必须连接 Blue patch 才可以工作。

我们大致了解了Origami的世界构成，它就是一块块积木（ patches ）通过交互逻辑，搭建成一个交互世界，再利用Viewer展现在人的眼前。

按照国际”hello world”的惯例，我们以”hello origami”开始我们的旅程。

开始制作

我们在制作一个交互内容之前，首先要考虑交互元素，如上内容，包含：

• 背景颜色变换

• 文本颜色变换

• 文本大小缩放

• 控制交互发生的点击事件

所以，我们需要一个背景patch，一个文本patch，一个控制大小的patch，一个控制颜色的patch，以及一个控制动作的patch。

上面提到过，黑色的Layer Group 模块是接收其他模块输入并进行处理输出的处理器，所以，这些动作，需要在Layer Group里面进行。

双击”Layer Group”，进入处理器的内部。

• 你首先看到一块蓝色的patch，里面的 Fill layer 是填充背景的patch
• 然后点击，右上角Viewer, 你可以看到你的交互输出是一个黑色背景

如果你不喜欢这个输出样式，你可按”H”让背景的手，换一个。”- / =”还可以换背景。

好了，你现在需要的是打开你的Patch Library (快捷键”command + enter”)，找到你需要的其他的patch，拖拽到你的工作台，来完成整个交互动作。

通过关键词快速找到：

• Text Layer : 文本patch
• Color Transition： 控制颜色的patch
• Fill layer ：填充背景的patch
• Switch: 动作的开关

最终，你应该拖拽出这些patches

让这些积木堆起来，并且控制他们，你需要一个交互指令的patch，在工作台界面，按下”I”，可以看到多出一个紫色的模块。

这是一个交互指令patch

• down是鼠标按下状态
• up是鼠标单击状态
• tap是触碰
• drag是拖拽

至此，基本的patches，你都具有了，接下来，只需要把它们依据，左侧输入，右侧输出的逻辑，连接起来就好。

这时，你应该看到的是这样的

但是这样的交互变换看起来很突兀，而出现这个原因是因为Transition模块控制字体变换大小的scale是直接从0-1的，就相当于从0%-100%。

所以我们要在patch库里找到一个叫做Pop Animation的动作过渡patch，类似keynote里的神奇移动。

按照之前的连接方式，将其添加在开关后面，你就可以看到我们的第一个交互作品

成果

No1_Demo_Hello origami。