Axure怎么制作上下滑動(dòng)的頁面原型?

Axure怎么制作上下滑動(dòng)的頁面原型?Axure中想要設(shè)計(jì)一個(gè)上下滾動(dòng)的頁面,該怎么制作這個(gè)頁面呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下

1、在當(dāng)前Page 中拖入一個(gè)動(dòng)態(tài)面板,將面板命名為“顯示面板”。這個(gè)面板對應(yīng)著可見內(nèi)容。該例中的可見面板的位置為{97, 77},大小為{300, 450}。文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-1文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-2文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

2、點(diǎn)擊進(jìn)入顯示面板的 State1。拖動(dòng)一個(gè)動(dòng)態(tài)面板到State1 中,面板命名為“內(nèi)容面板”。該面板的位置為{0, 0},因?yàn)檫@里要實(shí)現(xiàn)的是上下滑動(dòng)效果,所以寬度與顯示面板的一樣。高度根據(jù)全部顯示信息的內(nèi)容定。進(jìn)入內(nèi)容面板的 State1,選擇“自動(dòng)調(diào)整為內(nèi)容尺寸文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-3文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-4文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

3、在內(nèi)容面板的State1 中添加一個(gè)中繼器。進(jìn)入中繼器下的矩形框,因?yàn)檫@里想要在中繼器中添加圖片,所以直接右鍵,選擇轉(zhuǎn)換為圖片,雙擊轉(zhuǎn)換后的框框就可以添加圖片了。文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-5文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-6文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

4、內(nèi)容添加好了,接下來就是添加滑動(dòng)的事件。選擇“拖動(dòng)時(shí)”事件,選擇垂直拖動(dòng)。文章源自四五設(shè)計(jì)網(wǎng)-http://www.wasochina.com/37769.html

Axure怎么制作上下滑動(dòng)的頁面原型?-7

5、還需要添加約束條件,第二個(gè)約束值的計(jì)算:-(總的內(nèi)容高度 - 可見內(nèi)容高度)

Axure怎么制作上下滑動(dòng)的頁面原型?-8

以上就是Axure制作上下滑動(dòng)的頁面原型的圖文教程,希望大家喜歡。

我的微信
微信掃一掃
weinxin
我的微信
惠生活福利社
微信掃一掃
weinxin
我的公眾號
 

發(fā)表評論

匿名網(wǎng)友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖動(dòng)滑塊以完成驗(yàn)證