通過對(duì)做這個(gè)原型過程的思考，我們可以發(fā)現(xiàn)，在用Axure做原型時(shí)，大部分的交互效果都可以使用 “交互效果流程化，Axure功能來替換”的方法思考。

學(xué)習(xí)Axure時(shí)，在一些群里提問題時(shí)，常常會(huì)得到這樣的回復(fù)：

其實(shí)，只要弄清Axure背后的邏輯，這個(gè)是很簡(jiǎn)單的。

我常常被這樣的回答弄得一愣一愣的，這是一句正確的話，但是我卻不知道它能如何指導(dǎo)我去解決問題。我們?cè)诳吹揭粋€(gè)交互效果時(shí)，要怎樣思考才能成功地用Axure實(shí)現(xiàn)它？今天我們通過實(shí)現(xiàn)一個(gè)類似“探探”的交互效果，來探討這“Axure背后的邏輯”指的是什么。

一. 最終效果

“得到”app的“看金句”交互效果與“探探”app的交互幾乎一樣。在這里使用“得到”Android版給大家舉例，該交互效果為卡片翻閱的交互。

動(dòng)圖：

鏈接：http://m6sogz.axshare.com

百度云盤：鏈接：http://pan.baidu.com/s/1eRJFzeq 密碼：py1h

二. 分析方法

在開始之前，我在這里斗膽為Axure制作交互“背后的邏輯”做一個(gè)通俗的翻譯：

將想要實(shí)現(xiàn)的效果定為目標(biāo)，將實(shí)現(xiàn)目標(biāo)的操作流程化，并用自己理解的話表達(dá)出來，然后在Axure中尋找能替代流程中每一步的功能，將這些流程進(jìn)行替換，轉(zhuǎn)化成Axure中的事件。

（1）流程中涉及到的幾個(gè)元素

• 角色：人，被操作的對(duì)象；
• 操作：點(diǎn)擊，滑動(dòng)等；
• 輸出結(jié)果：每一個(gè)操作需要達(dá)到的效果，這些效果連接起來就是最終的交互效果。

（2）思考方式

將需要實(shí)現(xiàn)的效果以流程表示，分別從角色、操作以及輸出結(jié)果對(duì)整個(gè)過程進(jìn)行拆解，最后將每一個(gè)節(jié)點(diǎn)替換成Axure的功能。

三. 舉例分析

接下來，我們看看文初提到的交互效果應(yīng)該怎么分析。

1. ?交互效果分析——按照角色將效果轉(zhuǎn)化為流程圖

這里的流程圖只是一種思考方式，看到一個(gè)交互效果，我們要按照怎樣的方式思考。有人可能覺得每次都要轉(zhuǎn)化成流程圖，豈不是很麻煩？其實(shí)，如果你做多了就會(huì)發(fā)現(xiàn)，腦海中會(huì)自然形成流程。

按照我們?cè)诓僮鲿r(shí)所能見到的交互效果，使用角色、操作和輸出結(jié)果三個(gè)元素繪出流程圖。

2. 節(jié)點(diǎn)替換

接下來，將流程中的每一個(gè)節(jié)點(diǎn)，替換成Axure中的功能。暫時(shí)想不出來對(duì)應(yīng)的功能，就使用紅色標(biāo)記出來，重點(diǎn)討論。

3. 問題點(diǎn)剖析

節(jié)點(diǎn)替換后，我們得到了三個(gè)問題點(diǎn)：

（1）A與B的位置如何定義？

在流程圖中第3步，通過觀察交互，我們可以知道：當(dāng)手松開時(shí)，如果卡片1超出了一個(gè)范圍，即沿著手松開的方向飛出，若卡片1仍在范圍內(nèi)，即回到原來位置。

在這里，我將這個(gè)范圍定義為金句這個(gè)頁面的四個(gè)邊緣（實(shí)際上，范圍應(yīng)該要大于這個(gè)邊緣，為了簡(jiǎn)便，就設(shè)置成這個(gè)范圍），邊緣內(nèi)相當(dāng)于位置A，卡片1在邊緣內(nèi)移動(dòng)，松手時(shí)回到原處，邊緣外相當(dāng)于位置B，卡片1超出了A，松手時(shí)即飛出。

