【Axure实战】中继器打造系统菜单之一级菜单
2026/9/8 17:50:20 网站建设 项目流程

制作系统原型的第一步往往就是根据系统规划制作原型的页面布局与系统菜单。
页面布局可以参考我往期的“【Axure实战】B端后台系统通用页面结构”一文。而系统菜单根据系统的复杂程度一般可以分为一级菜单、二级菜单和三级菜单。接下来,我们将分五期,由简入繁以此介绍这三类系统菜单的使用和制作方法。
更多级别的菜单在实际应用中偏少,其制作方法与三级菜单一样,此系列文章就不过多描述。

系统菜单
一级菜单

咱们先从简单的一级菜单开始,让大家对用中继器做系统菜单,还有在不同项目里重复使用一级菜单部件有个基本的认识,这样大家就能更好地理解后面二级菜单和三级菜单咋制作、咋用啦。

接下来我们正式介绍一级菜单的实际效果、使用方法和制作方法。

  1. 实际效果

    一级菜单根据所在位置的不同分为顶部一级菜单和侧边一级菜单。

    • 相同的是它们都可以作为某一功能的入口。

    • 不同的是顶部一级菜单处在页面中更为显眼的位置,往往可以用来代表系统中的功能板块(一类功能的集合),配合侧边菜单,可以构建系统的多级菜单结构。而侧边一级菜单很少这样使用。

    • 顶部一级菜单

      顶部一级菜单作为功能板块,每次切换时显示不同功能板块下的功能集合(侧边菜单内容不同)和板块下的默认页面。

    • 侧边一级菜单

      侧边一级菜单作为功能入口,每次切换时显示相对应的功能页面。

  2. 使用方法

    利用中继器制作系统菜单,图的就是使用方便,能够节省时间,快速出效果。下面我们就来看看两种场景下如何快速使用部件制作一级菜单。

  3. 制作方法

    顶部一级菜单和侧边一级菜单虽然一个是横向的,一个是纵向的,但他们的制作方法和达成的效果是相似的。我们在这里介绍其中一种(顶部一级菜单)即可,另一种请各位自行实践。

总结

一级菜单的结构相对简单,因此利用中继器可以很快速地制作出可复用的一级菜单部件。整个制作过程中还请大家关注以下几点:

  1. 一级菜单是单选操作的组合,利用好菜单项的单选组(Selection group)功能,可以简单、快速地实现中继器各Item 的单选操作

  2. 一级菜单作为功能板块时,建议与动态面板配合实现下级菜单的展示和操作。这样,因为一级菜单区域和下级菜单区域同处一个页面,它们之间可以存在完整的交互。而且切换功能板块时,下级菜单不存在页面刷新问题,更加丝滑。

  3. 一级菜单作为功能入口时,建议与子页面(Inline frame)配合实现功能页面的展示。虽然两者不处于同一页面,相互之间除了公共变量事件外,无法产生交互。但好在每个功能相对独立,所有的交互可以在独自的页面完成。这样也达到了功能之间的设计隔离,满足团队协同制作原型的目的。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询