Axure 教程:使用移動(dòng)位置來實(shí)現(xiàn) Banner 輪播
這次我們來講解一個(gè)使用移動(dòng)位置來實(shí)現(xiàn) Banner 輪播的效果,一起來文中看看~
先說一個(gè)篇外話,我寫這個(gè)之前觀看了一位行業(yè)內(nèi)的大神利用全局變量做的輪播圖。話不多說,看圖:
使用變量需要編輯很多參數(shù),這對于新手來說有點(diǎn)不太容易理解,以下是該文件里面的變量設(shè)置:
交互用例( 圖片 1 的距離 ):
研究了一會(huì),對我這種工作一兩年的人來說還可以理解,但感覺對于新手來說,可能比較難接受、消化…尤其沒有學(xué)習(xí) Axure 全局變量的產(chǎn)品、交互們來說,更是需要花費(fèi)時(shí)間學(xué)習(xí)。
所以我打算做一個(gè)和以上類似的,利用移動(dòng)來實(shí)現(xiàn)是一種比較簡單的效果,也容易上手。文章我盡量寫得詳細(xì)一點(diǎn),讓大家都能學(xué)會(huì)這個(gè)效果( 往后各種小伙伴成大神之后就可以學(xué)學(xué)上面那種了 )。
一、準(zhǔn)備元件
- 打開 Axure 新建文件,拖取一個(gè)矩形:設(shè)置長度 300 px ,高度 200 px ,命名為 2 ;
- 然后再拖取兩個(gè)矩形:設(shè)置長度 200 px ,高度 133 px 一個(gè)命名為 1 ,一個(gè)為 3 ;
- 設(shè)置位置 :1 的 x y 軸為:( 0 , 34 ) 、 2 的 x y 軸為:( 160 、 0 ) ,3 的 x y 軸為 ( 420 , 34 )。
前提條件做完之后,如下圖:
二、設(shè)置矩形的的交互樣式
- 雙擊 “ 鼠標(biāo)單擊時(shí) ” ,將 1 置于頂部;
- 移動(dòng)圖片位置,設(shè)置圖片移動(dòng)?1 為( 160 , 0 )、 2 為( 420 , 34 )、3 為( 0 , 34 );
- 設(shè)置圖片尺寸,1 為長度 300 px ,寬度為 200 px ,2 和 3 的長度為 200 px , 寬度為 133 px 。
解說:
(1)因?yàn)閳D片 1 需要展示在三個(gè)圖片中間 ,需要修改位置、修改尺寸大小 ,且需要將中間的圖片置于頂部,才不會(huì)被另外兩個(gè)圖片擋到。
(2)其他設(shè)置 :
- 點(diǎn)擊 2 時(shí)置頂 2 圖片 ,設(shè)置圖片移動(dòng)?1 為( 0, 34 )、 2 為( 160 , 0 )、3 為( 420 , 34 ),設(shè)置尺寸大小?2 為長度 300 px ,寬度為 200 px ,1 和 3 的長度為 200 px , 寬度為 133 px;
- 點(diǎn)擊 3 時(shí)置頂 3 圖片 ,設(shè)置圖片移動(dòng)?1 為( 420 , 34 )、 2 為( 0 , 34 )、3 為( 160 , 0 ),設(shè)置尺寸大小 3?為長度 300 px ,寬度為 200 px ,1 和 2 的長度為 200 px , 寬度為 133 px 。
(3)這樣基本的點(diǎn)擊效果就已經(jīng)完成了,可以看下效果。各位小伙伴做完之后,是不是覺得簡單很多呢 ?
點(diǎn)擊圖片的操作一般應(yīng)用在 PC 端的 Banner 輪播切換 ,但在移動(dòng)端上面更多的輪播方式是左右拖動(dòng)(手動(dòng)) ,點(diǎn)擊的方式不適合在移動(dòng)端使用 。
接下來我們來嘗試一下在移動(dòng)端的做法…
三、進(jìn)階(移動(dòng)端操作)
- 全選三張圖片 ,右鍵轉(zhuǎn)換成動(dòng)態(tài)面板;
- 點(diǎn)擊動(dòng)態(tài)面板 ,雙擊 “ 向左拖動(dòng)結(jié)束時(shí) ” ,設(shè)置 Case 1 的條件:元件范圍 – 1 -未接觸 – 元件范圍 – 3 ,點(diǎn)擊確定;將 3 置于頂層,設(shè)置圖片移動(dòng)?1 為( 420 , 34 )、 2 為( 0 , 34 )、3 為( 160 , 0 ),設(shè)置尺寸?3?為長度 300 px ,寬度為 200 px ,1 和 2 的長度為 200 px , 寬度為 133 px?;后面需要再設(shè)置 2 未接觸 1 ,3 未接觸 2 ,以此類推。
- 設(shè)置完 “ 向左拖動(dòng)結(jié)束時(shí) ” 之后,需要再設(shè)置 “ 向右拖動(dòng)結(jié)束時(shí) ”,因?yàn)橐灰皇稣f文字太多,想必大家也不愿意看,所以直接上圖:
把上面所有條件設(shè)置完之后,就可以得到以下的效果( 圖里的按鈕只為了展示當(dāng)前的操作方式 ):
這樣我們就把所有的效果做完了,有沒有覺得比設(shè)置全局變量簡單一點(diǎn)呢?
以上就已制作完所有流程,需要源文件或者有相關(guān)問題討論的,歡迎在下方留言,謝謝。
本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自網(wǎng)絡(luò)
請問還能擁有源文件嗎
分享的鏈接無效了
請問前輩 如果是多圖同界面,圖片跑馬燈的效果怎么做呢?
做一個(gè)動(dòng)態(tài)面板,把頁面都放進(jìn)去,設(shè)置用例可以設(shè)置左/右拖動(dòng),或者載入時(shí)自行滑動(dòng),鼠標(biāo)移入/移出時(shí)暫停/繼續(xù)自行滑動(dòng)。
前輩不敢當(dāng),我是97年的
做出來是奔潰的,全部亂了
沒事慢慢來,好好消化一下就好了
axure預(yù)覽是不是有問題,怎么PC版的我弄完點(diǎn)一輪就崩了
一般沒有這種情況,在檢查硬件設(shè)備問題之外,看一下你Axure里面是不是設(shè)置有問題
1矩陣的點(diǎn)擊事件忘記改成絕對位置了,大佬方便留個(gè)微信么
gd826353355
想知道全局變量的方式是怎么實(shí)現(xiàn)的?按照上面的兩張圖設(shè)置之后結(jié)果不是理想中的樣子
實(shí)現(xiàn)設(shè)置好,后面設(shè)置用例時(shí)應(yīng)用這個(gè)全局變量即可
求分享
鏈接:https://pan.baidu.com/s/17HWheC5p55HDiY4siHgj_w 密碼:9qin
求分享
鏈接:https://pan.baidu.com/s/17HWheC5p55HDiY4siHgj_w 密碼:9qin
源文件求分享
鏈接:https://pan.baidu.com/s/17HWheC5p55HDiY4siHgj_w 密碼:9qin
收藏,源文件學(xué)習(xí)
需要源文件可以找我拿的哦 ~
收藏
相互學(xué)習(xí)
各位小伙伴想學(xué)習(xí)的可以搜索公眾號 “ UE_diary ” ,一起學(xué)習(xí)
鏈接:https://pan.baidu.com/s/17HWheC5p55HDiY4siHgj_w 密碼:9qin
學(xué)習(xí)一下,感謝分享
相互學(xué)習(xí)