之前介绍过这个神器，今天终于有实战教程咯!作者以微信消息页面为例，来讲述下Origami中常见的几个交互模块以及一些在平时使用经常会应用到的小
最终效果如下图，暂时先忽略这AV般的画质……(录屏转Gif搞死我了)
总得来说，就这三个步骤，But!像我这样心思缜密的骚年就会发现这其中还包含着许多细微的效果：
按住消息列表项但不松手，该项则一直保持选中态也就是底色加深，直待松手，消息对话页面才向左滑入;
分解之后，我们制作动效的思路也就清晰了，第一步自然是打开电脑刷一会微博然后打开……Sorry……
由于篇幅的限制，在此我只就前半部分：点击列表项滑出消息对话页面 进行讲解，暂时不讲右划返回上一级这一部分。
因为我们之前的分解，我们已经知晓页面中的哪些元素将会发生变化，所以在准备素材时，我们就必须将这些元素单独裁图，比如导航栏中的按钮与Title等。
然后将所有元素逐个拖入画布，如下图这个姿势;(趁机吐槽：QC无法实现图片批量拖入也真是够了!)
Drag很好理解，脱拽而已，不是，拖拽而已;而且在Origami官网提供的教程中就提到过Drag的用法，此处也暂先不提;
Tap意为一次完整的点击动作，就是手指按下 – 再抬起才视为完成动作，才会触发动效;
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的淡入、淡出、渐入便如法炮制。(为了便于区分，我更改了每个Transition模块的名称)
(2) 将Interaction2的Tap输出端连接Switch的Turn on输入端，再将Switch模块的输出端连接至Transition(转换)模块的输入端，第一个Transition的的开始状态0，结束状态为-200，并将其赋予列表页的X坐标，从而开启列表页X坐标值从0到-200的转换。在Transition前，我添加了一个Classic Animation(传统动效)模块，可以设置控件的运动曲线，使其运动加速度变化的更细腻一些。
如此，点击微信消息列表页的列表项滑出消息对话页的动效就制作完毕了，这其中关于部分交互模块，我做了比较详细的阐述，但是接下来，通过右划手势返回上一级如何实现，我将在后面的文章中分享给各位。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
@Mockplus原型设计 ：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们...
本文以微信首页为例，用三个维度系统地解析一个产品的交互设计的方方面面。 首先我们来做个互动，请各位看官打开自己的微信，然后看到你的微信首页： 然后仔细观察看到了什么...
刻板印象有好有坏。在合适的场景、时间、项目中，去最大化它的积极作用，尽量避免它的消极作用，才能真正的平衡设计、工作，甚至生活。 一直在看奇葩说，听到很多次的一个词叫...
在做表单设计时，究竟该选用哪种控件，只要是根据情况而定的，无论哪种选择都有其优缺点，这就要结合选项数目、空间大小等因素，选择一种形式，可以最大程度的方便用户使用。...
毕业后加入百度成为一名交互设计师已经整整两年了，这里把一些想法体会，工作职场的相关经历写下来，以供新人参考。 最早接触交互设计时觉得学交互设计非常酷炫，例如像钢铁侠...