axure列表左右滑動(dòng) 如何使用axure進(jìn)行原型設(shè)計(jì)？

如何使用axure進(jìn)行原型設(shè)計(jì)？用axuraxure怎么弄左右滑動(dòng)提示？其實(shí)還是有些技巧的。Axure軟件動(dòng)態(tài)面板屬性可以滑動(dòng)，但是滑動(dòng)的結(jié)果只能是水平和垂直。但要達(dá)到同一頁(yè)面上下左右滑動(dòng)的效果，也不

如何使用axure進(jìn)行原型設(shè)計(jì)？

用axur

axure怎么弄左右滑動(dòng)提示？

其實(shí)還是有些技巧的。Axure軟件動(dòng)態(tài)面板屬性可以滑動(dòng)，但是滑動(dòng)的結(jié)果只能是水平和垂直。

但要達(dá)到同一頁(yè)面上下左右滑動(dòng)的效果，也不是不可能。

主要突破在于對(duì)條件的判斷。

讓 讓我們回想一下使用手機(jī)。在應(yīng)用軟件的情況下，按住屏幕不放。;不要松手向下滑動(dòng)屏幕。手機(jī)里面的頁(yè)面只能向下(向上)滑動(dòng)，無(wú)論你怎么左右滑動(dòng)手，結(jié)果還是會(huì)向下(向上)滑動(dòng)；左右滑動(dòng)屏幕也是如此。

所以當(dāng)手給屏幕一個(gè)動(dòng)作時(shí)，頁(yè)面判斷手滑屏的方向，手最初是向滑屏的方向移動(dòng)而不松手。屏幕移動(dòng)只能維持垂直或水平效果，無(wú)法從垂直移動(dòng)轉(zhuǎn)換為水平移動(dòng)，除非頁(yè)面放開(kāi)后再次判斷。也就是說(shuō)，手的初始運(yùn)動(dòng)決定了頁(yè)面滑動(dòng)的方向。

抓住這一點(diǎn)，通過(guò)Axure軟件的知識(shí)點(diǎn)，我想出了以下方案來(lái)實(shí)現(xiàn)這個(gè)功能。

一.重要定義

1.三個(gè)動(dòng)態(tài)面板

動(dòng)態(tài)面板A和B ——A和B是嵌套的，A在外層，B在內(nèi)層。

動(dòng)態(tài)面板C——兩種狀態(tài)循環(huán)記錄全局變量X和y

2.兩個(gè)全局變量

X沿X軸拖動(dòng)的總距離的絕對(duì)值向上取整([[數(shù)學(xué)。ABS(數(shù)學(xué)。Ceil (totaldragx)]])。

y沿y軸拖動(dòng)的總距離的絕對(duì)值向上舍入([[數(shù)學(xué)。ABS(數(shù)學(xué)。Ceil (totaldragy)]])。

二、核心問(wèn)題——比如準(zhǔn)確快速的知道手移動(dòng)屏幕的方向？

經(jīng)過(guò)多次嘗試，我終于測(cè)試出一種效果理想的方法:

拖動(dòng)動(dòng)態(tài)面板A時(shí)，動(dòng)態(tài)面板C的兩種狀態(tài)快速循環(huán)，并記錄其狀態(tài)變化時(shí)的全局變量X和Y，從而判斷拖動(dòng)動(dòng)態(tài)面板A時(shí)X和Y的大小，知道其頁(yè)面(動(dòng)態(tài)面板B)的滑動(dòng)方向。

流程圖如下:

第三，具體的原型設(shè)計(jì)

做一個(gè)手機(jī)殼，嵌入一個(gè)寬度為325X575的內(nèi)嵌框架，將框架連接到內(nèi)容頁(yè)面:

設(shè)置全局變量x和y；

點(diǎn)擊菜單欄中的-項(xiàng)目-全局變量，添加兩個(gè)全局變量X和Y，設(shè)置值為null或0；

在新頁(yè)面上添加一個(gè)帶頁(yè)碼的長(zhǎng)方形logo框，復(fù)制成三份，分別代表第一頁(yè)、第二頁(yè)、第三頁(yè)，名稱(chēng)分別為1、2、3。

圈出這三個(gè)頁(yè)面——右鍵——轉(zhuǎn)換成動(dòng)態(tài)面板，將動(dòng)態(tài)面板的名稱(chēng)設(shè)置為B，然后點(diǎn)擊動(dòng)態(tài)面板B——右鍵——轉(zhuǎn)換成動(dòng)態(tài)面板，將最外層的動(dòng)態(tài)面板的名稱(chēng)設(shè)置為a。

然后從動(dòng)態(tài)面板A中拖出一個(gè)新的動(dòng)態(tài)面板C，并將動(dòng)態(tài)面板狀態(tài)添加為2。

在動(dòng)態(tài)面板A上設(shè)置以下用例:

拖動(dòng)開(kāi)始時(shí):將動(dòng)態(tài)面板C的狀態(tài)設(shè)置為Next，以2ms(更短的時(shí)間)為間隔向后循環(huán)；

拖動(dòng)時(shí):判斷全局變量x和y的大小；

在xgty水平移動(dòng)動(dòng)態(tài)面板B，在xlty垂直移動(dòng)動(dòng)態(tài)面板B；

拖動(dòng)結(jié)束時(shí):設(shè)置動(dòng)態(tài)面板C停止循環(huán)。

在動(dòng)態(tài)面板上設(shè)置用例。

當(dāng)狀態(tài)改變時(shí):設(shè)置全局變量值。

x[[math . ABS(math . ceil(TotalDragX))]]，y[[math。abs(math.ceil(TotalDragY))]]

點(diǎn)擊菜單欄上的發(fā)布-預(yù)覽，可以看到同一個(gè)頁(yè)面實(shí)現(xiàn)了左右、上下兩種拖動(dòng)效果。

Emmmmmmm看著都覺(jué)得不舒服。我們可以進(jìn)一步改進(jìn)原型:

添加:

頁(yè)面拖動(dòng)范圍和水平拖動(dòng)的兩種效果

慢慢拖動(dòng)

快速拖動(dòng)

在原始原型的基礎(chǔ)上:

1.當(dāng)動(dòng)態(tài)面板A被拖拽-綁定-添加綁定時(shí)，可以添加頁(yè)面范圍的限制條件。

對(duì)于水平拖動(dòng)，我們知道動(dòng)態(tài)面板的組件B的寬度和高度是975X1000，單個(gè)矩形頁(yè)面的寬度和高度是325X1000。所以水平拖動(dòng)的極限范圍是[-650，0]，可以滿足水平拖動(dòng)時(shí)不會(huì)拖動(dòng)頁(yè)面瀏覽邊框的要求。

對(duì)于相同的垂直阻力，只需將邊界范圍限制在[-500，0]即可。