Axure用一個功能搞定手風琴式菜單設計

24 評論 27806 瀏覽 101 收藏 4 分鐘

最近做原型想做一個手風琴的效果,但是忘了怎么做的,于是百度了一些方法,發(fā)現大部分方法都會用到中繼器,覺得有點麻煩。后來翻看以前的書找到了原來學會的方法,現在分享給大家。

其實很簡單,只需要使用“切換可見性”即可完成。(以Axure8為例)

第一步:繪制相關圖形

繪制三個矩形作為按鈕,分別命名為標題一、標題二、標題三

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

第二步:擺放圖形位置

標題一與內容一對應,將內容一放置在標題一的下方,其他的依此類推,擺放完畢后,將動態(tài)面板設為隱藏。

第三步:設置標題一的動態(tài)效果

選中標題一,添加鼠標點擊效果。選擇切換可見性,設置如下:

先選擇內容一位設置為切換、推動拉動元件向下

再選擇內容二(三),設置為隱藏、拉動元件向下

第四步:設置標題二

選中標題二進行鼠標點擊的設置,和標題一的設置基本一致,注意切換的是當前標題對應的動態(tài)面板,隱藏的是其他標題的動態(tài)面板

第五步:標題三用同樣的方法,設置完后就可以預覽看效果了。

題外話:

1. 同樣的方法還可以設置左右的切換,在推動\拉動元件時選擇向右即可。

2. 如果想要做的效果是,展開內容后,點擊其他標題不收起,只有點擊當前標題時才收起,只需要將隱藏的動作去掉即可。

3. 另外這種效果不僅可以做菜單也可以做內容的展示,如下圖

Axure內的設計:

預覽效果:

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這樣會產生一個問題,想請教一下,比如我在點擊展開標題二的內容二后,沒有收回內容二,我再去點擊標題三展開內容三,那么此時標題二后面的內容二隱藏了,但是位置沒有收回

    來自北京 回復
  2. 為什么不用中繼器呢

    來自北京 回復
  3. 效果做出來了,但是為什么第一次點擊的時候沒問題,點多了就會出問題 是什么原因?求解

    來自北京 回復
    1. 隱藏顯示的內容放動態(tài)面板里面更佳

      來自四川 回復
  4. 不錯不錯

    來自山西 回復
  5. 然并,用axure做動效是浪費繩命

    回復
    1. 有啥比較好呢

      回復
    2. 有啥比較好呢

      回復
    3. 可以試試principle

      來自上海 回復
  6. 只顯示一個菜單的,我比較習慣把一級菜單設為選項組,鼠標點擊選中,再設置選中時展開二級菜單,取消選中時隱藏收起二級菜單。設置好一組就可以批量復制了,不需要一個個去設置隱藏其他的二級菜單

    來自廣東 回復
  7. 學會啦,謝謝分享,很有用 ??

    來自湖北 回復
    1. (*^__^*)

      來自北京 回復
  8. 了不起 清晰明了。不過 題外話第2點,沒寫完啊

    來自重慶 回復
    1. 謝謝提醒,我去補充一下,(*^__^*)

      來自北京 回復
  9. 感激不盡。網上說的手風琴菜單效果沒有一個是說到點子上的 ??

    來自河南 回復
    1. (*^__^*)

      來自北京 回復
  10. 很詳細啊,棒

    來自廣東 回復
    1. O(∩_∩)O謝謝

      來自北京 回復
  11. 這個直接切換就可以了啊 為什么還要隱藏其他的呢?不是直接動態(tài)面板已經隱藏了嗎?

    來自云南 回復
    1. 是為了把元件給拉上去,隱藏的同時拉動下面的元件

      來自北京 回復
  12. 贊!

    來自上海 回復
    1. O(∩_∩)O謝謝

      來自北京 回復