深度分析:從交互效果的實(shí)現(xiàn),探討一下Axure背后的邏輯

5 評論 20027 瀏覽 70 收藏 19 分鐘

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

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

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

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

一. 最終效果

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

動(dòng)圖:

1

鏈接: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è)元素

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

(2)思考方式

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

三. 舉例分析

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

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

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

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

2

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

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

3

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è)邊緣,為了簡便,就設(shè)置成這個(gè)范圍),邊緣內(nèi)相當(dāng)于位置A,卡片1在邊緣內(nèi)移動(dòng),松手時(shí)回到原處,邊緣外相當(dāng)于位置B,卡片1超出了A,松手時(shí)即飛出。

4

那么在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),則飛出。飛出路徑,我們下一步討論。

5

(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連線,以該段長度為半徑畫一個(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)。

6

7

根據(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ì)算和分析(其他方向的分析方法相同) 。

8

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)到絕對位置,坐標(biāo)為(Xc,Yc) 。

使用公式:

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

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

9

當(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)到絕對位置,坐標(biāo)為(Xc,Yc),

使用公式:

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

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

10

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

在問題2解決的條件下,解決問題3就簡單了。我們可以設(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)替換圖如下:

11

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)右

5

(2)事件設(shè)置

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

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

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

12

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

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

13

14

15

16

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

17

18

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

19

20

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

21

22

23

24

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

25

26

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

27

28

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

29

3)“隱藏時(shí)”

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

30

31

32

33

五. 結(jié)論

這篇文章描述了用axure實(shí)現(xiàn)“得到—看金句”交互效果的思考過程(算是拋磚引玉吧)。通過對做這個(gè)原型過程的思考,我們可以發(fā)現(xiàn),在用Axure做原型時(shí),大部分的交互效果都可以使用 “交互效果流程化,Axure功能來替換”的方法思考。通俗地講,就是每一個(gè)交互效果都定義成一個(gè)流程節(jié)點(diǎn),再使用Axure中的功能對這些流程點(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)載。謝謝合作。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 首先感謝作者!認(rèn)為作者通過這么嚴(yán)謹(jǐn),甚至是數(shù)學(xué)函數(shù)的推導(dǎo)來看我就覺得很厲害,也很受啟發(fā),是不是還有其他很多方面,不光是動(dòng)效,也可以通過類似這樣嚴(yán)密的數(shù)學(xué)論證得出科學(xué)的選擇呢?當(dāng)然我也就是猜想。
    努力向作者看齊,平時(shí)多鉆研!共勉

    來自美國 回復(fù)
  2. 小白弱弱的請教,做這么復(fù)雜的交互,最終目的是什么?
    能想到的只能是先做個(gè)Demo做用戶測試? ?

    來自廣東 回復(fù)
    1. 我也是小白哈。就是一個(gè)思路的問題,沒有什么最終目的。我比較喜歡鉆研,看到個(gè)交互效果,就想把它實(shí)現(xiàn)出來,當(dāng)作練習(xí),沒什么目的哈。

      來自北京 回復(fù)
    2. :mrgreen:

      來自廣東 回復(fù)