Axure用一個功能搞定手風(fēng)琴式菜單設(shè)計

24 評論 28102 瀏覽 100 收藏 4 分鐘

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

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

第一步:繪制相關(guān)圖形

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

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

第二步:擺放圖形位置

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

第三步:設(shè)置標(biāo)題一的動態(tài)效果

選中標(biāo)題一,添加鼠標(biāo)點擊效果。選擇切換可見性,設(shè)置如下:

先選擇內(nèi)容一位設(shè)置為切換、推動拉動元件向下

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

第四步:設(shè)置標(biāo)題二

選中標(biāo)題二進(jìn)行鼠標(biāo)點擊的設(shè)置,和標(biāo)題一的設(shè)置基本一致,注意切換的是當(dāng)前標(biāo)題對應(yīng)的動態(tài)面板,隱藏的是其他標(biāo)題的動態(tài)面板

第五步:標(biāo)題三用同樣的方法,設(shè)置完后就可以預(yù)覽看效果了。

題外話:

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

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

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

Axure內(nèi)的設(shè)計:

預(yù)覽效果:

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

 

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

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

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

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

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

      來自四川 回復(fù)
  4. 不錯不錯

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

    回復(fù)
    1. 有啥比較好呢

      回復(fù)
    2. 有啥比較好呢

      回復(fù)
    3. 可以試試principle

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

    來自廣東 回復(fù)
  7. 學(xué)會啦,謝謝分享,很有用 ??

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

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

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

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

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

      來自北京 回復(fù)
  10. 很詳細(xì)啊,棒

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

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

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

      來自北京 回復(fù)
  12. 贊!

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

      來自北京 回復(fù)