第一范文网 - 专业文章范例文档资料分享平台

Axure初中高级交互实例

来源:用户分享 时间:2025/5/20 9:57:34 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

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初中高级交互实例 的文档
Axure初中高级交互实例.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印
本文链接:https://www.diyifanwen.net/c23y3f0i6gd1od1e2lz3r_4.html(转载请注明文章来源)
热门推荐
Copyright © 2012-2023 第一范文网 版权所有 免责声明 | 联系我们
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:xxxxxx 邮箱:xxxxxx@qq.com
渝ICP备2023013149号
Top