axure怎么設(shè)計(jì)手機(jī)app的側(cè)邊欄原型?

2020-01-29 16:31:15

字體：大中小

供稿：網(wǎng)友

axure想要設(shè)計(jì)一款手機(jī)app的側(cè)邊欄，該怎么設(shè)計(jì)呢？下面我們就來看看詳細(xì)的教程。

軟件名稱：: 原型設(shè)計(jì)工具Axure RP Pro 8.1特別版中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)
軟件大小：: 90.5MB
更新時(shí)間：: 2018-05-24

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、然后雙擊我們的“內(nèi)層動(dòng)態(tài)面板”下面的state1，然后點(diǎn)擊“矩形”，并將其圖案拖拽到我們的內(nèi)層動(dòng)態(tài)面板中，調(diào)整好位置，并給其填充顏色。

4、在拖進(jìn)一個(gè)占位符，并調(diào)整其位置，如圖所示。

5、然后點(diǎn)擊我們導(dǎo)航欄上面的“外層”，并將我們的“內(nèi)層”圖案拖拽平移一段距離，如下圖。

6、然后點(diǎn)擊“矩形”，用來量我們“外層”和“內(nèi)層”之間的距離，方便我們的側(cè)邊欄的移動(dòng)。如下圖。量出距離之后，即可將其刪掉。

7、點(diǎn)擊我們導(dǎo)航欄的“內(nèi)層”，然后在我們選中我們剛才的“占位符”，然后點(diǎn)擊我們的“鼠標(biāo)單擊時(shí)”選項(xiàng)，如下圖。

8、進(jìn)入我們的“單擊鼠標(biāo)時(shí)”之后，點(diǎn)擊“移動(dòng)”，勾選“內(nèi)層”，然后在下面的“y”內(nèi)輸入我們剛才量出來的距離，即“-134”

9、點(diǎn)擊上面的“添加條件”選項(xiàng)，選擇“變量值”、“！=”“0”，然后點(diǎn)擊確定。

10、再次重復(fù)第八和第九步驟，“y”值改為“134”，其他不變，然后點(diǎn)擊上面的“添加條件”選項(xiàng)，選擇“變量值”、“==”“0”，然后點(diǎn)擊確定。

11、然后再次點(diǎn)擊我們的“case1”，找到并點(diǎn)擊下面的“設(shè)置變量值”，勾選“變量”，然后將變量值設(shè)為“0”，點(diǎn)擊確定，“case2”我們也重復(fù)此動(dòng)作，只是在設(shè)置變量值時(shí)，不設(shè)為0即可。