那么在Axure中，就要在四周放上四條線段作為錨點(diǎn)：錨點(diǎn)左、錨點(diǎn)右、錨點(diǎn)上、錨點(diǎn)下。當(dāng)拖動(dòng)結(jié)束時(shí)，如果卡片1這個(gè)動(dòng)態(tài)面板未接觸到任意一個(gè)錨點(diǎn)，則移動(dòng)到原來位置；如果接觸到任意一個(gè)錨點(diǎn)，則飛出。飛出路徑，我們下一步討論。

（2）拖動(dòng)結(jié)束時(shí)，怎么實(shí)現(xiàn)卡片1跟隨手松開的方向飛出？

我們想象一下：卡片1的初始位置為位置a，松手前那一瞬間到達(dá)了位置b，那么位置a和位置b的連線，即為卡片1飛出時(shí)的路徑；卡片1沿著該路徑飛出后，設(shè)置卡片1到達(dá)位置c，這個(gè)位置c如果超出了屏幕范圍，那么我們就看不到卡片1了，也就達(dá)到了我們想要的效果。那么假設(shè)將位置c與位置a連線，以該段長(zhǎng)度為半徑畫一個(gè)圓，位置c即為圓上的任意點(diǎn)，只要這個(gè)圓足夠大，那么位置c就不會(huì)出現(xiàn)在屏幕范圍內(nèi)。我們將所有飛出屏幕的卡片最終的坐標(biāo)點(diǎn)都定義在這個(gè)圓周上，只要坐標(biāo)點(diǎn)在圓周上，最終我們就可以通過一個(gè)公式求出這些坐標(biāo)點(diǎn)。

設(shè)卡片1初始位置A的坐標(biāo)為（X，Y），松手前那一瞬間的位置B為（Xb，Yb），松手后，沿著松手方向路徑飛出，我們定義它飛出后到達(dá)了位置C（Xc，Yc）。

根據(jù)數(shù)學(xué)(三角函數(shù))知識(shí)，我們可以得到：

位置c的橫坐標(biāo)：Xc=X+Rcosθ =X+Rcos[arctan(Yb-Y)/(Xb-X)]

位置c的縱坐標(biāo)：Yc=Y+Rsinθ =X+Rsin[arctan(Yb-Y)/(Xb-X)]

其中：

• （X,Y）是卡片1初始位置，坐標(biāo)已知。
• （Xb,Yb）為松手前一瞬間卡片1的坐標(biāo)，通過Axure的[[This.x]],[[This.y]]可以獲取。
• （Xc，Yc）為卡片1飛出后到達(dá)的位置，為我們所求。

在這兩個(gè)公式中，R即為初始位置與位置c的連線，以R為半徑做一個(gè)圓，我們可以將卡片朝任意方向飛出之后的坐標(biāo)點(diǎn)都設(shè)定在這個(gè)以R為半徑的圓上， R沒有一個(gè)確定的值 ，只要能保證卡片飛出之后不能出現(xiàn)在我們的視野中即可。在本例中，R=638。

接下來，我們驗(yàn)證這兩個(gè)公式是否符合所有情況？

這里只是推導(dǎo)過程，僅作參考?？雌饋肀容^復(fù)雜，寫的非常詳細(xì)，只要耐心看下去一定能看明白的。但如果到這里已經(jīng)明白了原理，可以按照自己的方法自行推導(dǎo)，可跳過此過程，直接拉到最后看結(jié)論即可。

根據(jù)圖中的坐標(biāo)軸,以卡片1的左上角坐標(biāo)為原點(diǎn)，一共有四種飛出的情況：左上，左下，右上，右下。在這里以卡片從右上、左下兩個(gè)方向飛出為例進(jìn)行坐標(biāo)計(jì)算和分析（其他方向的分析方法相同） 。

1）第一種情況，當(dāng)卡片1滑向右上角，x方向應(yīng)該增加正值，y方向應(yīng)該增加負(fù)值。

