入行以來暴区，主導過很多后臺系統(tǒng)，后臺系統(tǒng)菜單的設計是必不可少的辛臊。伴隨著整個原型的迭代仙粱，菜單的修改也是常用的事。對于菜單的設計也是經歷過很多階段彻舰，從最開始的矩形元件拖拽到母版使用伐割、到動態(tài)面板使用、到中繼器刃唤。在這個歷程中隔心，也踩過很多坑，如各頁面重復設計尚胞、一點改動所涉及的頁面都需改動硬霍、無點擊交互連動效果，這些不斷做出的質量不高笼裳，而且還拉低了工作效率唯卖。
經歷過團隊多成員協(xié)同設計系統(tǒng)的隊友們都知道，團隊中無統(tǒng)一的axure設計規(guī)范躬柬，做出來的系統(tǒng)總是不同功能模塊不同風格拜轨，在對內對外協(xié)作上都是不利的，總是莫名了多了些溝通成本允青。
最近得空橄碾，正在設計電商業(yè)態(tài)中常用的web元件庫，為后續(xù)提煉axure設計規(guī)范做鋪墊，就開始記錄些吧堪嫂，話不多說偎箫，開始我的表演啦。
1皆串、添加中繼器元件
做后臺系統(tǒng)設計淹办，先確定好系統(tǒng)框架布局，下面我將以常見的布局結構（上下結構）來闡述恶复。最上面是頭部（動態(tài)面板怜森，高50px）,下面有2部分：左邊菜單導航區(qū)（動態(tài)面板，寬200px）谤牡，右邊內容區(qū)域（放內聯(lián)框架元件）副硅。
點擊菜單導航區(qū)動態(tài)面板，放入中繼器元件翅萤。點擊中繼器恐疲，進入中繼器編輯模式，先添加矩形元件套么，再刪除中繼器中原有的矩形元件培己。如下圖所示，一級菜單（w:200px胚泌，h：40px）省咨，二級菜單（w:180px，h:40px）玷室。注意零蓉，添加二級菜單按一級菜單下數量最多來添加，各矩形件元件間的行高是10px穷缤，各矩形元件的填入文字及命名如圖敌蜂，將所有二級菜單選中，點擊“組合”將其組合成二級菜單津肛，便于交互時一并展開/收縮（使用隱藏/顯示方法）紊册。
2、調試中繼器樣式
根據系統(tǒng)后臺主題風格來調整快耿，如一級菜單矩形元件字體加粗囊陡、字體顏色淺灰、字體居左40px掀亥，去邊框撞反，二級菜單矩形元件去邊框，字體居左40px搪花。設置方式遏片，點擊元件嘹害，在“樣式”處進行配置，如下圖：
退出中繼器編輯模式吮便，點擊菜單導航動態(tài)面板中的中繼器笔呀，設置中繼器的間距，在“樣式”處設置行間距10px髓需，如下圖：
3许师、設置中繼器數據
在菜單導航動態(tài)面板中點擊中繼器，在“樣式”中數據處僚匆，填寫菜單數據微渠。其中“Column0”表示一級菜單；“Column1”表示二級菜單1咧擂、“Column2”表示二級菜單2逞盆、“Column3”表示二級菜單3、“Column4”表示二級菜單4松申、“Column5”表示二級菜單5云芦、“Column6”表示二級菜單6。如下圖所示：
4贸桶、設置中繼器交互效果
4.1為中繼器賦數據值
在菜單導航動態(tài)面板中點擊中繼器舅逸，在“交互”屬性“中繼器交互”，選中“每項加載”刨啸，選擇動作“設置文本”，給7個矩形依次賦值识脆，如下圖操作案例：
點擊“添加目標”選中“Column6”设联，
點擊值后面的“fx”，
進入“編輯文本”界面灼捂，
點擊“插入變量或函數”离例，選中“Item.Column6”，
刪除文本框中的默認“二級菜單6”文字悉稠，只保留[[Item.Column6]]宫蛆，點擊“確定”按鈕，
二級菜單6的操作就完成了的猛。依次將剩余操作完成耀盗。
4.2展開/收縮二級菜單
點擊中繼器，進入編輯模式卦尊。隱藏所有二級菜單元件叛拷，點擊“一級菜單”矩形元件，點擊“交互”屬性岂却，添加“單擊時”交互效果忿薇，設置動作為：切換“二級菜單（組合）”的可見性為“切換”裙椭。如圖：
4.3為二級菜單添加鏈接，隱藏值為空時所占空間
點擊二級菜單矩形元件署浩，點擊“交互”揉燃，以下以二級菜單1為例操作。
點擊“載入時”事件筋栋，添加條件：值為空炊汤，
設置動作，隱藏當前元件二汛。
添加另一個交互效果婿崭，點擊“單擊時”事件，添加條件：值為color肴颊，(color是二級菜單值)
設置動作氓栈，在內容框架中打開鏈接，鏈接到color頁面婿着。
所有的二級菜單都如此操作授瘦。
axure中繼器制作的二級菜單完成。預覽下竟宋，看看效果提完。
