Axure9:巧用中继器,零基础也能五步做出菜单

5 评论 9291 浏览 14 收藏 5 分钟

编辑导读:如何通过中继器做出基础的菜单呢?本文作者通过自己的实操,从效果图到操作步骤都一一展开了分析,并对过程中需要注意的问题进行了介绍,希望对你有所启发。

网上关于Axure9的教程数量繁多,但对基础步骤描述较少,对初次使用axure的同学不太友好。中继器作为常用功能之一,是产品人必要掌握的技能,因此写下了这篇教程,希望对大家有所帮助。

先上效果图

步骤一:准备素材。

从左侧元件拖出4个矩形,排列成菜单展开的样式;也准备一个中继器,直接从左侧元件处拖到画布上即可。

tips:可以使用ctrl+shift,直接将矩形往下拖,同ppt。

步骤二:设置菜单框架。

双击中继器,把原本的框去掉,将菜单样式放进去,然后点击右上角的关闭,可以看到整个菜单的框架。

tips:整个菜单得放在虚线框中,超出虚线的部分不会展示出来。

步骤三:设置一级菜单之间的间距。

设置样式-间距10px,让二级菜单跟下方的一级菜单分开。

tips:样式-间距的位置比较靠后,得往下滚动甚至是拖动,才能看到间距。

步骤四:填充菜单的填充内容。

在样式-数据中填写文字,其中menu对应一级菜单名称,name1对应一级菜单下的第一个子菜单名称,以此类推。

tips:表头要用英文;

将文字填入中继器。进入交互,选择一级菜单对应的矩形,编辑值为[[item.menu]],完成后点击添加目标;选择第一个子菜单对应的矩形,编辑值为[[item.name1]],完成后点击添加目标,以此类推。

tips:

  1. 如果添加目标选项没出来,可将鼠标移过去,就会出来了;
  2. 觉得矩形太多,选择目标容易混乱,可给每个矩形定义名称,样式/交互中都可以定义。

步骤五:制作菜单样式。

双击中继器,将三个子菜单组合后,在样式中设置为隐藏,如红色部分所示;

选中一级菜单矩形,在交互中设置为单击时,显示/隐藏进行切换展示。

整个制作完成,大家可以打开预览,欣赏自己的作品啦。是不是简单而又详细?

 

本文由 @汪仔4807 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 求教,上面的有没有视频?

    来自湖南 回复
  2. 中继器不显示目标选项,显示的而是[item.menu],最后的显示隐藏效果变成了单机就按件没有了,哪里的问题

    来自山东 回复
    1. 我也是这样

      来自广东 回复
  3. 如果拥有几个数量不同的二级菜单,怎么实现?

    来自重庆 回复
    1. 可以用中继器、动态面板实现,最简单的是直接使用水平菜单/垂直菜单元件,选中元件后点击鼠标右键可编辑。

      来自湖南 回复