Axure初中高级交互实例

在Axure RP里头，Rectangle，Placeholder，Button Shape这三种Widget可以直接设定变换样式(Rollover Style)，而不需要去特别指定OnMouseEnter / OnMouseOut的触发事件，就可以做到变换样式。

想要建立变换样式的话，请在Rectangle / Placeholder / Button Shape上按右键，选择「Edit Edit Button Shape->Edit Rollover Style」。

此时会开启「Set Rollover Style」对话方块，您可以在这里选择变换样式，勾选「Preview」核取方块来预览设定在Button Shape的变换样式。

变换的样式(如下图)包括： * 字型 Font

* 字体大小 Font Size * 粗体 Bold * 斜体 Italic * 底线 Underline * 文字颜色 Font Color * 填色 Fill Color * 线条颜色 Line Color * 线宽 Line Width

* 线条样式 Line Style

套用了变换样式之后，您可以选择 Preview提早预览效果。也可以在Wireframe中，利用滑鼠滑过Widget左上角的黑白色方块来预览变换状态。 Axure中级互动设计3—设计多层选单

设计多层选单

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

3. 设定选单的变换样式 (Rollover Style) 4. 秘技 (Quick Tips)

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

选单物件(Menu widgets) 常被用来建立简单的多层选单(Flyout Menus)。

您可以在 Widgets窗格中找到两种选单物件： * Menu (Vertical) - 垂直选单 * Menu (Horizontal) - 水平选单

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

下图展示的动画则是已经完成设定的多层选单：

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的选项上，按滑鼠右键会出现如下图功能选单：

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

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

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

设定选项间距 (Padding)

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

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

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

想要编辑选单的变换样式，请在选单或选单项目上按滑鼠右键，选择「Edit Rollover Style」，此时会开启「Set Rollover Style」对话方块，您可以在这里选择单一选单项目、选单上的所有选单项目，或是选单和子选单上的所有选单项目的变换样式。 勾选「Preview」核取方块来预览套用在选单上的变换样式。

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