Axure 教程:制作折疊菜單

34 評(píng)論 31597 瀏覽 89 收藏 6 分鐘

本次教各位小伙伴制作折疊菜單,這次的做法比較簡(jiǎn)單,大家都可以輕松的學(xué)會(huì)。

下面開(kāi)始制作原型 ~

一、準(zhǔn)備元件

  1. 打開(kāi) Axure 新建文件,拉出一個(gè)矩形,w 為 200 px,h 為 40 px,色值為 #333333,在矩形內(nèi)輸入“一級(jí)菜單”,然后命名為“一級(jí)菜單”;
  2. 拖進(jìn)一個(gè)矩形,同樣 w 為 200 px ,h 為 40 px ,色值改為 #FFFFFF( 純白色 ),在矩形內(nèi)輸入“選項(xiàng)一”;
  3. 把“選項(xiàng)一” 在復(fù)制兩個(gè)出來(lái),分別叫“選項(xiàng)二 ”、“選項(xiàng)三” 。

完成了以上動(dòng)作,就可以得到一下的展示,看圖:

好了,完成之后我們就來(lái)開(kāi)始做第二步 ~

二、設(shè)置交互樣式

(1)全選“選項(xiàng)一、二、三 ”,右鍵點(diǎn)擊 交互樣式設(shè)置 ,選擇鼠標(biāo)懸停 – 填充顏色 – 色值為 #F2F2F2 、然后再選 選中 – 填充顏色 – 色值 #E4E4E4 。

如圖:

(2)繼續(xù)選中“選項(xiàng)一、二、三 ”,右鍵點(diǎn)擊設(shè)置選項(xiàng)組名稱 ,命名為“選項(xiàng)”、選擇“選項(xiàng)一”右鍵點(diǎn)擊 選中( 默認(rèn)選中 ),完成 。

完成了以上的設(shè)置,繼續(xù)下一步 ~

三、設(shè)置交互用例

(1)選擇“選項(xiàng)一 ”,設(shè)置鼠標(biāo)點(diǎn)擊時(shí) – 選中 – 選擇 This 為 ture ,點(diǎn)擊確定。( 選項(xiàng)二、三同上設(shè)置,復(fù)制粘貼過(guò)去即可 )。

完成以上設(shè)置,我們的選項(xiàng)就可以點(diǎn)擊切換了,看效果:

(2)把 “選項(xiàng)一、二、三 ” 選中,右鍵點(diǎn)擊 轉(zhuǎn)換為動(dòng)態(tài)面板,命名為 “選項(xiàng) ” ,點(diǎn)擊把該面板隱藏。

(3)設(shè)置“一級(jí)菜單 ” ,設(shè)置鼠標(biāo)單擊時(shí) – 設(shè)置面板狀態(tài) – 可見(jiàn)性:切換 、 動(dòng)畫:顯示時(shí)向下 / 隱藏時(shí)向上,動(dòng)畫為:線性,250 毫秒 、 勾上置于頂層 、 勾上推動(dòng)元件,方向?yàn)橄路?,?dòng)畫為:線性,250毫秒。

這樣就完成了,為了防止大家設(shè)置錯(cuò)誤,下面放一張?jiān)O(shè)置的圖:

再附一張效果圖:

完成以上的制作,我們會(huì)看到了這只是單個(gè)菜單而已,我們可以給它復(fù)制多個(gè)折疊菜單在一起。

四、進(jìn)階

(1)全選所有元件、動(dòng)態(tài)面板 – 右鍵點(diǎn)擊組合,然后我們給它復(fù)制粘貼 n 個(gè),按照以下方式排列:

(2)因前面用戶設(shè)置的時(shí)候,我們已經(jīng)把 “推動(dòng)元件 ” 設(shè)置好了 ,所以后面無(wú)需再設(shè)置。但前面所做的,我們把 “選項(xiàng)一 ” 設(shè)置為默認(rèn)選中狀態(tài),這里我們又復(fù)制了兩個(gè),所以我們需要把多復(fù)制出來(lái)的兩個(gè) “選項(xiàng)一 ”去掉默認(rèn)選中狀態(tài) 。

