Axure用一個功能搞定手風琴式菜單設計
最近做原型想做一個手風琴的效果,但是忘了怎么做的,于是百度了一些方法,發(fā)現大部分方法都會用到中繼器,覺得有點麻煩。后來翻看以前的書找到了原來學會的方法,現在分享給大家。
其實很簡單,只需要使用“切換可見性”即可完成。(以Axure8為例)
第一步:繪制相關圖形
繪制三個矩形作為按鈕,分別命名為標題一、標題二、標題三
再繪制三個動態(tài)面板,里面填充一些可以區(qū)別的內容,命名為內容一、內容二、內容三
第二步:擺放圖形位置
標題一與內容一對應,將內容一放置在標題一的下方,其他的依此類推,擺放完畢后,將動態(tài)面板設為隱藏。
第三步:設置標題一的動態(tài)效果
選中標題一,添加鼠標點擊效果。選擇切換可見性,設置如下:
先選擇內容一位設置為切換、推動拉動元件向下
再選擇內容二(三),設置為隱藏、拉動元件向下
第四步:設置標題二
選中標題二進行鼠標點擊的設置,和標題一的設置基本一致,注意切換的是當前標題對應的動態(tài)面板,隱藏的是其他標題的動態(tài)面板
第五步:標題三用同樣的方法,設置完后就可以預覽看效果了。
題外話:
1. 同樣的方法還可以設置左右的切換,在推動\拉動元件時選擇向右即可。
2. 如果想要做的效果是,展開內容后,點擊其他標題不收起,只有點擊當前標題時才收起,只需要將隱藏的動作去掉即可。
3. 另外這種效果不僅可以做菜單也可以做內容的展示,如下圖
Axure內的設計:
預覽效果:
4. 以上演示的是Axure8的版本,如果使用的Axure7的話使用同樣的功能,動作名稱有點區(qū)別,如下圖
本文由 @我是一頁安靜的美男紙 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。
評論
評論請登錄
這樣會產生一個問題,想請教一下,比如我在點擊展開標題二的內容二后,沒有收回內容二,我再去點擊標題三展開內容三,那么此時標題二后面的內容二隱藏了,但是位置沒有收回
為什么不用中繼器呢
效果做出來了,但是為什么第一次點擊的時候沒問題,點多了就會出問題 是什么原因?求解
隱藏顯示的內容放動態(tài)面板里面更佳
不錯不錯
然并,用axure做動效是浪費繩命
有啥比較好呢
有啥比較好呢
可以試試principle
只顯示一個菜單的,我比較習慣把一級菜單設為選項組,鼠標點擊選中,再設置選中時展開二級菜單,取消選中時隱藏收起二級菜單。設置好一組就可以批量復制了,不需要一個個去設置隱藏其他的二級菜單
學會啦,謝謝分享,很有用 ??
(*^__^*)
了不起 清晰明了。不過 題外話第2點,沒寫完啊
謝謝提醒,我去補充一下,(*^__^*)
感激不盡。網上說的手風琴菜單效果沒有一個是說到點子上的 ??
(*^__^*)
很詳細啊,棒
O(∩_∩)O謝謝
這個直接切換就可以了啊 為什么還要隱藏其他的呢?不是直接動態(tài)面板已經隱藏了嗎?
是為了把元件給拉上去,隱藏的同時拉動下面的元件
贊!
O(∩_∩)O謝謝