目前,很多Axure新人都在問如何實現界面上下滑動效果,網上相關的教程也不少,各有各的方法,但是很少有教程對滑動界限設置做出比較詳細的說明,其實在工作過程中,個人發現練好Axure是很有意提升逼格的,千萬不要說原型中做復雜的交互效果會浪費時間,不是每個隊友都能理解你的想象和詮釋,溝通成本更可怕...所以,連熟了Axure,在復雜的效果也只是分分鐘的事....

準備工作:

1.將(jiang)Rectangle(矩(ju)形)拖至畫布,大(da)小設置(zhi)(zhi)為w:326px h:640px,位置(zhi)(zhi)(0,0),圓角半徑38

2.在拖一個(ge)矩形至畫布,大(da)小設置(zhi)為w:320px h:568px 位(wei)置(zhi)(3,39)

此時(shi),一(yi)個建(jian)議的iPhone 5s屏幕就誕(dan)生了

下面步入正題

1.拖入(ru)一個Dynamic Panel(動態面板),取(qu)名First,大小設置(zhi)為w:320px h:568px 位(wei)置(zhi)(3,39),雙(shuang)擊(ji)狀(zhuang)態1

2.在狀態1中繼(ji)續添加動(dong)態面(mian)板(ban),取名second,大小設(she)置為w:320px h:800px 位置(0,0).

3.在second的狀態1中,添加圖片或者控件等,大小在w;320px h:800以內(nei)

4.返回(hui)到(dao)主頁面(mian)(home頁),單擊first動態面(mian)板,在交(jiao)互中雙(shuang)擊"拖動時"后(hou),進入(ru)case1編輯器,選擇移動,勾選second,設置為(wei)垂直移動

此刻,預(yu)覽下(xia)(xia),會發(fa)現(xian)已經實現(xian)了(le)頁(ye)面的(de)上下(xia)(xia)滑動(dong)效果,...但是,這個滑動(dong)是停不(bu)下(xia)(xia)來的(de),這就需要我(wo)們(men)添加判斷界限的(de)條件(jian),下(xia)(xia)面幾步(bu)比較關(guan)鍵

5.在主頁面(home頁)拖(tuo)一個熱區至畫布,取(qu)名hot1,大小(xiao)設置(zhi)w50,h10,位(wei)置(zhi)(131,44)

接著復(fu)制hot1取名(ming)hot2,位置(131,585)

..相信大家已經清楚了(le),這(zhe)兩個熱(re)區將(jiang)作(zuo)為我們判斷(duan)山下滑動界限的標志

6.還是在first的交互中,雙(shuang)擊"拖動結束時",在case1中,點(dian)擊"添加條件"

7.同時,case1的(de)動作(zuo)按下圖紅(hong)框中設置,到現(xian)在(zai),就完成了滑動上方界限(xian)的(de)限(xian)制

8.判(pan)斷滑動的下方(fang)界(jie)限就比(bi)較麻煩了,需(xu)要(yao)簡(jian)單算(suan)(suan)算(suan)(suan)坐(zuo)標,在(zai)主(zhu)頁(ye)面(mian)(home頁(ye))中在(zai)拖(tuo)一(yi)個矩(ju)形,大小(xiao)設(she)置w:320px h:800px (與second區域一(yi)樣(yang)大小(xiao)),并(bing)移動該控件覆(fu)蓋first區域(兩控件底邊(bian)重合),彈出(chu)來(lai)的坐(zuo)標y值(zhi)就是我們需(xu)要(yao)的,記下數值(zhi),刪掉矩(ju)形

9.在first的交互中,雙擊"拖(tuo)動結束時",新增case2,點擊"添加(jia)條件",并按下(xia)圖(tu)配(pei)置

10,同時,case2的(de)動(dong)作按下圖(tu)紅框中(zhong)設(she)置

11.大功告(gao)成...預覽吧