設(shè)置完,繼續(xù)看效果:

百度云鏈接:https://pan.baidu.com/s/1Axn4oFEmWkhsNtdfPlKrlA 密碼:89j0

到這里就完成所有制作了,如有相關(guān)問(wèn)題請(qǐng)?jiān)谙路搅粞裕x謝大家觀看。

注:以上部分內(nèi)容是經(jīng)過(guò)我們的 Phoenix 老師的指導(dǎo)完成的( 其實(shí)就是大半夜兩個(gè)夜貓子在群里討論效果該如何實(shí)現(xiàn)比較好,哈哈哈 ),在這里為 Phoenix 老師的敬業(yè)點(diǎn)個(gè)贊。

 

本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 二級(jí)菜單數(shù)量不一樣就沒(méi)辦了

    回復(fù)
  2. 作者的文章都很優(yōu)質(zhì),贊一個(gè)

    來(lái)自廣東 回復(fù)
  3. 請(qǐng)教一下,點(diǎn)擊 第一個(gè)‘一級(jí)菜單’,展開(kāi), 點(diǎn)擊第二個(gè)‘一級(jí)菜單’,展開(kāi)的同時(shí)收縮第一個(gè)‘一級(jí)菜單’,大神請(qǐng)指教

    來(lái)自湖南 回復(fù)
    1. 1.選中所有一級(jí)菜單,右鍵設(shè)置為同一個(gè)選項(xiàng)組,設(shè)置單擊時(shí)選中為this;
      2.設(shè)置每個(gè)一級(jí)菜單的,選中時(shí)顯示子級(jí),非選中時(shí)隱藏子級(jí)。

      來(lái)自廣東 回復(fù)
    2. 不太明白你說(shuō)的這個(gè)操作,可以說(shuō)的詳細(xì)一點(diǎn)嗎?

      來(lái)自內(nèi)蒙古 回復(fù)
  4. 源文件下載地址鏈接:https://pan.baidu.com/s/1fMOiM8QAYqFunRfvusNQgQ 密碼:dcl6
    若還有不清楚的,我主頁(yè)有聯(lián)系方式,歡迎大家相互學(xué)習(xí)。

    來(lái)自廣東 回復(fù)
  5. 大神 連接還能下載嗎 謝謝了 做了很多修改 但是無(wú)法完成同時(shí)收起三個(gè)主菜單 想看源文件的設(shè)計(jì)構(gòu)思 謝謝

    來(lái)自重慶 回復(fù)
    1. 已在評(píng)論區(qū)放下載鏈接

      來(lái)自廣東 回復(fù)
  6. 大神 連接還能下載嗎 謝謝了

    來(lái)自江蘇 回復(fù)
    1. 已在評(píng)論區(qū)放下載鏈接

      來(lái)自廣東 回復(fù)
  7. 做好了之后復(fù)制了三個(gè)疊在一起 預(yù)覽的時(shí)候點(diǎn)擊第一個(gè)一級(jí)標(biāo)題只有相應(yīng)的二級(jí)標(biāo)題展開(kāi) 下面的兩個(gè)一級(jí)標(biāo)題位置不動(dòng)造成內(nèi)容重疊 請(qǐng)問(wèn)這個(gè)如何解決

    來(lái)自江蘇 回復(fù)
  8. 怎么樣設(shè)置可以實(shí)現(xiàn):點(diǎn)擊某個(gè)選項(xiàng),同時(shí)實(shí)現(xiàn)打開(kāi)一個(gè)鏈接,并且保持它的選中狀態(tài)
    在case一里加兩步,無(wú)法實(shí)現(xiàn)
    加兩個(gè)case又很雞肋

    來(lái)自浙江 回復(fù)
    1. 利用全局變量試試

      回復(fù)
  9. (1)選擇“選項(xiàng)一 ”,設(shè)置鼠標(biāo)點(diǎn)擊時(shí) – 選中 – 選擇 This 為 ture ,點(diǎn)擊確定。( 選項(xiàng)二、三同上設(shè)置,復(fù)制粘貼過(guò)去即可 )。,,,這一步怎么做??

    回復(fù)
    1. 點(diǎn)擊需要復(fù)制的用例Ctrl + C ,然后選擇賦予這個(gè)用例的元件 Ctrl + V …你說(shuō)的是這個(gè)嗎

      來(lái)自廣東 回復(fù)
  10. 你好,我做完之后,如果正常單擊一級(jí)菜單,二級(jí)菜單完全出現(xiàn)之后再點(diǎn)一次二級(jí)菜單隱藏,可是如果在二級(jí)菜單沒(méi)有完全顯示出來(lái),再單擊一級(jí)菜單,(快速單擊兩次)下面的一級(jí)菜單和二級(jí)菜單位置會(huì)發(fā)生變化(單擊兩次完全是習(xí)慣),怎么解決?

    來(lái)自甘肅 回復(fù)
    1. 你那種情況我試過(guò),確實(shí)會(huì)有問(wèn)題;
      你只需要把二級(jí)菜單全選-右鍵點(diǎn)擊轉(zhuǎn)換成動(dòng)態(tài)面板,只要加了動(dòng)態(tài)面板就不會(huì)有問(wèn)題了

      來(lái)自廣東 回復(fù)
  11. 找到原因了,瀏覽器不知道怎么辦成了90%縮放了,謝謝大神,這個(gè)方法太方便了,原來(lái)我做的方式太復(fù)雜了,經(jīng)常把自己搞暈

    來(lái)自北京 回復(fù)
    1. 相互學(xué)習(xí) ??

      來(lái)自廣東 回復(fù)
  12. 下載附件及按照步驟 做完以后 有錯(cuò)誤,不知道怎么誰(shuí)是呀。點(diǎn)擊第一個(gè)一級(jí)選項(xiàng)展開(kāi)后,第二個(gè)一級(jí)選項(xiàng)就看不到了

    來(lái)自北京 回復(fù)
    1. 我也是!求解~~ ??

      來(lái)自北京 回復(fù)
    2. 先做一個(gè)出來(lái),再在原有的基礎(chǔ)上復(fù)制幾個(gè)出來(lái)

      來(lái)自廣東 回復(fù)
  13. 感謝作者~

    來(lái)自北京 回復(fù)
    1. 相互學(xué)習(xí)

      來(lái)自廣東 回復(fù)
  14. 蠻清楚的,以前我做的折疊太復(fù)雜了 ?

    來(lái)自廣東 回復(fù)
    1. 如果有不清楚的我還能再清楚點(diǎn),老鐵

      來(lái)自廣東 回復(fù)
  15. 如果是三級(jí)菜單呢,有沒(méi)有教程,感謝

    來(lái)自四川 回復(fù)
    1. 重復(fù) 四、進(jìn)階 里面的(1)、(2)操作就可以了

      來(lái)自廣東 回復(fù)
    2. 你確定?

      來(lái)自廣東 回復(fù)
    3. 你可以試試的,不清楚的找我聯(lián)系。我們一起解決這個(gè)問(wèn)題唄

      來(lái)自廣東 回復(fù)
  16. 請(qǐng)問(wèn)題一下,三(1)中設(shè)置選中的時(shí)候,要把其他選項(xiàng)設(shè)置為不選中吧?

    來(lái)自廣東 回復(fù)
    1. 已經(jīng)設(shè)置了選項(xiàng)組,選中項(xiàng)會(huì)自動(dòng)切換,所以不需要設(shè)置不選中

      來(lái)自廣東 回復(fù)
    2. 了解,非常感謝。

      來(lái)自廣東 回復(fù)
    3. 相互學(xué)習(xí) ??

      來(lái)自廣東 回復(fù)