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

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

其實，只要弄清Axure背后的邏輯，這個是很簡單的。

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

一. 最終效果

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

動圖：

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

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

二. 分析方法

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

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

（1）流程中涉及到的幾個元素

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

（2）思考方式

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

三. 舉例分析

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

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

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

按照我們在操作時所能見到的交互效果，使用角色、操作和輸出結(jié)果三個元素繪出流程圖。

2. 節(jié)點替換

接下來，將流程中的每一個節(jié)點，替換成Axure中的功能。暫時想不出來對應(yīng)的功能，就使用紅色標記出來，重點討論。

3. 問題點剖析

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

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

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

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

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

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

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

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

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

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

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

其中：

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

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

接下來，我們驗證這兩個公式是否符合所有情況？

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

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

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

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

因為此時(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方向增加了負值。

公式：

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)該增加負值，y方向應(yīng)該增加正值。

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

因為此時(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方向增加了負值。而實際x方向應(yīng)增加負值，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)時，即卡片1動態(tài)面板接觸到錨點左或者接觸到錨點上（小于等于X）的部分，錨點下（小于等于X）的部分時，將卡片1動態(tài)面板移動到絕對位置，坐標為（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)時，即卡片1動態(tài)面板接觸到錨點右或者接觸到錨點上（大于X）的部分，錨點下（大于X）的部分時，將卡片1動態(tài)面板移動到絕對位置，坐標為（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的動作？

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

四. 最終實現(xiàn)

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

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

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

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

在本例中：

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

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

R的值設(shè)為638。

設(shè)置四個錨點：

• 錨點上
• 錨點下
• 錨點左
• 錨點右

（2）事件設(shè)置

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

1）“拖動時”

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

2）“拖動結(jié)束時”

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

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

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

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

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

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

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

3）“隱藏時”

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

五. 結(jié)論

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

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

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