編輯導(dǎo)語：二級(jí)菜單是常見的操作樣式，為避免緊急情況下不知如何操作，也許你需要了解一下二級(jí)菜單的制作過程。那么，如何利用Axure來制作二級(jí)菜單？本篇文章里，作者便結(jié)合Axure梳理了一份二級(jí)菜單Axure制作和使用教程，一起來看一下。

前段時(shí)間跟甲方領(lǐng)導(dǎo)一塊去開會(huì)，當(dāng)時(shí)主要是因?yàn)橛袀€(gè)項(xiàng)目比較著急，需要現(xiàn)場(chǎng)修改原型，修改過程中需要用到三級(jí)折疊菜單，當(dāng)時(shí)怎么也整不出來，最后把二級(jí)菜單的樣式修改了一下，雖然蒙混過關(guān)，但是真的覺得特別尷尬。

會(huì)議結(jié)束后，我就緊急研究了一下怎樣用更加簡(jiǎn)單的方式實(shí)現(xiàn)三級(jí)折疊菜單的制作與使用，過程中我們先將二級(jí)菜單的制作過程展示出來。

話不多說，先上效果圖（看著有些單調(diào)，如果想要其他效果，歡迎催更~）。

接下來，我們說一下制作方法。

一、用到的元件

Axure 9.0元件庫中的矩形、阿里巴巴矢量圖標(biāo)庫中搜索的一級(jí)菜單圖標(biāo)及向下箭頭。

二、一級(jí)菜單制作

使用鼠標(biāo)將Axure9.0自帶元件庫中的矩形拖拽至頁面固定位置，【“樣式”頁面/工具欄】設(shè)置矩形大小、邊框、填充顏色。

【“樣式”頁面/工具欄】設(shè)置菜單名稱的字體大小、顏色，【功能區(qū)->樣式】設(shè)置內(nèi)容與矩形的邊距。

選中矩形，點(diǎn)擊鼠標(biāo)右鍵，選擇【交互樣式】，設(shè)置菜單名稱鼠標(biāo)懸停樣式中的字色，點(diǎn)擊【確定】。

將從【阿里巴巴矢量圖標(biāo)庫】中搜索的一級(jí)菜單圖標(biāo)調(diào)整好顏色和大小，放在菜單名稱前面合適的位置，將向下箭頭圖標(biāo)放在菜單名稱的后面，表示折疊效果。

選擇矩形、圖標(biāo)、向下箭頭，點(diǎn)擊【中部】按鈕，調(diào)整樣式至中部對(duì)齊。

一級(jí)菜單制作完成。

三、二級(jí)菜單制作

同時(shí)選中一級(jí)菜單圖標(biāo)、矩形、向下箭頭，點(diǎn)擊【工具欄】中的【組合】按鈕，同時(shí)，選擇【交互->出發(fā)內(nèi)部元件鼠標(biāo)交互樣式】。

完成組件之間的組合后，單擊鼠標(biāo)右鍵選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，命名為“一級(jí)菜單1”。

雙擊“一級(jí)菜單1”動(dòng)態(tài)面板，此時(shí)一級(jí)菜單轉(zhuǎn)化為動(dòng)態(tài)面板中的state1，點(diǎn)擊后面的復(fù)制狀態(tài)按鈕新增state2。

打開state2頁面，修改state2頁面一級(jí)菜單樣式，選擇向下箭頭，調(diào)整向下箭頭【位置與尺寸】，旋轉(zhuǎn)180°，箭頭向上顯示為菜單展開效果。

鼠標(biāo)選中一級(jí)菜單樣式，同時(shí)按住鍵盤中的【Ctrl】鍵，將一級(jí)菜單樣式復(fù)制一份到該樣式下方，調(diào)整至左右對(duì)齊，刪除圖標(biāo)及向下箭頭（或根據(jù)需求自行調(diào)整樣式），修改菜單字樣為“二級(jí)菜單1.1”。

點(diǎn)擊鼠標(biāo)右鍵選擇【交互樣式】（注意：此時(shí)如果樣式為組合狀態(tài)，請(qǐng)取消組合，否則否見不顯示交互樣式按鈕），設(shè)置菜單懸停和選中效果，懸停效果可設(shè)置填充顏色、字色，選中效果可包括填充顏色、字色、線段顏色、邊框?qū)挾取⑦吙蝾愋?、邊框可見性等樣式，點(diǎn)擊【確定】，完成二級(jí)菜單樣式調(diào)整。

