原型设计：Origami 2.0 使用方法的9个步骤

在上节的原型设计学习中我们有简单聊到Origami中常见的几个交互模块，本期的原型设计学习中我们继续为大家讲讲Origami 2.0 使用方法的9个步骤，有兴趣的可以继续看看。
从本义上看，Origami的意思是折纸，它由Facebook设计团队开发的原型设计工具Quartz Composer（以下简称QC），是一款免费的可交互界面设计工具，Origami开始进入人们的视野当中。而 QC苹果的Xcode开发工具包是一个重要的程序，苹果的目的是帮助开发人员希望它具有视觉效果的电影丰富的合成，首先是常被用来制作屏幕保护程序。其特点是：无需编写代码，只要在工具连接和组装提供了各种功能的补丁（封装代码模块），可以输出丰富的动画，轻松实现与原型设计进行交互。

1、Origami初步介绍：

打开 QC原型设计工具，创立新 Origami File。

在工具栏中左面是编辑修改区，右侧是 Viewer，能够点击 Resize to third 三分之。
  在编辑修改区的右侧有 Viewer Patch（模块）
 
2、增加资源
先简略介绍一下模块的概念，QC 中模块分为以下几种：

1、方角的，四角是尖的称之为 Macro（宏），能够双击进入具体修改，类似于程序中函数的概念（ 函数是由事件驱动的或许当它被调用时执行的可重复使用的代码块）。你在这个 View （视图）里，还能够包含别的的 View（视图），实在不理解，就把他作为图层组吧。你能够双击进入具体修改，在工具栏中点击向上箭头哪个按钮（底部写着 Edit Parent）能够返回上一层。
2、圆角的是一般模块。
3、蓝色的是输出模块，会在 Viewer 中看到。
4、紫色模块则代表该模块内部还有别的模块。
增加资源很简略，只需求把对应的图像文件拖到 Editor 区域中即可，会主动创立一个图像模块以及图层模块。
 

3、图层模块

图层是一个显现类模块，可在屏幕上显现。你能够设置它的 X/Y/Z Position，你能够双击输入数值，也能够长按后摆布拖动改变数值。一起还能够挑选 Anchor Point（锚点）是左上开端仍是居中等。
你也能够点击 Mask Image，或许改变不透明度，缩放等。
按住 command + enter 键，能够检查 Quartz Composer 的各种库，包含了 Origami 库。

挑选 Interaction 2号，交互2号。咱们也许会奇怪这个「2号」怎么来的，可是你查找的时分就理解了，QC 自身就有一个 Interaction，就比如在 Mac 体系里，你复制一个同名同类型的文件，为了避免重复，就变成了「交互2号」会主动加上（2）相同。
交互2号的意义是： – Down 点击，鼠标按下。 – Up – Tap 轻拍，轻触 – Drag 拖拽
假如需求图的过渡改变，就需求用到过渡模块了。

4、过渡模块

取一个0-1之间的数值，并将其变换为由开端值和完毕值之间的范围内的一个数值。经过 Progress 输进口数字的改变，输出一个在 Start Value 和 End Value 之间的对应值。
在这我设置的起始值为1，完毕值为 0.4，和官网稍稍有些不一样。官网默认是看到缩放了的居中的图像，而我设置的是默认在有图有文字的页面，这也便利各位去琢磨比照过渡模块的用处。
5、增加动效
在图像缩放的时分，其实有一个动效，Pop 动效。 现在就让咱们来增加这个动效。
有个快捷方式是，你鼠标悬在圆点处，然后按键盘上的 A，就能够出来 Pop Animation 了。
可是疑问仍然在，图像缩放后无法坚持缩放后的状况，所以咱们需求一个开关进行状况切换。

6、Switch 开关

一个开关能够记住一个状况。它作业的原理和点灯开关有些类似，一开端是关着的，假如你按一下，他就变成开了，然后你再按一下，就变成关了。举个比如，假如你想轻触一个图像时，它会缩小并且当你松开手指的时分，他会保存这个状况。
Flip 端口对对称式的交互式很有用的，比如说你重复点击一个图像，让它从缩放从小到大。举个比如，在一个修改窗口，你也许会有一个修改按钮来翻开这个开关（在窗口动效）以及在窗口中的「撤销」和「断定」按钮来封闭这个开关。
快捷键：Shift + ⬆️


7、增加过渡
增加 Chrome 图像

 chrome 图像图层增加透明度的过渡，并将过渡模块的 progress 输进口与 Switch 模块的 On/off 连接起来。好了，第一个视频里的 Demo 已经完成了。by the way 是 QC 里的图层顺序。

8、Layer Order 图层次序

数字越大，优先级越高，越靠前。

9、完成制作

我们再下载一个 Origami Live，把 iPhone 和 Mac 连接起来。就这样大功告成了。
总结：以上就是原型设计师在使用原型设计工具Origami 2.0 的9个分解步骤，近年来，各种的原型工具层出不穷，通过上述的简单讲解希望大家可以学习到通过Origami制作出很多神奇动效的方法，相关视频教程可以登录课课家网络教学平台查询课程学习。