起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure9：巧用中繼器，零基礎(chǔ)也能五步做出菜單
編輯導(dǎo)讀：如何通過中繼器做出基礎(chǔ)的菜單呢？本文作者通過自己的實操，從效果圖到操作步驟都一一展開了分析，并對過程中需要注意的問題進(jìn)行了介紹，希望對你有所啟發(fā)。
網(wǎng)上關(guān)于Axure9的教程數(shù)量繁多，但對基礎(chǔ)步驟描述較少，對初次使用axure的同學(xué)不太友好。中繼器作為常用功能之一，是產(chǎn)品人必要掌握的技能，因此寫下了這篇教程，希望對大家有所幫助。
先上效果圖
步驟一：準(zhǔn)備素材。
從左側(cè)元件拖出4個矩形，排列成菜單展開的樣式；也準(zhǔn)備一個中繼器，直接從左側(cè)元件處拖到畫布上即可。
tips：可以使用ctrl+shift，直接將矩形往下拖，同ppt。
步驟二：設(shè)置菜單框架。
雙擊中繼器，把原本的框去掉，將菜單樣式放進(jìn)去，然后點擊右上角的關(guān)閉，可以看到整個菜單的框架。
tips：整個菜單得放在虛線框中，超出虛線的部分不會展示出來。
步驟三：設(shè)置一級菜單之間的間距。
設(shè)置樣式-間距10px，讓二級菜單跟下方的一級菜單分開。
tips：樣式-間距的位置比較靠后，得往下滾動甚至是拖動，才能看到間距。
步驟四：填充菜單的填充內(nèi)容。
在樣式-數(shù)據(jù)中填寫文字，其中menu對應(yīng)一級菜單名稱，name1對應(yīng)一級菜單下的第一個子菜單名稱，以此類推。
tips：表頭要用英文；
將文字填入中繼器。進(jìn)入交互，選擇一級菜單對應(yīng)的矩形，編輯值為[[item.menu]]，完成后點擊添加目標(biāo)；選擇第一個子菜單對應(yīng)的矩形，編輯值為[[item.name1]]，完成后點擊添加目標(biāo)，以此類推。
tips：
- 如果添加目標(biāo)選項沒出來，可將鼠標(biāo)移過去，就會出來了；
- 覺得矩形太多，選擇目標(biāo)容易混亂，可給每個矩形定義名稱，樣式/交互中都可以定義。
步驟五：制作菜單樣式。
雙擊中繼器，將三個子菜單組合后，在樣式中設(shè)置為隱藏，如紅色部分所示；
選中一級菜單矩形，在交互中設(shè)置為單擊時，顯示/隱藏進(jìn)行切換展示。
整個制作完成，大家可以打開預(yù)覽，欣賞自己的作品啦。是不是簡單而又詳細(xì)？
本文由 @汪仔4807 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
求教，上面的有沒有視頻？
中繼器不顯示目標(biāo)選項，顯示的而是[item.menu]，最后的顯示隱藏效果變成了單機就按件沒有了，哪里的問題
我也是這樣
如果擁有幾個數(shù)量不同的二級菜單，怎么實現(xiàn)？
可以用中繼器、動態(tài)面板實現(xiàn)，最簡單的是直接使用水平菜單/垂直菜單元件，選中元件后點擊鼠標(biāo)右鍵可編輯。