選擇二級(jí)菜單，在“交互”頁面依次執(zhí)行以下操作：【新建交互->單擊時(shí)->設(shè)置選中】，選擇設(shè)置當(dāng)前元件為“真”，點(diǎn)擊確定。

交互編輯器窗口關(guān)閉后，按住鍵盤中的【Ctrl】鍵，復(fù)制出所需的二級(jí)菜單個(gè)數(shù)，調(diào)整位置并修改成所需的菜單名稱，完成二級(jí)菜單樣式的制作。

四、設(shè)置菜單展開與折疊效果

切換至state1，選中一級(jí)菜單樣式，在 “交互”頁面依次執(zhí)行以下操作：【新建交互->單擊時(shí)->設(shè)置面板狀態(tài)】，選擇設(shè)置“一級(jí)菜單1到state2 推動(dòng)和拉動(dòng)元件 下方”。

切換至state2，選中一級(jí)菜單樣式，在“交互”頁面依次執(zhí)行上述相同操作：【新建交互->單擊時(shí)->設(shè)置面板狀態(tài)】，選擇設(shè)置“一級(jí)菜單1到state1 推動(dòng)和拉動(dòng)元件 下方”。

此時(shí)，我們查看菜單制作效果，可以發(fā)現(xiàn)：點(diǎn)擊不同的二級(jí)菜單會(huì)出現(xiàn)以下情況。

此時(shí)，我們可以選擇三項(xiàng)二級(jí)菜單，點(diǎn)擊鼠標(biāo)右鍵，選擇【選項(xiàng)組】，選擇已有的組名稱或輸入新的組名稱，現(xiàn)在，我們填寫組名稱為“二級(jí)菜單-互斥”，點(diǎn)擊【確定】按鈕，完成編輯操作。

此時(shí)點(diǎn)擊預(yù)覽，我們可以看到點(diǎn)擊不同的二級(jí)菜單，不會(huì)出現(xiàn)全部選中的效果。

五、設(shè)置菜單互斥效果

關(guān)閉動(dòng)態(tài)面板，選擇首頁面“一級(jí)菜單1”動(dòng)態(tài)面板，按住鍵盤中的【Ctrl】鍵，復(fù)制出所需的一級(jí)菜單個(gè)數(shù)，并依次修改菜單名稱和對(duì)應(yīng)動(dòng)態(tài)面板名稱為一級(jí)菜單2、一級(jí)菜單3。

雙擊“一級(jí)菜單1”動(dòng)態(tài)面板，在state1頁面選擇“一級(jí)菜單1”樣式，鼠標(biāo)移入到設(shè)置面板狀態(tài)處，點(diǎn)擊【添加目標(biāo)】按鈕繼續(xù)設(shè)置面板狀態(tài)，分別為“一級(jí)菜單2到state1 推動(dòng)和拉動(dòng)元件 下方”、“一級(jí)菜單3到state1 推動(dòng)和拉動(dòng)元件 下方”。

以上操作實(shí)現(xiàn)的效果為：展開一級(jí)菜單1，則一級(jí)菜單2、一級(jí)菜單3的菜單收縮。

“一級(jí)菜單2”動(dòng)態(tài)面板中state1的操作方式同上，設(shè)置面板狀態(tài)分別為“一級(jí)菜單1到state1 推動(dòng)和拉動(dòng)元件 下方”、“一級(jí)菜單3到state1 推動(dòng)和拉動(dòng)元件 下方”。

以上操作實(shí)現(xiàn)的效果為：展開一級(jí)菜單2，則一級(jí)菜單1、一級(jí)菜單3的菜單收縮。

“一級(jí)菜單3”動(dòng)態(tài)面板中state1的操作方式同上，設(shè)置面板狀態(tài)分別為“一級(jí)菜單1到state1 推動(dòng)和拉動(dòng)元件 下方”、“一級(jí)菜單2到state1 推動(dòng)和拉動(dòng)元件 下方”。

以上操作實(shí)現(xiàn)的效果為：展開一級(jí)菜單3，則一級(jí)菜單1、一級(jí)菜單2的菜單收縮。

二級(jí)菜單效果制作完成，查看效果。

二級(jí)菜單的效果制作完成了，有什么問題歡迎大家在評(píng)論區(qū)留言，下篇給大家更新《三級(jí)菜單的制作和使用》。

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

題圖來自?Unsplash，基于 CC0 協(xié)議