Axure RP动态面板控件及其使用方法

2023-05-2416:36:48原型设计Comments2,941 views字数 1062阅读模式

介绍Axure RP动态面板控件及其使用方法、如何通过交互动作引发动态面板的交互、动态面板使用案例等内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html


1、动态面板控件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

动态面板控件可以让你的原型实现高级的动态交互功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

动态面板包含有多个状态(states),每个状态可包含一系列控件。任何时候都只有一个状态是可见的,或这整个动态面板可以被隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

结合交互动作,可以让动态面板的状态进行隐藏、显示和改变。像其它控件一样,你可以在控件面板中拖拉动态面板控件,将动态面板控件添加到线框图中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

2. 编辑动态面板的状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

在线框图中,双击动态面板可以打开一个“Dynamic Panel State Manager”对话框,在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

第一个状态是动态面板的默认状态。在对话框中选中一个状态,然后点击“Edit State”按钮,就可以打开一个状态线框图进行状态设计。状态设计和线框图设计是一样的,状态线框图中的蓝色虚线外框表示动态面板的范围边界。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

3. 隐藏动态面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

只要选择动态面板,右键菜单选择“Edit Dynamic Panel->Set Hidden”即设置动态面板在默认时隐藏。这将会隐藏面板内容,动态面板的遮罩会由蓝色变为黄色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

4. 交互动作和动态面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

交互动作可以引发动态面板的交互。在“Interaction Case Properties”对话框中包含了以下可以引发动态面板交互的动作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

  •  Set Panel state(s) to State(s)
  • Show Panel(s)
  • Hide Panel(s)
  • Toggle Visibility for Panel(s)
  • Move Panel(s)

选择其中一个动作就可以和动态面板进行交互,并且可以在对话框下部的“Actions descriptions”选择一个要链接的状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

在控件注释和交互面板中,可以在Label输入框中对动态面板进行标识,以后就可以引用这个动态面板。如果没有为动态面板指定 label,动态面板会被标识为“Unlabeled”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

5、动态面板使用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Tab页签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

动态面板可用于创建一个Tab页签控件。如Tab页签控件有3个tab,则该tab控件被包含在拥有3个状态的动态面板中,每个状态代表一个tab。对每个tab都有一个交互动作,当点击某个tab时,就会切换到动态面板的对应状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

弹出菜单 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

动态面板可以用于在原型中自定义弹出菜单,或根据鼠标移动动态的显示和隐藏菜单,但需要结合OnMouseEnter事件和动作来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

Axure RP动态面板控件及其使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

页面动态初始化 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

动态面板和OnPageLoad事件结合,可实现根据变量值进行页面初始化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41865.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/41865.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定