即在Xb-X>0，Yb-Y<0的條件下：

因?yàn)榇藭r(shí)(Yb-Y)/(Xb-X)<0,

所以：

artan(Yb-Y)/(Xb-X)<0;

cos[arctan(Yb-Y)/(Xb-X)]>0;

sin[arctan(Yb-Y)/(Xb-X)]<0;

即：

Rcos[arctan(Yb-Y)/(Xb-X)]>0;

Rsin[arctan(Yb-Y)/(Xb-X)]<0;

x方向增加了正值，y方向增加了負(fù)值。

公式：

Xc=X+Rcosθ =X+Rcos[arctan(Yb-Y)/(Xb-X)]

Yc=Y+Rsinθ =X+Rsin[arctan(Yb-Y)/(Xb-X)]（在Xb-X>0，Yb-Y<0的條件下） 成立。

2）第二種情況，當(dāng)卡片1滑向左下角，x方向應(yīng)該增加負(fù)值，y方向應(yīng)該增加正值。

即在Xb-X<0，Yb-Y>0的條件下：

因?yàn)榇藭r(shí)(Yb-Y)/(Xb-X)<0,

所以：

artan(Yb-Y)/(Xb-X)<0;

cos[arctan(Yb-Y)/(Xb-X)]>0;

sin[arctan(Yb-Y)/(Xb-X)]<0;

即：

Rcos[arctan(Yb-Y)/(Xb-X)]>0;

Rsin[arctan(Yb-Y)/(Xb-X)]<0;

x方向增加了正值，y方向增加了負(fù)值。而實(shí)際x方向應(yīng)增加負(fù)值，y方向應(yīng)增加正值，所以需要將其變?yōu)橄喾磾?shù)。

公式變?yōu)椋?/p>

Xc=X-Rcosθ =X-Rcos[arctan(Yb-Y)/(Xb-X)]

Yc=Y-Rsinθ =X-Rsin[arctan(Yb-Y)/(Xb-X)]（在Xb-X<0，Yb-Y>0的條件下） 成立。

左上，右下分析方法同上。

3）綜上所述

當(dāng)卡片1移至左側(cè)(Xb-X<=0)時(shí)，即卡片1動(dòng)態(tài)面板接觸到錨點(diǎn)左或者接觸到錨點(diǎn)上（小于等于X）的部分，錨點(diǎn)下（小于等于X）的部分時(shí)，將卡片1動(dòng)態(tài)面板移動(dòng)到絕對(duì)位置，坐標(biāo)為（Xc，Yc） 。

使用公式：

Xc=X-Rcosθ =X-Rcos[arctan(Yb-Y)/(Xb-X)]

Yc=Y-Rsinθ =X-Rsin[arctan(Yb-Y)/(Xb-X)]

當(dāng)卡片移至右側(cè)(Xb-X>0)時(shí)，即卡片1動(dòng)態(tài)面板接觸到錨點(diǎn)右或者接觸到錨點(diǎn)上（大于X）的部分，錨點(diǎn)下（大于X）的部分時(shí)，將卡片1動(dòng)態(tài)面板移動(dòng)到絕對(duì)位置，坐標(biāo)為（Xc，Yc），

使用公式：

Xc=X+Rcosθ =X+Rcos[arctan(Yb-Y)/(Xb-X)]

Yc=Y+Rsinθ =X+Rsin[arctan(Yb-Y)/(Xb-X)]

（3）卡片1飛出后，設(shè)置什么觸發(fā)條件，能觸發(fā)卡片2的動(dòng)作？

在問題2解決的條件下，解決問題3就簡(jiǎn)單了。我們可以設(shè)置卡片1到達(dá)位置c時(shí)，將卡片1隱藏，那么當(dāng)卡片1隱藏時(shí)，觸發(fā)卡片2移動(dòng)且尺寸變大。

四. 最終實(shí)現(xiàn)

1.?完整的節(jié)點(diǎn)替換圖

