最近做原型想做一個(gè)手風(fēng)琴的效果，但是忘了怎么做的，于是百度了一些方法，發(fā)現(xiàn)大部分方法都會(huì)用到中繼器，覺得有點(diǎn)麻煩。后來(lái)翻看以前的書找到了原來(lái)學(xué)會(huì)的方法，現(xiàn)在分享給大家。

其實(shí)很簡(jiǎn)單，只需要使用“切換可見性”即可完成。（以Axure8為例）

第一步：繪制相關(guān)圖形

繪制三個(gè)矩形作為按鈕，分別命名為標(biāo)題一、標(biāo)題二、標(biāo)題三

再繪制三個(gè)動(dòng)態(tài)面板，里面填充一些可以區(qū)別的內(nèi)容，命名為內(nèi)容一、內(nèi)容二、內(nèi)容三

第二步：擺放圖形位置

標(biāo)題一與內(nèi)容一對(duì)應(yīng)，將內(nèi)容一放置在標(biāo)題一的下方，其他的依此類推，擺放完畢后，將動(dòng)態(tài)面板設(shè)為隱藏。

第三步：設(shè)置標(biāo)題一的動(dòng)態(tài)效果

選中標(biāo)題一，添加鼠標(biāo)點(diǎn)擊效果。選擇切換可見性，設(shè)置如下：

先選擇內(nèi)容一位設(shè)置為切換、推動(dòng)拉動(dòng)元件向下

再選擇內(nèi)容二（三），設(shè)置為隱藏、拉動(dòng)元件向下

第四步：設(shè)置標(biāo)題二

選中標(biāo)題二進(jìn)行鼠標(biāo)點(diǎn)擊的設(shè)置，和標(biāo)題一的設(shè)置基本一致，注意切換的是當(dāng)前標(biāo)題對(duì)應(yīng)的動(dòng)態(tài)面板，隱藏的是其他標(biāo)題的動(dòng)態(tài)面板

第五步：標(biāo)題三用同樣的方法，設(shè)置完后就可以預(yù)覽看效果了。

題外話：

1. 同樣的方法還可以設(shè)置左右的切換，在推動(dòng)\拉動(dòng)元件時(shí)選擇向右即可。

2. 如果想要做的效果是，展開內(nèi)容后，點(diǎn)擊其他標(biāo)題不收起，只有點(diǎn)擊當(dāng)前標(biāo)題時(shí)才收起，只需要將隱藏的動(dòng)作去掉即可。

3. 另外這種效果不僅可以做菜單也可以做內(nèi)容的展示，如下圖

Axure內(nèi)的設(shè)計(jì)：

預(yù)覽效果：

4. 以上演示的是Axure8的版本，如果使用的Axure7的話使用同樣的功能，動(dòng)作名稱有點(diǎn)區(qū)別，如下圖

本文由 @我是一頁(yè)安靜的美男紙 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。