辉灿新闻网 原型设计 Axure9:巧用中继器,零基础也能五步做出菜单

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

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

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

先上效果图

步骤一:准备素材。

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

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

步骤二:设置菜单框架。

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

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

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

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

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

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

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

tips:表头要用英文;

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

tips:

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

步骤五:制作菜单样式。

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

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

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

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

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

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/275.html

作者: 汪仔4807

Axure中级教程:管理后台内容模板(中继器全交互详解)

制作switch开关:只使用一个圆和一个椭圆

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部