編輯導(dǎo)語(yǔ)：我們可以使用中繼器制作很多頁(yè)面原型，比如一個(gè)產(chǎn)品的后臺(tái)有很多功能，那么我們可以使用中繼器進(jìn)行制作；本文作者分享了關(guān)于用Axure制作中繼器菜單的教程，我們一起來(lái)了解一下。

菜單是系統(tǒng)里面的框架，雖然Axure目前是制作原型的主流工具，但是axure里面并沒(méi)有自動(dòng)菜單的元件，這樣導(dǎo)致很多新手不懂怎樣做一個(gè)高保真高交互的菜單原型，所以作者今天教大家用中繼器制作一個(gè)菜單的原型模板。

本案例主要介紹同一頁(yè)面內(nèi)的跳轉(zhuǎn)，即通過(guò)中繼器菜單實(shí)現(xiàn)動(dòng)態(tài)面板的跳轉(zhuǎn)交互，下面就是制作完成的效果了：

原型預(yù)覽地址：https://vsvlu6.axshare.com/#g=1

下面我們一起開(kāi)始學(xué)習(xí)吧~~~

一、材料準(zhǔn)備

圖片元件——菜單的圖標(biāo)內(nèi)容，起到美化的作用。

文本標(biāo)簽——菜單的文字標(biāo)題。

背景框——用于制作移入選中變色和單擊禁用的變色，這里要設(shè)置交互樣式，選中時(shí)為灰色，禁用時(shí)為藍(lán)色。

中繼器——將上面三個(gè)元件組合到一塊，然后復(fù)制到中繼器內(nèi)部，如下圖所示擺放。

中繼器表格增加3列：pic、title、jinyong。

pic對(duì)應(yīng)圖片元件，即菜單的圖標(biāo)，在中繼器表格內(nèi)右鍵導(dǎo)入圖片即可，之后我們會(huì)設(shè)置到圖片元件。

title對(duì)應(yīng)文本標(biāo)簽，即菜單文字標(biāo)題，之后我們會(huì)做設(shè)置文本的交互。

jinyong是一個(gè)標(biāo)記，標(biāo)記鼠標(biāo)點(diǎn)擊了哪行菜單，默認(rèn)是標(biāo)記第一行的菜單，所以在第一行默認(rèn)填1。

表格如下圖所示填寫(xiě)即可：

矩形和圖片——矩形是用于制作菜單的背景，選一個(gè)深色一點(diǎn)的背景，如果菜單不多下面有空白的地方可以找個(gè)圖片適當(dāng)美化一下。

動(dòng)態(tài)面板——用于放置頁(yè)面內(nèi)容，有多少個(gè)菜單就創(chuàng)建多少個(gè)state，然后需要將state的名字改成和title列名字對(duì)應(yīng)，案例中的state分別是產(chǎn)品介紹、產(chǎn)品用戶、用戶需求、功能清單、產(chǎn)品架構(gòu)、名稱解釋和全局說(shuō)明。動(dòng)態(tài)面板里各業(yè)需要展示的內(nèi)容大家可以自己放置。

二、交互制作

1. 中繼器每項(xiàng)加載時(shí)交互

設(shè)置文本——將文本標(biāo)簽的值設(shè)為title列的值，即Item.title。

設(shè)置圖片——這里考慮到有些菜單不需要圖標(biāo)的情況，所以我們需要需要分條件設(shè)置，如果該行pic的值不為空（有圖片），將圖片元件的值設(shè)為pic列的值，即Item.pic；如果該行pic的值為空（無(wú)圖片），我們就隱藏圖片元件。

禁用背景——如果該行jinyong的值為1，那么我們就禁用該背景。

2. 菜單組合移入移出時(shí)交互

鼠標(biāo)移入菜單組合時(shí)——我們需要選中背景為真，因?yàn)榍懊嬖O(shè)置了背景選中時(shí)會(huì)變灰色，這樣的有一個(gè)移入變色的效果了。

鼠標(biāo)移出菜單組合時(shí)——我們需要選中背景為假，這樣相當(dāng)于恢復(fù)原樣，取消了菜單移入變色的效果，這組交互是對(duì)應(yīng)的。

3. 菜單組合鼠標(biāo)單擊時(shí)時(shí)交互

鼠標(biāo)單擊菜單組合時(shí)，我們要實(shí)現(xiàn)兩個(gè)效果，第一個(gè)是點(diǎn)擊后背景變成藍(lán)色，第二個(gè)是打開(kāi)動(dòng)態(tài)面板內(nèi)對(duì)應(yīng)的頁(yè)面。

背景變成是通過(guò)jinyong列的值的決定的，所以鼠標(biāo)單擊時(shí)，我們所以標(biāo)記所有行，把所有行jinyong列的值改成0，然后在更新當(dāng)前行，把該行的jinyong值設(shè)為1，這樣就實(shí)現(xiàn)是變成的效果。

最后我們?cè)O(shè)置動(dòng)態(tài)面板狀態(tài)，設(shè)置值為Item.title，這樣動(dòng)態(tài)面板就會(huì)打開(kāi)和菜單文字相同的頁(yè)面。

這樣我們就做好了動(dòng)態(tài)面板菜單的框架了，以后可以直接使用，是不是很方便呢？

那以上就是本期全部?jī)?nèi)容了，我們下期見(jiàn)，88~~

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

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