axure想要設計一款手機app的側邊欄,該怎么設計呢?下面我們就來看看詳細的教程。
1、我們先打開我們的axure軟件,點擊新建,然后將我們的手機模型拖拽進我們的axure,點擊我們的“動態面板”將其往編輯窗口拖拽。如下圖
2、創建好我們的動態面板之后,按住“ctrl+c”將其復制下來,然后雙擊我們的“外層動態面板”下面的state1,然后按住“ctrl+v”將我們的“外層動態面板”復制下來
3、然后雙擊我們的“內層動態面板”下面的state1,然后點擊“矩形”,并將其圖案拖拽到我們的內層動態面板中,調整好位置,并給其填充顏色。
4、在拖進一個占位符,并調整其位置,如圖所示。
5、然后點擊我們導航欄上面的“外層”,并將我們的“內層”圖案拖拽平移一段距離,如下圖。
6、然后點擊“矩形”,用來量我們“外層”和“內層”之間的距離,方便我們的側邊欄的移動。如下圖。量出距離之后,即可將其刪掉。
7、點擊我們導航欄的“內層”,然后在我們選中我們剛才的“占位符”,然后點擊我們的“鼠標單擊時”選項,如下圖。
8、進入我們的“單擊鼠標時”之后,點擊“移動”,勾選“內層”,然后在下面的“y”內輸入我們剛才量出來的距離,即“-134”
9、點擊上面的“添加條件”選項,選擇“變量值”、“!=”“0”,然后點擊確定。
10、再次重復第八和第九步驟,“y”值改為“134”,其他不變,然后點擊上面的“添加條件”選項,選擇“變量值”、“==”“0”,然后點擊確定。
新聞熱點
疑難解答