现在正式开始学习如何使用Origami制作产品交互原型。首先从Origami官网的第一个视频Introduction to Origami开始。
打开QC，左上角File-New Origami File。这时，会看到2个窗口：左边的Editor和右边的Viewer。Editor（编辑器）是用来组织Patch的，而Viewer（查看器）则可以实时看到由Patch（在以后的教程中，统一称为模块）实现的效果。在默认的情况下，右边的Viewer会覆盖部分Editor窗口，
为了使这2个窗口在使用的过程中更方便，在上方工具栏选择Window-Resize to Thirds，就可以使它们一左一右整齐地排列显示。
Viewer Template（查看器模板）
在新建了Origami之后，左边的Editor就自动出现了3个模块。
最右边的View模块，作用是绘制Viewer的手和手机。它的输入是与之相连的Layer Group的图片。中间的Layer Group可以放置各种模块，然后显示在Viewer的手机里。最左边的Viewer Size，可以选择不同的设备。双击Type旁边的设备名，就会出现一个列表，可选择各种设备，它会告诉Layer Group屏幕的大小。请注意，如果需要更改任何一个模块的参数，都可以双击此参数。而单击某个模块，则是选中此模块。
Adding Asserts（添加素材）
现在开始为原型添加素材。仔细观察会发现，Layer Group模块是直角的，而其他2个模块都是圆角的。实际上，直角的模块是一个模块组，可以双击它进入其包含的模块。Layer Group里面的模块直接影响右边Viewer的手机屏幕显示，当双击Layer Group时，可以看到Fill Layer模块，它的颜色是黑色，这就是Viewer的手机屏幕内容为黑色的原因。点击右上的向上按钮，就返回到了外面。
Layer Patch（图层模块）
双击Layer Group，进入模块组，从电脑里拖进一张图片到里面。当添加了一张图片后，文档里会出现2个模块。
左边是图片模块，它与右边的Layer模块相连，Layer模块把图片渲染到手机屏幕上，里面每个属性的数值描述了应该如何渲染图片。比如，X Position是0，双击“0”，把它修改成“200”，也就是x坐标被设了200，此时你会发现，在右边的手机屏幕上，图片往右移了200像素。改变数值的另一种方法是，在这个数字上长按，往左或往右拉，往左拉是不断减小当前数值，往右则不断增大。其他属性的效果，可以自行改变相应的数值，在手机屏幕上直接看到变化。
Adding Patches（增加模块）
现在我们有了图片，需要考虑怎么使用Tap（轻按）手势来缩放图片。Origami有个叫Interaction（交互）的模块，可以支持在Viewer和安装有Origami Live的iOS设备上使用Tap手势。按下Command+回车,打开Patch Library（模块库）。在搜索框里输入“interaction”，出现“Interaction 2”，按下回车，即把这个模块添加到文档里。
Getting Taps（得到轻按手势）
我们可以看到，Interaction 2模块有4个输出口，首先看第一个“Down”，它会告诉我们你的手指是否压在屏幕上。如果想看到实际输出的结果，我们可以添加一个Text Layer来观察。按下Command+回车,打开Patch Library（模块库）。（请记住这个快捷键，很常用）输入“Text Layer”，找到这个模块，按下回车，就把它添加到文档了。这时可以看到，右边的Viewer显示了“Text”字样。
双击Text属性的右边文字“Text”，可以更改文字内容。如果我们想知道“Down”的输入是什么，只需要把“Down”端口连接到“Text”端口。
现在我们看到，右边的Viewer显示了“0”。这时，如果我们点击一下Viewer的屏幕，显示的文本将变成“1”，当我们松开手，又变成了“0”。实际上，“Down”端口的从0到1，如果连接到Layer模块上的“Scale”端口上会比较有意义。当我们把“Down”连接到“Scale”，可以看到Viewer的图片完全消失了。聪明的你一定能猜到，当我们点击一下屏幕，图片又会出现。显然，我们需要一种方法，能把这种从0到1的变化转成有用的东西。所以我们需要使用Transition Patch（过渡模块）。
Transition Patch（过渡模块）
要添加过渡模块，同样可以使用按下Command+回车,打开Patch Library然后搜索、回车得到。同时，也可以使用Origami为常用操作所设置的快捷键。在键盘按下“t”，也可以快速地添加Transition Patch。
仔细观察一下，它有三个输入口，第一个“Progress”通常会接收0到1之间的数值。然后，这个模块会把Progress输入的数值，转换输出一个在Start Value和End Value之间的数值。精确地说，如果Progress为p，StartValue为s，End Value为e，那么输出值y=s+p*（e-s）。
比如，如果Progress设为0，Start Value设为100，End Value设为200，那么输出的Value数值为100+0*（200-100）=100。若此时把Progress改为1，其他不变，那么输出的Value则为100+1*（200-100）=200。原理就是这样，非常简单。
现在，我们来试着使用它。先删除掉Text Layer，去掉Down和Scale之间的连线。拔掉连线很容易，按住连线的末端那头拖动到在连线以外的地方，然后松手，就成功拔掉了。此时要注意，Scale的数值还是之前的0，要改回1。请了解，端口永远都会记住上一次的数值。
这时，我们希望实现这样的效果：手机屏幕默认全屏显示图片，点击屏幕则把图片缩小到一半来显示。显然，需要使用Interaction 2和Transition模块一起实现。先把Interaction 2的Down端口连接到Transition的Progress，再把Transition的Value输出端插到Layer模块的Scale。按照刚才我们对Down的测试结果，没点击屏幕时输出的数值为0，点击屏幕时输出的数值为1。所以当没点击屏幕时，Progress的值为0，点击屏幕时，Progress的值就变成了1。
当没点击屏幕时，我们希望输出给Scale的数值是1，这样才能全屏显示图片嘛。根据上面给出的公式y=s+p*（e-s），也就是1=s+0*（e-s）。这是很简单的方程，所以s也就是Start Value为1。然后，在点击屏幕时，希望输出给Scale的数值是0.5，也就是0.5=s+1*（e-s）=1+1*（e-1)。所以，e=0.5，End Value设为0.5就实现了我们的想要效果。
当然，你可以随意调整End Value的数值，把图片缩放得更好看些。这时，右边的Viewer默认全屏显示图片，当点击手机屏幕时，图片缩小为原来的一半；当松开手时，图片又变成了全屏显示。不过图片放大和缩小的感觉很生硬，因为没有平滑的动画效果。所以接下来，我们就到制作动画这个让人激动的步骤了。
