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

深度分析 ：从交互效果的实现 ，探讨一下Axure背后的逻辑 通过对做这个原型过程的 考 ，我们可以发现 ，在用Axure做原型时 ，大部分的交互效果都 可以使用 “交互效果流程化 ，Axure功能来替换”的方法 考。 学习Axure时 ，在一些群里提问题时 ，常常会得到这样的回复 ： 其实 ，只要弄清Axure背后的逻辑 ，这个是很简单的。 我常常被这样的回答弄得一愣一愣的 ，这是一句正确的话 ，但是我却不知道它能如何指导我去解决 问题。我们在看到一个交互效果时 ，要怎样 考才能成功地用Axure实现它 ？今天我们通过实现一个 类似“探探”的交互效果 ，来探讨这“Axure背后的逻辑”指的是什么。 一. 最终效果 “得到”app的“看金句”交互效果与“探探”app的交互几乎一样。在这里使用“得到”A ndro id版给大家举例 ，该交互效果为卡片翻阅的交互。 动图 ： 链接 ：ht t p://m6sogz .axshare.co m 百度云盘 ：链接 ：ht t p://pan.baidu.co m/s/1eRJ Fzeq 密码 ：p 1h 二. 分析方法 在开始之前 ，我在这里斗胆为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就 不会出现在屏幕范围内。我们将所有飞出屏幕的卡片最终的坐标点都定义在这个圆周上 ，只要坐标 点在圆周上 ，最终我们就可以通过一个公式求出这些坐标点。 设卡片1初始位置A 的坐标为 （X ，Y ），松手前那一瞬间的位置B为 （X b ，Yb ），松手后 ，沿着松 手方向路径飞出 ，我们定义它飞出后到达了位置C （X c ，Yc ）。 根据数学(三角函数)知识 ，我们可以得到 ： 位置c的横坐标 ：X c=X +Rcosθ =X +Rcos[arct an(Yb-Y)/(X b-X )] 位置c的纵坐标 ：Yc=Y+Rsi