制作系统原型的第一步往往就是根据系统规划制作原型的页面布局与系统菜单。
页面布局可以参考我往期的“【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)配合实现功能页面的展示。虽然两者不处于同一页面,相互之间除了公共变量事件外,无法产生交互。但好在每个功能相对独立,所有的交互可以在独自的页面完成。这样也达到了功能之间的设计隔离,满足团队协同制作原型的目的。