Axure中级互动设计2—鼠标移入移出等的互动设计
已有 683 次阅读2011-5-18 21:30 |个人分类:教程|系统分类:产品视角| 功能, Axure
包括以下步骤：
1. 滑鼠移入移出(OnMouseEnter/OnMouseOut) 2. 变换图像(Rollover Image) 3. 变换样式(Rollover Style)
1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)
在先前初级互动设计(Basic Interaction)一章中，介绍多种Axure RP支援的人机介面互动效果。这里我们要介绍其中两个常见的触发事件 (Event)： OnMouseEnter - 滑鼠的指标移动到物件之上 OnMouseOut - 滑鼠的指标移动出物件之外
有许多Widget可以使用OnMouseEnter 和OnMouseOut触发事件，当滑鼠移到Widget上时会触发OnMouseEnter事件，OnMouseOut事件则发生在滑鼠离开 Widget 时被触发。
最常见的运用方式，则是合并Dynamic Panel来控制比较复杂的功能时，例如：浮动选单、滑过特效和自订tooltips等。
以左图的互动效果来当例子：当滑鼠移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当滑鼠移出图片时，说明文字框就会消失。这个互动设计就可透过OnMouseEnter 和OnMouseOut触发事件结合Dynamic Panel的控制来达成，设计方式如下图所示。
2. 变换图像(Rollover Image)
Image Widget 以及Button Shape Widget可直接利用Axure RP的功能来设计Rollover Image和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和Dynamic Panel。 变换图像(Rollover Image)
想要建立变换影像的话，请在Image Widget上按右键，选择「Edit Image->Import Rollover Image」，然后选择一个影像当作变换影像，一旦影像选定后，您可以在Wireframe中，利用滑鼠滑过影像上的黑白色方块来预览变换影像。
3. 变换样式(Rollover Style)
在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」核取方块来预览套用在选单上的变换样式。