axure中继器做二级菜单，支持二级菜单数量不同

入行以来，主导过很多后台系统，后台系统菜单的设计是必不可少的。伴随着整个原型的迭代，菜单的修改也是常用的事。对于菜单的设计也是经历过很多阶段，从最开始的矩形元件拖拽到母版使用、到动态面板使用、到中继器。在这个历程中，也踩过很多坑，如各页面重复设计、一点改动所涉及的页面都需改动、无点击交互连动效果，这些不断做出的质量不高，而且还拉低了工作效率。

经历过团队多成员协同设计系统的队友们都知道，团队中无统一的axure设计规范，做出来的系统总是不同功能模块不同风格，在对内对外协作上都是不利的，总是莫名了多了些沟通成本。

最近得空，正在设计电商业态中常用的web元件库，为后续提炼axure设计规范做铺垫，就开始记录些吧，话不多说，开始我的表演啦。

1、添加中继器元件

做后台系统设计，先确定好系统框架布局，下面我将以常见的布局结构（上下结构）来阐述。最上面是头部（动态面板，高50px）,下面有2部分：左边菜单导航区（动态面板，宽200px），右边内容区域（放内联框架元件）。

点击菜单导航区动态面板，放入中继器元件。点击中继器，进入中继器编辑模式，先添加矩形元件，再删除中继器中原有的矩形元件。如下图所示，一级菜单（w:200px，h：40px），二级菜单（w:180px，h:40px）。注意，添加二级菜单按一级菜单下数量最多来添加，各矩形件元件间的行高是10px，各矩形元件的填入文字及命名如图，将所有二级菜单选中，点击“组合”将其组合成二级菜单，便于交互时一并展开/收缩（使用隐藏/显示方法）。

2、调试中继器样式

根据系统后台主题风格来调整，如一级菜单矩形元件字体加粗、字体颜色浅灰、字体居左40px，去边框，二级菜单矩形元件去边框，字体居左40px。设置方式，点击元件，在“样式”处进行配置，如下图：

退出中继器编辑模式，点击菜单导航动态面板中的中继器，设置中继器的间距，在“样式”处设置行间距10px，如下图：

3、设置中继器数据

在菜单导航动态面板中点击中继器，在“样式”中数据处，填写菜单数据。其中“Column0”表示一级菜单；“Column1”表示二级菜单1、“Column2”表示二级菜单2、“Column3”表示二级菜单3、“Column4”表示二级菜单4、“Column5”表示二级菜单5、“Column6”表示二级菜单6。如下图所示：

4、设置中继器交互效果

4.1为中继器赋数据值

在菜单导航动态面板中点击中继器，在“交互”属性“中继器交互”，选中“每项加载”，选择动作“设置文本”，给7个矩形依次赋值，如下图操作案例：

点击“添加目标”选中“Column6”，

点击值后面的“fx”，

进入“编辑文本”界面，

点击“插入变量或函数”，选中“Item.Column6”，

删除文本框中的默认“二级菜单6”文字，只保留[[Item.Column6]]，点击“确定”按钮，

二级菜单6的操作就完成了。依次将剩余操作完成。

4.2展开/收缩二级菜单

点击中继器，进入编辑模式。隐藏所有二级菜单元件，点击“一级菜单”矩形元件，点击“交互”属性，添加“单击时”交互效果，设置动作为：切换“二级菜单（组合）”的可见性为“切换”。如图：

4.3为二级菜单添加链接，隐藏值为空时所占空间

点击二级菜单矩形元件，点击“交互”，以下以二级菜单1为例操作。

点击“载入时”事件，添加条件：值为空，

设置动作，隐藏当前元件。

添加另一个交互效果，点击“单击时”事件，添加条件：值为color，(color是二级菜单值)

设置动作，在内容框架中打开链接，链接到color页面。

所有的二级菜单都如此操作。

axure中继器制作的二级菜单完成。预览下，看看效果。