Axure初中高级交互实例

2026/4/28 2:42:00

step 1: Description - 预设为Case 1,不用变更。

step 2: Select Actions - 勾选Toggle Visibility for Panel(s),此时在step 3会出现Toggle Visibility for Panel。如下图:

接下来…

step 3: Edit the Action description (click an underlined value to edit) - 这句话的意思是,去点选有加底线的项目进一步编辑。于是我们接着click Panel这个单字,然后会看到弹出一个「Select Panels」对话方块,里头只有一个叫做”My First Panel”的项目,把它勾选起来。此时在step 3会出现Toggle Visibility for My First Panel。 (如下图)

如果您曾经给Dynamic Panel有意义的名称,就可以在Select Panel时看到被您命名过的Panel。选择Dynamic Panel时,Dynamic Panel 会以Annotations & Interactions 窗格中所给予的Label做为识别,如果没有指定的话,Dynamic Panel 会预设标示为”Unlabeled”。

接下来,就可以输出Prototype了,按下F5或选择「Generate > Prototype」,将刚刚设计过的简易互动介面,输出到浏览器上进一步检视,当滑鼠click时,您所设计的那个Dynamic Panel是否会消失/出现(如下图)。

当您顺利完成这个 Dynamic Panel的设定之后,非常恭喜!您已经成功进阶到Axure RP中级互动设计了,随着Dynamic Panel的各种互动设计技巧的熟练,您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。

Axure中级互动设计2—鼠标移入移出等的互动设计

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初中高级交互实例.doc 将本文的Word文档下载到电脑
搜索更多关于: Axure初中高级交互实例 的文档
相关推荐
相关阅读
× 游客快捷下载通道(下载后可以自由复制和排版)

下载本文档需要支付 10

支付方式:

开通VIP包月会员 特价:29元/月

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:xuecool-com QQ:370150219