原型设计：聊聊Origami中常见的几个交互模块

在原型设计中Origami是以Quartz Composer为基础的插件，然后再安装Origami之后，Quartz Composer的界面将更加友好，更加适合用于交互设计师更好地使用原型设计工具，接下来，我们大家就聊聊在Origami中常见的几个交互模块，文中以微信消息页面作为参考的例子。
我们在正式学习原型设计做动效之前，做好前戏尤为重要：对动效进行剖析并将其分化。我们要对其先拆解这个动效：点击微信音讯列表中的恣意项，该项底色加深；音讯对话页从右至左滑入屏幕；在音讯对话页面，向右划动则回来上一级；
归纳来说，基本上就这3个流程，可是这其中有很多的细节也是值得咱们去留意了解的。其一，按住音讯列表项但不松手，该项则一向坚持选中态也便是底色加深，直待松手，音讯对话页面才向左滑入；其二，音讯页面从右至左滑入时，原列表页也向左滑动，但速度稍慢，反之亦然；其三，在音讯页面右划回来上一级的过程中，导航条支配按钮淡入淡出，Title随手指方向渐入渐出。通过简略的分解今后，咱们制造动效的规划思路也就逐渐明晰了。

第一步：

咱们先点击列表项，该项颜色加深，一同音讯对话页面向左滑入；可是因为咱们之前的分解过程，咱们现已知晓页面中的哪些元素将会发作改动，所以在预备资料时，咱们就必须将这些元素单独裁图，比如导航栏中的按钮与Title等。然后将全部元素逐个拖入画布，如下图。


我们然后对照自个的微信界面，把一切元素移动到正确地方位去；接着，需要增加Hit Area（热区）模块，巨细调整为列表项巨细，方位移动至如图方位；并增加Interaction2（交互）模块，将Interaction2模块与Hit Area模块衔接；

另外，我们在这里，先对Interaction2这个模块进行具体的说明，做好记载；

看看Interaction2右侧有四个输出端：Down，Up，Tap，Drag，详细介绍如下：
1、Drag极好了解，脱拽罢了，不是，拖拽罢了；并且在Word视频教程">Origami官网提供的教程中就提到过Drag的用法，可以去参考。
2、Tap意为一次完好的点击动作，即是手指按下， 再抬起才视为完结动作，才会触发起效。
3、Up意为抬起的动作，仅仅抬起手指后就触发起效。
在Tap触发的动效一般都不是对于控件自身的，主要是说Tap操作以后别的东西怎么怎么动次打次的。而Up与Down一般是对于控件的中间状况，比方微信的音讯列表项，按下去时底色加深，抬起时则滑入音讯对话页。如果直接用Tap操作触发的话，作用就是按下去无作用，抬起后底色加深并滑出对话页；
我们处理后效果如图：

1、 热区红不啦叽的有碍观瞻，便去掉Hit Area模块的Setup Mode 的勾选情况，将其躲藏。
2、将Interaction2的Down输出端联接Switch的Turn on输入端，再将Switch模块的输出端联接至Transition（改换）模块的输入端，Transition的的初步情况0，完毕情况为1，并将其赋予一个灰色矩形的透明度，意为在热区按下后打开灰色矩形块透明度从0到1的改换。如此便完毕了音讯列表项按下后颜色加深的作用；
3、 将Interaction2的Up输出端联接Switch的Turn on输入端，再将Switch模块的输出端联接至Transition模块的输入端，Transition的的初步情况640，完毕情况为0，并将其赋予音讯对话页面的X坐标，意为在热区有抬起操作后，音讯对话页的X坐标由640改换至0，如此便完毕了音讯对话页滑入的作用；
4、 图中黄色的线就犹如“电线”用来传递信号，可是现在改革开放30年了，公民的生活水平也提高了，我便运用了蓝牙无线技术，添加Wireless Broadcaster（无线发射）模块，配对Wireless Rreceiver，就能够不用“电线”而用“无线”远距离跨层级的传输信号了。除此之外，在每个Transition模块前都设置了一个Pop（弹性）模块，目的是为了让改换作用更流通而不生硬，Pop的各项参数都能够调度。

第二步：

音讯页面滑入时，列表页Title向左渐出，右上角加号icon淡出，音讯对话页Title向右渐入，并淡入回来按钮与联系人icon，与此一起，列表页也以较慢的速度左滑；
1、将Interaction2的Tap输出端衔接Switch的Turn on输入端，再将Switch模块的输出端衔接至两个Transition（变换）模块的输入端，第一个Transition的的开端状况0，结束状况为-320，并将其赋予列表页Title的X坐标，意为点击热区后翻开Switch（开关），然后敞开列表页Title的X坐标值从0到-320的变换。别的icon的淡入、淡出、渐入便依样画葫芦。


2、将Interaction2的Tap输出端衔接Switch的Turn on输入端，再将Switch模块的输出端衔接至Transition（变换）模块的输入端，第一个Transition的的开端状况0，结束状况为-200，并将其赋予列表页的X坐标，然后敞开列表页X坐标值从0到-200的变换。在Transition前，我增加了一个Classic Animation（传统动效）模块，能够设置控件的运动曲线，使其运动加速度改变的更细致。

最终gif效果：
好了，基本上我们想设计的点击微信消息列表页的列表项滑出消息对话页的动效就制作完成了，大家可以参考学习一下。
总结：作为一个APP产品设计师，想让自个的App从与竞争对手中脱颖而出，原型设计开发者有必要拥有一款能够制造花哨动效的原型设计工具。原型设计相关的视频教程可以登录课课家官网查询相关课程学习。