深度分析：从交互效果的实现，探讨一下Axure背后的逻辑

通过对做这个原型过程的思考，我们可以发现，在用Axure做原型时，大部分的交互效果都可以使用 “交互效果流程化，Axure功能来替换”的方法思考。

学习Axure时，在一些群里提问题时，常常会得到这样的回复：

其实，只要弄清Axure背后的逻辑，这个是很简单的。

我常常被这样的回答弄得一愣一愣的，这是一句正确的话，但是我却不知道它能如何指导我去解决问题。我们在看到一个交互效果时，要怎样思考才能成功地用Axure实现它？今天我们通过实现一个类似“探探”的交互效果，来探讨这“Axure背后的逻辑”指的是什么。

一. 最终效果

“得到”app的“看金句”交互效果与“探探”app的交互几乎一样。在这里使用“得到”Android版给大家举例，该交互效果为卡片翻阅的交互。

动图：

链接：

百度云盘：链接： 密码：py1h

二. 分析方法

在开始之前，我在这里斗胆为Axure制作交互“背后的逻辑”做一个通俗的翻译：

将想要实现的效果定为目标，将实现目标的操作流程化，并用自己理解的话表达出来，然后在Axure中寻找能替代流程中每一步的功能，将这些流程进行替换，转化成Axure中的事件。

（1）流程中涉及到的几个元素

角色：人，被操作的对象；

操作：点击，滑动等；

输出结果：每一个操作需要达到的效果，这些效果连接起来就是最终的交互效果。

（2）思考方式

将需要实现的效果以流程表示，分别从角色、操作以及输出结果对整个过程进行拆解，最后将每一个节点替换成Axure的功能。

三. 举例分析

接下来，我们看看文初提到的交互效果应该怎么分析。

1.  交互效果分析——按照角色将效果转化为流程图

这里的流程图只是一种思考方式，看到一个交互效果，我们要按照怎样的方式思考。有人可能觉得每次都要转化成流程图，岂不是很麻烦？其实，如果你做多了就会发现，脑海中会自然形成流程。

按照我们在操作时所能见到的交互效果，使用角色、操作和输出结果三个元素绘出流程图。

2. 节点替换

接下来，将流程中的每一个节点，替换成Axure中的功能。暂时想不出来对应的功能，就使用红色标记出来，重点讨论。

3. 问题点剖析

节点替换后，我们得到了三个问题点：

（1）A与B的位置如何定义？

在流程图中第3步，通过观察交互，我们可以知道：当手松开时，如果卡片1超出了一个范围，即沿着手松开的方向飞出，若卡片1仍在范围内，即回到原来位置。

在这里，我将这个范围定义为金句这个页面的四个边缘（实际上，范围应该要大于这个边缘，为了简便，就设置成这个范围），边缘内相当于位置A，卡片1在边缘内移动，松手时回到原处，边缘外相当于位置B，卡片1超出了A，松手时即飞出。

那么在Axure中，就要在四周放上四条线段作为锚点：锚点左、锚点右、锚点上、锚点下。当拖动结束时，如果卡片1这个动态面板未接触到任意一个锚点，则移动到原来位置；如果接触到任意一个锚点，则飞出。飞出路径，我们下一步讨论。

（2）拖动结束时，怎么实现卡片1跟随手松开的方向飞出？

我们想象一下：卡片1的初始位置为位置a，松手前那一瞬间到达了位置b，那么位置a和位置b的连线，即为卡片1飞出时的路径；卡片1沿着该路径飞出后，设置卡片1到达位置c，这个位置c如果超出了屏幕范围，那么我们就看不到卡片1了，也就达到了我们想要的效果。那么假设将位置c与位置a连线，以该段长度为半径画一个圆，位置c即为圆上的任意点，只要这个圆足够大，那么位置c就不会出现在屏幕范围内。我们将所有飞出屏幕的卡片最终的坐标点都定义在这个圆周上，只要坐标点在圆周上，最终我们就可以通过一个公式求出这些坐标点。