設計產品原型時,利用Axure7.0工具制作折疊菜單效果。
1、拖曳三個動態模板到空白頁上,分別命名為“tem1”,“tem2”,“tem3”
2、配置每個模板的屬性,在“部件屬性和樣式”中勾選“調整大小以適應內容”,此選項很重要,不然會造成重疊的效果
3、每個動態模板添加兩個狀態“state1”和“state2”,其中“state1”狀態為隱藏狀態,“state2”狀態為顯示狀態。以tem1模板為例進行說明。
4、對tem1按鈕下的三個要進行折疊的按鈕設置為“隱藏”狀態,如圖所示:
5、對tem1按鈕添加鼠標點擊效果用例。其中需要注意的時,state1狀態和state2狀態的轉換效果。如果設置從隱藏狀態state1到state2效果時,三個模板狀態的勾選。模板如果要選擇的狀態為顯示狀態,則同時勾選“顯示面板(如果隱藏)”和“展開/收起部件”,模板如果要選擇的狀態為隱藏狀態,則只需勾選“展開/收起部件”。對于該頁面內出現的面板都要進行狀態設置
6、將三個動態模板折疊起來
7、發布預覽效果即可
注意事項:
每個動態模板都要進行勾選“調整大小以適應內容”,否則有可能出現動態模板重疊的現象。
相關軟件:
axure怎么繪制流程圖中的箭頭?
axure左右側工具欄消失了該怎么恢復?
Axure RP Pro 7.0怎么制作Tab標簽效果?
新聞熱點
疑難解答