在將流程的每一個(gè)節(jié)點(diǎn)成功替換成Axure的功能后，我們可以使用Axure來實(shí)現(xiàn)該交互效果了。完整的節(jié)點(diǎn)替換圖如下：

2. Axure實(shí)現(xiàn)步驟

（1）基礎(chǔ)設(shè)置

在本例中：

卡片1，卡片2，卡片3做好后，分別轉(zhuǎn)換為動(dòng)態(tài)面板。

• 卡片1的初始位置坐標(biāo)（X，Y）=（39,88），尺寸為282*460。
• 卡片1在松手的那一瞬間的坐標(biāo)（Xb，Yb），在后續(xù)Axure的設(shè)置中可以通過(This.x,This.y)獲取。
• 卡片2 的初始位置坐標(biāo)（53,95），尺寸為（282，446）。

R的值設(shè)為638。

設(shè)置四個(gè)錨點(diǎn)：

• 錨點(diǎn)上
• 錨點(diǎn)下
• 錨點(diǎn)左
• 錨點(diǎn)右

（2）事件設(shè)置

給卡片1設(shè)置交互事件：

1）“拖動(dòng)時(shí)”

Case1：移動(dòng)卡片1為拖動(dòng)——實(shí)現(xiàn)卡片可以朝任意方向拖動(dòng)的效果

2）“拖動(dòng)結(jié)束時(shí)”

case1：if接觸錨點(diǎn)左時(shí)——實(shí)現(xiàn)卡片朝左邊飛出并隱藏的效果。（設(shè)置等待是為了保證卡片不會(huì)在松手的那一瞬間就隱藏，下同）

Case2：Else if接觸錨點(diǎn)上（小于等于X）部分——實(shí)現(xiàn)卡片朝左上角方向飛出并隱藏的效果

Case3：Else if接觸錨點(diǎn)上（小于等于X）部分——實(shí)現(xiàn)卡片朝左上角方向飛出并隱藏的效果

Case4：Else if接觸錨點(diǎn)右時(shí)——實(shí)現(xiàn)卡片朝右邊飛出并隱藏的效果

Case5：Else if接觸錨點(diǎn)上（大于X）部分——實(shí)現(xiàn)卡片朝右上角飛出并隱藏的效果

Case6：Else if接觸錨點(diǎn)下（大于X）部分——實(shí)現(xiàn)卡片朝右下角飛出并隱藏的效果

Case7：Else if true（未接觸任一錨點(diǎn)）——實(shí)現(xiàn)卡片回到原位置的效果

3）“隱藏時(shí)”

實(shí)現(xiàn)卡片2移動(dòng)到卡片1位置并變?yōu)榭ㄆ?尺寸，卡片3移動(dòng)到卡片2位置并變?yōu)榭ㄆ?尺寸的效果

五. 結(jié)論

這篇文章描述了用axure實(shí)現(xiàn)“得到—看金句”交互效果的思考過程（算是拋磚引玉吧）。通過對(duì)做這個(gè)原型過程的思考，我們可以發(fā)現(xiàn)，在用Axure做原型時(shí)，大部分的交互效果都可以使用 “交互效果流程化，Axure功能來替換”的方法思考。通俗地講，就是每一個(gè)交互效果都定義成一個(gè)流程節(jié)點(diǎn)，再使用Axure中的功能對(duì)這些流程點(diǎn)進(jìn)行替換，這樣有助于我們理清思路，更快地找出方法實(shí)現(xiàn)我們想要的交互。比如在這個(gè)交互中，在替換時(shí)找到問題點(diǎn)，再一步步推出數(shù)學(xué)公式，最后再全部替換成Axure函數(shù)之后，就能實(shí)現(xiàn)我們想要的效果。

這是在我現(xiàn)有的知識(shí)水平下實(shí)現(xiàn)此交互的方法，如果有更好的方法能實(shí)現(xiàn)這個(gè)效果，可以留言一起交流，謝謝。

本文系作者@米拉蘋果 獨(dú)家授權(quán)發(fā)布，未經(jīng)本站許可，不得轉(zhuǎn)載。謝謝合作。