axure制作手機(jī)滾動(dòng)條效果的操作步驟

大家知道axure制作手機(jī)滾動(dòng)條效果嗎?下文小編就帶來了在axure制作手機(jī)滾動(dòng)條效果的簡(jiǎn)單使用教程，一起來看看吧!

axure制作手機(jī)滾動(dòng)條效果的操作步驟

1、打開axure軟件，點(diǎn)擊新建，然后將手機(jī)模型拖拽進(jìn)axure，點(diǎn)擊“動(dòng)態(tài)面板”將其往編輯窗口拖拽。如下圖

2、創(chuàng)建好動(dòng)態(tài)面板之后，按住“ctrl+c”將其復(fù)制下來，然后雙擊“外層動(dòng)態(tài)面板”下面的state1，然后按住“ctrl+v”將“外層動(dòng)態(tài)面板”復(fù)制下來

3、然后將復(fù)制下來的“外層動(dòng)態(tài)面板”的名字改為“內(nèi)層動(dòng)態(tài)面板”，然后雙擊“內(nèi)層動(dòng)態(tài)面板”下面的“state1”，進(jìn)入之后，將光標(biāo)放置于該編輯頁(yè)內(nèi)，然后點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊“滾動(dòng)條”，“自動(dòng)顯示垂直滾動(dòng)條”。這時(shí)候就會(huì)發(fā)現(xiàn)我們的“內(nèi)層動(dòng)態(tài)面板”下的“state1”已經(jīng)有一個(gè)滾動(dòng)條，如下圖

4、滾動(dòng)條做好之后，需要給動(dòng)態(tài)面板添加內(nèi)容，點(diǎn)擊“占位符”，并將其拖到動(dòng)態(tài)面板內(nèi)。

5、由于要體現(xiàn)的是一種滾動(dòng)狀態(tài)，所以內(nèi)容必須要長(zhǎng)于我們的動(dòng)態(tài)面板所顯示的范圍，所以需要多次添加內(nèi)容，按住“ctrl”拖動(dòng)剛才建立的“占位符”，即可復(fù)制。如下圖。

6、如果想要區(qū)分這些占位符，可以雙擊該占位符，然后向其中輸入自己想要的數(shù)據(jù)，如下圖

7、然后可以預(yù)覽我們做出來的效果了，按住F5，或者點(diǎn)擊上面的“預(yù)覽”，進(jìn)入網(wǎng)頁(yè)之后，上下滾動(dòng)鼠標(biāo)即可看出效果了。

8、這時(shí)候，覺得滾動(dòng)條那么難看，這時(shí)候返回我們的axure頁(yè)面，直接點(diǎn)擊“外層動(dòng)態(tài)面板”，然后將“內(nèi)層”面板的滾動(dòng)條拖拽到“外層動(dòng)態(tài)面板”的外面，如下圖。

9、然后可以預(yù)覽做出來的效果了，按住F5，或者點(diǎn)擊上面的“預(yù)覽”，進(jìn)入網(wǎng)頁(yè)之后，上下滾動(dòng)鼠標(biāo)即可看出效果了。

上文就講解了axure制作手機(jī)滾動(dòng)條效果的操作步驟，希望有需要的朋友都來學(xué)習(xí)哦。