當(dāng)前位置: 首頁(yè) > 攻略教程 > 軟件教程 > Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作

時(shí)間:2024-06-26 10:21:00 編輯:易網(wǎng)VIP游戲門戶 閱讀:0

許多網(wǎng)友還不太了解Axure,也還不了解Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的操作,而下面就分享了Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的操作方法,希望感興趣的朋友都來(lái)共同學(xué)習(xí)哦。

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作

我們需要先打開Axure軟件,在當(dāng)前Page 中拖入一個(gè)動(dòng)態(tài)面板,將面板命名為“顯示面板”。這個(gè)面板對(duì)應(yīng)著可見內(nèi)容。該例中的可見面板的位置為{97, 77},大小為{300, 450}。

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖

然后點(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)容尺寸”

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖

接著在內(nèi)容面板的State1 中添加一個(gè)中繼器。進(jìn)入中繼器下的矩形框,因?yàn)檫@里想要在中繼器中添加圖片,所以直接右鍵,選擇轉(zhuǎn)換為圖片,雙擊轉(zhuǎn)換后的框框就可以添加圖片了。

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖

內(nèi)容添加好了,接下來(lái)就是添加滑動(dòng)的事件。選擇“拖動(dòng)時(shí)”事件,選擇垂直拖動(dòng)。

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖

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

Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作截圖

根據(jù)上文講解的Axure設(shè)計(jì)上下滑動(dòng)頁(yè)面原型的具體操作方法,你們是不是都學(xué)會(huì)了呀!