Axure RP中文网站-免费下载/在线教程/培训-悠识UserXper

设计多层选单

1. 认识选单物件 (Menu Widget)
2. 编辑选单对象
3. 设定选单的变换样式 (Rollover Style)
4. 秘技 (Quick Tips)


1. 认识选单物件 (Menu Widget)

选单对象 (Menu widgets) 常被用来建立简单的多层选单 (Flyout Menus)。Axure 选单对象 Menu Widgets您可以在Widgets窗格中找到两种选单物件:

  • Menu (Vertical) – 垂直选单
  • Menu (Horizontal) – 水平选单

将你所需要的选单对象从Widgets窗格中拖曳到Wireframe就可轻松建立,新的选单会先设置3个选单选项(Menu Item)。

下图展示的动画则是已经完成设定的多层选单:
Axure Menu Demo 选单动态展示


2. 编辑选单对象

编辑选单和选单项目的文字与格式的方法就像编辑其它Widget一样,您可以在选单项目上连续按鼠标左键两下编辑文字,也可以利用工具列来编辑选单和选单项目的色彩、字型和其它样式。

选单对象的编辑功能有这些项目:

  • Edit Menu Padding – 选项间距设定
  • Edit Rollover Style – 设定变换样式
  • Add Menu Item After – 往后新增选项
  • Add Menu Item Before – 往前新增选项
  • Delete Menu Item – 删除选项
  • Add Submenu – 新增子选单 (如果已经有子选单,则会显示 Delete Submenu – 删除子选单)

在 Menu Widget的选项上,按鼠标右键会出现如下图功能选单:
Axure 新增选单选项 Add Menuitem

增加或移除选单项及子选单

想要增加或移除选单项目的话,请在选单项目上按鼠标右键,选择「Add Menu Item」和「Delete Menu Item」指令。

想要在选单项目下加入子选单的话,请在选单项目上按鼠标右键,选择「Add Submenu」。在Axure RP的画布区域,通常Submenu会自动缩回,要去点一下上层选单,才能再看到前新增的Submenu。如下动画:
Axure Add Submenu (新增子选单)
 

设定选项间距(Padding)

若是想要编辑选单项目之间的间距(Padding),请在选单或选单项目上按鼠标右键,选择「Edit Menu Padding」。

Axure 预设选单
 


3. 设定选单的变换样式 (Rollover Style)

就像Button Shape Widget一样,变换样式(Rollover Style)也可套用在Menu Widget的选单项目上。

想要编辑选单的变换样式,请在选单或选单项目上按鼠标右键,选择「Edit Rollover Style」,此时会开启「Set Rollover Style」对话框,您可以在这里选择单一选单项目、选单上的所有选单项目,或是选单和子选单上的所有选单项目的变换样式。

勾选「Preview」复选框来预览套用在选单上的变换样式。

套用了变换样式之后,您可以在Wireframe中,利用鼠标滑过选单项目左上角的黑白色方块来预览变换样式。

Axure 设定选单的变换样式 (Menu Rollover Style)


4. 秘技 (Quick Tips)

秘技 1. 优先设定母选单(Root Menu)的样式:

当子选单(Submenu)建立了以后,会自动套用母选单(Root Menu)的样式,您可以在建立子选单之前先将母选单样式设好,以节省时间。


(版权声明:欢迎引用及复制Axure RP 中文教学内容,必须注明出处为悠识数位顾问有限公司及原始文章网址 UserXper.com)


访客留言

  1. landa 2009/9/4 / 4下午

    花了点时间把所有教程都看完了,受益匪浅,谢谢richard

  2. hongf 2009/9/7 / 5下午

    看完了,也学会了,希望还有更多好的教程。

张贴留言

* 为必填,您的email并不会被显示
姓名

Email *
下载Axure RP 最佳网站/AP原型设计软件 下载Axure RP 最佳网站/AP原型设计软件

 
 
 
 
 

XHTML / CSS / Designed by Handlino