AxureRP教程–使用菜单组件

AxureRP提供了水平菜单、垂直菜单和树形菜单三种菜单组件,一般设计的时候如果需要用到导航菜单,都会用其他形式的组件组合去制作,这样外观会比较漂亮,而这三个菜单组件本身是有样式限制的,但如果设置得当也是可以比较美观的,且这三个菜单组件都自带子菜单功能,可以在原型当中做交互演示,大大省却了设计复杂导航菜单的时间,特别是对于中低保真要求的页面,本文介绍如何使用这三种菜单组件。

?

这三种菜单组件一般都用来设计多层菜单,使用很简单,直接拖拽过来即可,默认都是三栏菜单项,可根据需要设置。每种菜单都带有样式变换设置,水平菜单和垂直菜单的样式变换设置一样,编辑的方法和编辑其它组件一样,可以在菜单组件上连续按鼠标左键两下编辑文字,也可以利用工具栏上的工具来编辑菜单的色彩、字体和其它样式。右键编辑功能有这些项目:

  • 编辑菜单边距
  • 编辑轮换样式
  • 编辑选中时的样式
  • 在下方插入菜单条目
  • 在上方插入菜单条目
  • 删除菜单条目
  • 添加菜单条目

在编辑样式的时候会比之前其他的组件多了一个选项,就是选择当前设置是否应用到所有菜单条目或者只应用于当前,三个选项的区别是:

仅本菜单条目:只包括当前菜单项,不包括其子菜单项

仅本菜单:只包括当前菜单项及其同级菜单项,不包括子菜单项

本菜单和所有子菜单条目:顾名思义就是所有的

因此设置菜单样式的时候,若在父菜单设置好了,后面无论加多少级子菜单项都可以不用设置了,省却了不少工作量,其他属性如边距设置也是这样的。变换样式设置好之后,可利用鼠标滑过选单项目左上角的黑白色方块来预览变换样式;添加子菜单的时候,默认也是加三项,且会自动缩回,需要点一下才能查看;还可以设置边距,已像素为单位,根据需要设定。

树形菜单与前面两种菜单有些不一样,每个菜单项改称为节点,增加删除节点或子节点操作与菜单类似,只不过右键菜单选择不一样罢了。树形菜单多了一个节点属性设置,可以设置展开、折叠时的图片,一种是加减号,一种三角,还可以自定义,非常人性化;还可以设置节点图标,显示在节点名称前面,这个也支持自定义,类似常见的文件夹图标什么的,就是网上常见的树形菜单图标。样式设置也一样,只是树形菜单不是设置边距,而是设置缩进,设置都比较简单,没什么难度,尝试操作一下就会了。

三种组件的子项都支持OnClick事件,因此也就可以调用所有的交互事件动作,正是这个功能,是菜单类组件与别的组件配合使用能完成网站整体效果的设计,下面演示一下简单的菜单应用。

演示示例是分别用水平菜单,垂直菜单,树形菜单控制同一个动态面板的状态转换,类似页面切换的效果,也可以用内部框架来做,就是前面说的页面加载效果。

例子在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!