axure7.0怎么制作折疊和展開的菜單效果?

Axure RP是互聯(lián)網(wǎng)行業(yè)中產(chǎn)品經(jīng)理的常用軟件,學(xué)會(huì)它可以快速得畫出產(chǎn)品界面的原始樣子(交互原型),之后設(shè)計(jì)師再將其加工,糅合之后便是大家使用軟件看到的樣子啦。這里來講下,產(chǎn)品、網(wǎng)頁界面中常見的自由折疊和展開效果制作方法,見下方效果圖。
從左側(cè)部件庫中拖拉2個(gè)矩形,按照個(gè)人設(shè)定的樣式,直接用鼠標(biāo)拖拉調(diào)整好;然后復(fù)制矩形——選中要復(fù)制的內(nèi)容,按住ctrl鍵,將光標(biāo)移至矩形處變成一個(gè)雙十字箭頭(可移動(dòng)標(biāo)志)后,按住鼠標(biāo)往旁邊拉動(dòng),即復(fù)制成功。這里以復(fù)制兩個(gè)后的三個(gè)為例。
為便于區(qū)分,分別給三個(gè)色塊填充上不同的顏色,并給六個(gè)矩形分別命名,還可分別輸入文字加強(qiáng)識(shí)別。
將下面的三個(gè)內(nèi)容框矩形設(shè)為隱藏:選中要隱藏的部件,點(diǎn)擊勾選“hidden”;接著,把綠色部分移到黃色標(biāo)題欄下面,遮住綠色隱藏部分,粉紅色類推,變成圖中的左側(cè)堆疊形態(tài)。
點(diǎn)擊黃標(biāo)題欄——雙擊右側(cè)“鼠標(biāo)點(diǎn)擊時(shí)”添加用例——選擇左側(cè)“顯示/隱藏”部件——右側(cè)配置動(dòng)作中,勾選黃標(biāo)題欄——可見性中選擇“切換”——勾選“推/拉部件”,方向選擇“下方”,點(diǎn)擊確定(亦可跟隨圖示按步驟進(jìn)行)。
接著,對(duì)綠標(biāo)題欄、粉紅標(biāo)題欄進(jìn)行同樣的操作。標(biāo)題欄設(shè)置完成后,點(diǎn)擊演示鍵,即可查看效果。
注意事項(xiàng):添加用例時(shí),點(diǎn)擊的是標(biāo)題欄部件。而設(shè)置顯示和隱藏時(shí),勾選的是各標(biāo)題欄下方的內(nèi)容框。
相關(guān)推薦:
AxureRP 7.0實(shí)現(xiàn)天貓登錄的詳細(xì)教程
Axure怎么制作頁面滾動(dòng)時(shí)菜單固定在頂部的頁面?
相關(guān)文章
Axure怎么制作頁面滾動(dòng)時(shí)菜單固定在頂部的頁面?
Axure怎么制作頁面滾動(dòng)時(shí)菜單固定在頂部的頁面?本文介紹如何做一個(gè)在滾動(dòng)中將菜單固定在頂部的頁面,屬于中級(jí)Axure案例。本文旨在展示交互效果,不對(duì)頁面具體內(nèi)容和UI進(jìn)行2015-07-10AxureRP 7.0實(shí)現(xiàn)天貓登錄的詳細(xì)教程
用AxureRP 7.0怎么實(shí)現(xiàn)天貓登錄?其實(shí)很方便,只要簡(jiǎn)單的應(yīng)用動(dòng)態(tài)面板和屬性設(shè)置就可以輕松搞定了,下面我們一起來看看AxureRP 7.0實(shí)現(xiàn)天貓登錄的詳細(xì)教程2015-05-28- Axure是設(shè)計(jì)師最常用的的原型設(shè)計(jì)工具之一,Axure RP 7.0版本相較6.5版本也有了比較大的改變。這里就介紹一下Axure RP 7.0的快捷鍵,需要的朋友可以看看2014-06-25