在畫原型的側邊欄時，不少產品經理都會用到手風琴效果，那么，怎么用動態(tài)面板制作出手風琴效果呢？這篇文章里，作者就做了總結和分享，一起來看看吧。

大家在畫原型的側邊欄的時候經常會用到手風琴效果，今天來給大家講解一下如何使用動態(tài)面板制作手風琴效果。

當前還有進階版的使用中繼器繪制手風琴效果，不過我覺得動態(tài)面板比較簡單，比較適合新手，后續(xù)如果需要也出使用中繼器實現(xiàn)手風琴效果的教程啦~

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

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

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

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

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

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

7. 最終效果如下：