在畫原型的側(cè)邊欄時(shí)，不少產(chǎn)品經(jīng)理都會(huì)用到手風(fēng)琴效果，那么，怎么用動(dòng)態(tài)面板制作出手風(fēng)琴效果呢？這篇文章里，作者就做了總結(jié)和分享，一起來(lái)看看吧。

大家在畫原型的側(cè)邊欄的時(shí)候經(jīng)常會(huì)用到手風(fēng)琴效果，今天來(lái)給大家講解一下如何使用動(dòng)態(tài)面板制作手風(fēng)琴效果。

當(dāng)前還有進(jìn)階版的使用中繼器繪制手風(fēng)琴效果，不過(guò)我覺(jué)得動(dòng)態(tài)面板比較簡(jiǎn)單，比較適合新手，后續(xù)如果需要也出使用中繼器實(shí)現(xiàn)手風(fēng)琴效果的教程啦~

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

1. 首先第一步我們需要拽幾個(gè)動(dòng)態(tài)面板出來(lái)，我這邊演示拽了三個(gè)分別命名“菜單一”“菜單二”“菜單三”（規(guī)范清晰的命名能夠方便我們后續(xù)的操作）。

2. 每個(gè)面板可以添加多個(gè)state，我們這邊添加兩個(gè)state就夠啦，state1為菜單折疊狀態(tài)下的展示，state2為菜單展開狀態(tài)下的展示，我這邊命名為“折疊”和“展開”。

3. 現(xiàn)在對(duì)“展開”和“折疊”兩個(gè)state內(nèi)進(jìn)行填充，分別為菜單展開和折疊我們想要的樣子，我這邊“折疊”放了一個(gè)一級(jí)菜單，“展開”放了一個(gè)一級(jí)菜單，兩個(gè)二級(jí)菜單，其他兩個(gè)面板一樣操作就好了。

4. 內(nèi)容填充好了，現(xiàn)在我們可以加交互效果啦：選擇菜單一動(dòng)態(tài)面板添加交互，“單擊時(shí)”-“設(shè)置面板狀態(tài)”-選擇“菜單一’，state設(shè)置為“下一項(xiàng)”，選擇”向后循環(huán)“（這樣點(diǎn)擊就會(huì)不停的循環(huán)折疊展開兩個(gè)state了），選擇”推動(dòng)和拉動(dòng)元件“，選中”下方“；最后需要在樣式里面選中“自適應(yīng)內(nèi)容”就好啦~

5. 其他兩個(gè)菜單按照相同的方式操作，最后我們來(lái)看一下效果吧~

6. 如果想要效果更好看，我們還可以加上一些圖形和懸停效果哦，我這邊是在“折疊”和“展開”state上分別增加了向下和向上的箭頭，每個(gè)矩形框增加了懸停效果。

7. 最終效果如下：