入行以來(lái)，主導(dǎo)過(guò)很多后臺(tái)系統(tǒng)，后臺(tái)系統(tǒng)菜單的設(shè)計(jì)是必不可少的。伴隨著整個(gè)原型的迭代，菜單的修改也是常用的事。對(duì)于菜單的設(shè)計(jì)也是經(jīng)歷過(guò)很多階段，從最開(kāi)始的矩形元件拖拽到母版使用、到動(dòng)態(tài)面板使用、到中繼器。在這個(gè)歷程中，也踩過(guò)很多坑，如各頁(yè)面重復(fù)設(shè)計(jì)、一點(diǎn)改動(dòng)所涉及的頁(yè)面都需改動(dòng)、無(wú)點(diǎn)擊交互連動(dòng)效果，這些不斷做出的質(zhì)量不高，而且還拉低了工作效率。

經(jīng)歷過(guò)團(tuán)隊(duì)多成員協(xié)同設(shè)計(jì)系統(tǒng)的隊(duì)友們都知道，團(tuán)隊(duì)中無(wú)統(tǒng)一的axure設(shè)計(jì)規(guī)范，做出來(lái)的系統(tǒng)總是不同功能模塊不同風(fēng)格，在對(duì)內(nèi)對(duì)外協(xié)作上都是不利的，總是莫名了多了些溝通成本。

最近得空，正在設(shè)計(jì)電商業(yè)態(tài)中常用的web元件庫(kù)，為后續(xù)提煉axure設(shè)計(jì)規(guī)范做鋪墊，就開(kāi)始記錄些吧，話不多說(shuō)，開(kāi)始我的表演啦。

1、添加中繼器元件

做后臺(tái)系統(tǒng)設(shè)計(jì)，先確定好系統(tǒng)框架布局，下面我將以常見(jiàn)的布局結(jié)構(gòu)（上下結(jié)構(gòu)）來(lái)闡述。最上面是頭部（動(dòng)態(tài)面板，高50px）,下面有2部分：左邊菜單導(dǎo)航區(qū)（動(dòng)態(tài)面板，寬200px），右邊內(nèi)容區(qū)域（放內(nèi)聯(lián)框架元件）。

點(diǎn)擊菜單導(dǎo)航區(qū)動(dòng)態(tài)面板，放入中繼器元件。點(diǎn)擊中繼器，進(jìn)入中繼器編輯模式，先添加矩形元件，再刪除中繼器中原有的矩形元件。如下圖所示，一級(jí)菜單（w:200px，h：40px），二級(jí)菜單（w:180px，h:40px）。注意，添加二級(jí)菜單按一級(jí)菜單下數(shù)量最多來(lái)添加，各矩形件元件間的行高是10px，各矩形元件的填入文字及命名如圖，將所有二級(jí)菜單選中，點(diǎn)擊“組合”將其組合成二級(jí)菜單，便于交互時(shí)一并展開(kāi)/收縮（使用隱藏/顯示方法）。

2、調(diào)試中繼器樣式

根據(jù)系統(tǒng)后臺(tái)主題風(fēng)格來(lái)調(diào)整，如一級(jí)菜單矩形元件字體加粗、字體顏色淺灰、字體居左40px，去邊框，二級(jí)菜單矩形元件去邊框，字體居左40px。設(shè)置方式，點(diǎn)擊元件，在“樣式”處進(jìn)行配置，如下圖：

退出中繼器編輯模式，點(diǎn)擊菜單導(dǎo)航動(dòng)態(tài)面板中的中繼器，設(shè)置中繼器的間距，在“樣式”處設(shè)置行間距10px，如下圖：

3、設(shè)置中繼器數(shù)據(jù)

在菜單導(dǎo)航動(dòng)態(tài)面板中點(diǎn)擊中繼器，在“樣式”中數(shù)據(jù)處，填寫(xiě)菜單數(shù)據(jù)。其中“Column0”表示一級(jí)菜單；“Column1”表示二級(jí)菜單1、“Column2”表示二級(jí)菜單2、“Column3”表示二級(jí)菜單3、“Column4”表示二級(jí)菜單4、“Column5”表示二級(jí)菜單5、“Column6”表示二級(jí)菜單6。如下圖所示：

4、設(shè)置中繼器交互效果

4.1為中繼器賦數(shù)據(jù)值

在菜單導(dǎo)航動(dòng)態(tài)面板中點(diǎn)擊中繼器，在“交互”屬性“中繼器交互”，選中“每項(xiàng)加載”，選擇動(dòng)作“設(shè)置文本”，給7個(gè)矩形依次賦值，如下圖操作案例：

點(diǎn)擊“添加目標(biāo)”選中“Column6”，

點(diǎn)擊值后面的“fx”，

進(jìn)入“編輯文本”界面，

點(diǎn)擊“插入變量或函數(shù)”，選中“Item.Column6”，

刪除文本框中的默認(rèn)“二級(jí)菜單6”文字，只保留[[Item.Column6]]，點(diǎn)擊“確定”按鈕，

二級(jí)菜單6的操作就完成了。依次將剩余操作完成。

4.2展開(kāi)/收縮二級(jí)菜單

點(diǎn)擊中繼器，進(jìn)入編輯模式。隱藏所有二級(jí)菜單元件，點(diǎn)擊“一級(jí)菜單”矩形元件，點(diǎn)擊“交互”屬性，添加“單擊時(shí)”交互效果，設(shè)置動(dòng)作為：切換“二級(jí)菜單（組合）”的可見(jiàn)性為“切換”。如圖：

4.3為二級(jí)菜單添加鏈接，隱藏值為空時(shí)所占空間

點(diǎn)擊二級(jí)菜單矩形元件，點(diǎn)擊“交互”，以下以二級(jí)菜單1為例操作。

點(diǎn)擊“載入時(shí)”事件，添加條件：值為空，

設(shè)置動(dòng)作，隱藏當(dāng)前元件。

添加另一個(gè)交互效果，點(diǎn)擊“單擊時(shí)”事件，添加條件：值為color，(color是二級(jí)菜單值)

設(shè)置動(dòng)作，在內(nèi)容框架中打開(kāi)鏈接，鏈接到color頁(yè)面。

所有的二級(jí)菜單都如此操作。

axure中繼器制作的二級(jí)菜單完成。預(yù)覽下，看看效果。