弹出菜单/自定义工具提示 | Flyout Menu / Custom Tooltips

弹出菜单是一种当光标离开时会自动隐藏的菜单。

同于构建弹出菜单的技术,同样也可以用来构建自定义工具提示。(要制作一个文本工具提示就更加简单,只需要使用文本属性页签下的“元件提示”字段就可以。)

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在练习文件中打开“弹出菜单”页面,这个页面包含四个构成主菜单的按钮元件,和一个主菜单项目的两个子菜单按钮。

选中两个子菜单,然后在顶部的工具栏中点击“组合”,将它们添加到一个组中。

给组起个名字叫“弹出”。

点击样式页签下的“隐藏”复选框,将这个组隐藏。

STEP2:添加一个显示弹出菜单的交互

选中“帮助”元件(带有子菜单的元件),双击属性页签下的“鼠标移入时”来创建一个新的鼠标移入时用例。(对于自定义工具提示,你也可以使用“鼠标停放时”来代替,当光标停在元件上方两秒时会触发“鼠标停放”事件,使用“更多事件”下拉列表可以找到鼠标停放时。)

在左侧“添加动作”栏,点击“显示”动作。

在右侧“配置动作”栏,点击勾选名为“弹出”的组。

在“配置动作”栏底部,使用“更多选项”下拉列表选择“弹出效果”。

点击“确定”按钮关闭对话框。

STEP3:预览

点击预览。

在原型中,弹出菜单会在你的光标进入“帮助”按钮的时候显示,在光标离开该按钮的时候隐藏。

STEP4:自定义工具提示

应用以上所学知识,完成Axure Training.rp文件中的下一个页面,名为“自定义工具提示”的页面。使用图片的“鼠标停放时”事件,当光标停放在图片元件上时,显示对话气泡元件,并且尝试添加一个150ms的淡入动画。

祝你好运,如果不知道如何操作,请查看“完成的”文件夹下该页面的完整示例。

评论(0)

发表评论

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