制作系统原型的第一步往往就是根据系统规划制作原型的页面布局与系统菜单。页面布局可以参考我往期的“【Axure实战】B端后台系统通用页面结构”一文。而系统菜单根据系统的复杂程度一般可以分为一级菜单、二级菜单和三级菜单。接下来我们将分五期由简入繁以此介绍这三类系统菜单的使用和制作方法。更多级别的菜单在实际应用中偏少其制作方法与三级菜单一样此系列文章就不过多描述。系统菜单一级菜单咱们先从简单的一级菜单开始让大家对用中继器做系统菜单还有在不同项目里重复使用一级菜单部件有个基本的认识这样大家就能更好地理解后面二级菜单和三级菜单咋制作、咋用啦。接下来我们正式介绍一级菜单的实际效果、使用方法和制作方法。实际效果一级菜单根据所在位置的不同分为顶部一级菜单和侧边一级菜单。相同的是它们都可以作为某一功能的入口。不同的是顶部一级菜单处在页面中更为显眼的位置往往可以用来代表系统中的功能板块一类功能的集合配合侧边菜单可以构建系统的多级菜单结构。而侧边一级菜单很少这样使用。顶部一级菜单顶部一级菜单作为功能板块每次切换时显示不同功能板块下的功能集合侧边菜单内容不同和板块下的默认页面。侧边一级菜单侧边一级菜单作为功能入口每次切换时显示相对应的功能页面。使用方法利用中继器制作系统菜单图的就是使用方便能够节省时间快速出效果。下面我们就来看看两种场景下如何快速使用部件制作一级菜单。顶部一级菜单从元件库我自己制作完成的元件库中拖出“顶部一级导航”部件在大纲中找到并打开“一级菜单列表”这个中继器。中继器列名说明Name一级菜单功能的名称此名称将显示在页面上。Image一级菜单功能在默认状态下对应的图片。ImageSelected一级菜单功能在 MouseOver 和 Select 状态下对应的图片。Panel一级菜单功能对应的动态面板的子面板名称。一级菜单作为功能板块使用时使用此列用来切换板块下对应的侧边菜单。Page一级菜单功能对应的子页面的名称。一级菜单作为功能入口时使用此列用来切换子页面部件中的功能页面。右键点击 Image 和 ImageSelected 列选择“Import Image”导入自己的功能图片。注意不同状态下功能图片的深浅底色。如果将顶部一级菜单作为功能板块使用请配套编辑 Panel 列。该列内直接填写对应的动态面板中子面板的名称。注意此处填写的名称一定要与动态面板中子面板的名称一模一样否则无法切换到对应的子面板上。这里的动态面板命名为“功能展示动态面板”需要自行创建。在一级菜单中继器的“一级菜单”组合部件的交互事件中应用“Set panel state” 动作并选择刚刚创建的动态面板。如果将顶部一级菜单作为功能入口使用请配套编辑 Page 列。右键点击该列选择“Reference Page”链接已创建的子页面。如果使用 Page 列需要自行创建Inline frame 部件命名为“子页面”。在一级菜单中继器的“一级菜单”组合部件的交互事件中应用“Open line in frame”动作并选择刚刚创建的 Inline frame。侧边一级菜单从元件库中找到“侧边一级导航”拖入原型编辑区并在大纲中打开“一级功能列表”中继器。中继器列名说明Name一级菜单功能的名称此名称将显示在页面上。Image一级菜单功能在默认状态下对应的图片。ImageSelected一级菜单功能在 MouseOver 和 Select 状态下对应的图片。Page一级菜单功能对应的子页面的名称。切换功能时页面内的 Frame 部件切换与此值对应的页面。侧边一级菜单的参数使用方法与顶部一级菜单的使用方法一致这里就不再赘述了。制作方法顶部一级菜单和侧边一级菜单虽然一个是横向的一个是纵向的但他们的制作方法和达成的效果是相似的。我们在这里介绍其中一种顶部一级菜单即可另一种请各位自行实践。创建一级菜单组合拖入一个 Box“一级菜单名称”和一个 Image“一级菜单图标”部件将两者居中对齐并组合在一起形成一级菜单组合。根据自己的配色规范配置Box在各种状态下的配色。为一级菜单组合设置单选组Selection group名称并打开组合的鼠标样式操作传递功能。单选组名称可以随意设置只要不与其他的单选组合名称重复即可。打开组合的鼠标样式操作传递功能后所有操作在一级菜单组合上的操作样式如鼠标悬停Mouse over、部件选中select等后可以传递到组合内的每一个组件上。将一级菜单项转换为中继器右击“一级菜单”组合选择“Create Repeater”axure11才具备的功能将此组合转换为中继器。适当调整中继器的属性调整中继器的布局为横向列间隔为4。扩展中继器的列字段扩展中继器的列依次包含ModuleName、Image、ImageSelected、Panel、Page。这些列的作用详见上方顶部一级菜单的使用方法表格。分别创建动态面板和 Inline frame分别创建动态面板“侧边菜单区域”和Inline frame“功能子页面”。侧边菜单区域创建三个子面板分别命名“菜单1”“菜单2”“菜单3”。三个子面板中分别拖入一个标题部件将标题内容修改为子面板的名称。创建三个页面分别命名为“功能页面1”“功能页面2”“功能页面3”。三个页面中分别拖入一个标题部件将标题内容修改为页面的名称。填充中继器的列字段如上图所示填充中继器的各列。图片列和页面列的填充方法参考上方顶部一级菜单的使用方法表格。其中页面列选择我们刚刚创建的三个页面。ModuleName列的名称可以随意填写但Panel列一定要填写上方创建的“侧边菜单动态区域”中的三个子面板的名称。编辑一级菜单中继器的交互事件创建中继器的Item load事件重点配置一级菜单图标多状态下的图片样式。创建中继器中一级菜单项组合的Click事件分别针对动态面板下级菜单展示和子页面功能页面展示两种展示方式做事件设置。下级菜单展示使用“Set panel state”动作功能页面展示使用“Open link in frame”动作。这两个动作的设置已经在上面的“使用方法”中做过介绍请回看上方描述。最后一起来看看效果……总结一级菜单的结构相对简单因此利用中继器可以很快速地制作出可复用的一级菜单部件。整个制作过程中还请大家关注以下几点一级菜单是单选操作的组合利用好菜单项的单选组Selection group功能可以简单、快速地实现中继器各Item 的单选操作。一级菜单作为功能板块时建议与动态面板配合实现下级菜单的展示和操作。这样因为一级菜单区域和下级菜单区域同处一个页面它们之间可以存在完整的交互。而且切换功能板块时下级菜单不存在页面刷新问题更加丝滑。一级菜单作为功能入口时建议与子页面Inline frame配合实现功能页面的展示。虽然两者不处于同一页面相互之间除了公共变量事件外无法产生交互。但好在每个功能相对独立所有的交互可以在独自的页面完成。这样也达到了功能之间的设计隔离满足团队协同制作原型的目的。