axure怎么設(shè)計手機app的側(cè)邊欄原型?
我要評論axure想要設(shè)計一款手機app的側(cè)邊欄，該怎么設(shè)計呢？下面我們就來看看詳細的教程。
1、我們先打開我們的axure軟件，點擊新建，然后將我們的手機模型拖拽進我們的axure，點擊我們的“動態(tài)面板”將其往編輯窗口拖拽。如下圖
2、創(chuàng)建好我們的動態(tài)面板之后，按住“ctrl+c”將其復(fù)制下來，然后雙擊我們的“外層動態(tài)面板”下面的state1，然后按住“ctrl+v”將我們的“外層動態(tài)面板”復(fù)制下來
3、然后雙擊我們的“內(nèi)層動態(tài)面板”下面的state1，然后點擊“矩形”，并將其圖案拖拽到我們的內(nèi)層動態(tài)面板中，調(diào)整好位置，并給其填充顏色。
4、在拖進一個占位符，并調(diào)整其位置，如圖所示。
5、然后點擊我們導(dǎo)航欄上面的“外層”，并將我們的“內(nèi)層”圖案拖拽平移一段距離，如下圖。
6、然后點擊“矩形”，用來量我們“外層”和“內(nèi)層”之間的距離，方便我們的側(cè)邊欄的移動。如下圖。量出距離之后，即可將其刪掉。
7、點擊我們導(dǎo)航欄的“內(nèi)層”，然后在我們選中我們剛才的“占位符”，然后點擊我們的“鼠標單擊時”選項，如下圖。
8、進入我們的“單擊鼠標時”之后，點擊“移動”，勾選“內(nèi)層”，然后在下面的“y”內(nèi)輸入我們剛才量出來的距離，即“-134”
9、點擊上面的“添加條件”選項，選擇“變量值”、“！=”“0”，然后點擊確定。
10、再次重復(fù)第八和第九步驟，“y”值改為“134”，其他不變，然后點擊上面的“添加條件”選項，選擇“變量值”、“==”“0”，然后點擊確定。
11、然后再次點擊我們的“case1”，找到并點擊下面的“設(shè)置變量值”，勾選“變量”，然后將變量值設(shè)為“0”，點擊確定，“case2”我們也重復(fù)此動作，只是在設(shè)置變量值時，不設(shè)為0即可。
12、最后，我們可以預(yù)覽我們做出來的效果了，我們按住F5，或者點擊上面的“預(yù)覽”，進入網(wǎng)頁之后，我們上下滾動鼠標即可看出我們的效果了。
以上就是axure制作手機app的側(cè)邊欄的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Axure RP 8怎么模擬手機界面顯示應(yīng)用圖標的效果?
相關(guān)文章
Axure RP 8對象怎么組合和取消組合？Axure RP 8中的元素需要組合到一起，該怎么組合或者取消組合呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-17
Axure RP 8怎么設(shè)計注冊頁面的網(wǎng)頁原型?
Axure RP 8怎么設(shè)計注冊頁面的網(wǎng)頁原型？很多網(wǎng)站都會有注冊頁面，想要設(shè)計一款注冊頁面，該怎么設(shè)計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-15
Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏？Axure中想要制作單擊按鈕觸發(fā)圖片顯示出來的效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-15
Axure怎么繪制柱狀圖圖形？Axure中想要繪制一個柱狀圖，該怎么繪制呢？下面我們就來看看Axure繪制柱狀圖的教程，很簡單，需要的朋友可以參考下2018-01-14
Axure RP8怎么導(dǎo)入RP文件? Axure導(dǎo)入本地RP文件的教程
Axure RP8怎么導(dǎo)入RP文件？Axure RP8設(shè)計模型很簡單，想要將本地的RP文件文件導(dǎo)入到axure中，該怎么導(dǎo)入呢？下面我們就來看看Axure導(dǎo)入本地RP文件的教程，需要的朋友可以參2018-01-14
Axure怎么做表格隨著鼠標移動改變顏色？Axure中的表格當鼠標選中某行的時候，顏色發(fā)生變化，鼠標移開以后表格恢復(fù)原來顏色，下面我們就來看看詳細的教程，需要的朋友可以參2018-01-11
Axure怎么導(dǎo)入本地的按鈕? Axure打開本地文件的技巧
Axure怎么導(dǎo)入本地的按鈕？Axure設(shè)計網(wǎng)頁圓形的時候，想要導(dǎo)入本地的按鈕，該怎么導(dǎo)入呢？下面我們就來看看Axure打開本地文件的技巧，需要的朋友可以參考下2018-01-10
Axure設(shè)計的登陸頁面怎么生成網(wǎng)頁原型?
Axure設(shè)計的登陸頁面怎么生成網(wǎng)頁原型？Axure中設(shè)計的登陸網(wǎng)頁想要直接生成網(wǎng)頁原型，該怎么生成呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-10
Axure文件怎么生成html分享鏈接？Axure中設(shè)計的模型想要分享給朋友觀看，該怎么生成html鏈接呢？下面我們就來看看2017-12-21
Axure RP怎么制作選項卡控件？網(wǎng)頁需要選項卡控件，但是Axure RP中沒有選項卡控件，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-21
