Axure RP 8交互原型设计案例教程第9章 动态面板

图9-3 添加新状态
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
2. 重命名状态 在【动态面板状态管理】对话框中或者【大纲】面板中，选择一个状态后，单击该状态或者 按【F2】键，便可输入新的名称了。 3. 隐藏状态面板 当页面上的动态面板过多时，可以随时将其隐藏。在【大纲】面板中单击动态面板最右侧的 【在视图中显示】按钮，即可隐藏动态面板，如图9-4 所示。
图 9-10 自动调整为内容尺寸
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面Fra Baidu bibliotek的基本操作
9.1.4 适应内容
也可以在【属性】子面板中找到【自 动调整为内容尺寸】选项，如图9-11 所 示。
图 9-11 【自动调整 为内容尺寸】选项
Axure RP 8 交互原型设计案例教程
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板 6. 复制状态 复制状态可以使用以下两种方法。 （1）通过【动态面板状态管理】对话框复制状态。 先选择要复制的状态，然后单击顶部的【复制】按钮，如图9-6 所示。 （2）通过【大纲】面板复制状态。 在【大纲】面板中右击要复制的状态，从弹出的快捷菜单中执行【复制状态】命令或者选择 的状态后，单击【复制状态】按钮。
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
1. 添加状态 默认状态下，打开【动态面板状态管理】 对话框时，已经存在一个状态了，单击工具栏 中的【添加状态】按钮，即可添加新的状态， 如图9-3 所示。也可以通过下列两种方法添加 新状态：在【大纲】面板中右击动态面板元件， 从弹出的快捷菜单中执行【添加状态】或直接 单击【大纲】面板右侧的【添加状态】按钮。
图 9-4 隐藏动态面板
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
4. 删除状态 删除状态可以使用以下两种方法。 （1）通过【动态面板状态管理】对话框删除状态。在【动态面板状态管理】对话框中，选择 一个状态后，单击顶部的【移除状态】按钮，如图9-5所示。 （2）通过【大纲】面板删除状态。在【大纲】面板中，右击要删除的状态，从弹出的快捷菜 单中执行【删除】命令，或者直接选择要删除的状态，然后按【Delete】键。
图 9-1 动态面板元件
Axure RP 8 交互原型设计案例教程
图9-2 动态面板在页面中的显示状态
第9章
动态面板
9.1 动态面板的基本操作
9.1.2 设置动态面板的样式
在页面中选择动态面板元件后，【样式】子面板中显示动态面板的参数，其中，动态面板中 的“背景”“背景图片”等参数与页面样式中相应的参数完全相同。
Axure RP 8 交互原型 设计案例教程
第9章
动态面板
第9章
动态面板
9.1 动态面板的基本操作
9.1.1 认识动态面板
动态面板和其他普通元件一样都位于【元件库】面板中，在【默认元件库】栏中可以看到它， 如图9-1 所示。将动态面板元件拖到页面中，动态面板会显示一个半透明的淡蓝色矩形，如图9-2 所示。
Axure RP 8 交互原型设计案例教程
图 9-5 移除状态按钮
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
5. 移动状态 移动状态顺序可以使用以下两种方法。 （1）通过【动态面板状态管理】对话框排列状态顺序。 在【动态面板状态管理】对话框中，选择要改变顺序的状态，然后单击顶部工具栏中的【上 移】和【下移】按钮。 （2）通过【大纲】面板排列状态顺序。 在【大纲】面板中右击要移动的状态，从弹出的快捷菜单中执行【上移】和【下移】命令， 或直接选择要移动的状态，然后按下左键向上或者向下拖动。
Axure RP 8 交互原型设计案例教程
图 9-6 通过【动态面板状态管理】 对话框复制状态
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
7. 编辑状态内容 编辑状态中的内容可以通过以下3 种方法。 （1）通过【动态面板状态管理】对话框编辑状态。 在该对话框中，可以编辑选中的状态，也可以一次性打开所有的状态进行编辑，如图9-7 所 示。 （2）通过【大纲】面板编辑状态。 在【大纲】面板中右击要编辑的状态，从弹出的快捷菜单中执行【编辑】命令，使用该方法 可以选择多个状态进行编辑，也可以直接双击要编辑状态，如图9-8所示。
第9章
动态面板
9.1 动态面板的基本操作
9.1.5 显示滚动条
动态面板和内联框架一样，当状态中的内容范围大于动态面板范围时，也可以控制是否让动 态面板显示滚动条，方法有两种。 1. 使用快捷菜单控制滚动条 在页面上或者【大纲】面板中右击动态面板，在弹出的快捷菜单中执行【滚动条】下的子命 令。 2. 通过【属性】子面板控制滚动条 选择页面中的动态面板后，在右侧的【属性】子面板中可以找到“滚动条”选项列表，如图 9-12所示。通过滚动条可以浏览被动态面板遮盖的其他内容，如果没有显示出滚动条，则无法显 示被遮盖的内容，如图9-13 所示。
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
图 9-7 通过【动态面板状态管理】 对话框编辑状态
图 9-8 通过【大纲】面板编辑状态
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.3 管理动态面板
管理动态面板是通过【动态面板状态管理】对话框实现的，打开该对话框有三种方法。 （1）双击页面中的动态面板元件。 （2）在页面的动态面板元件上右击，从弹出的快捷菜单中执行【管理面板状态】命令。 （3）在【大纲】面板中，双击动态面板元件或者也右击它，从弹出的快捷菜单中执行【管理 面板状态】命令。 在打开的【动态面板状态管理】对话框中，可以添加、删除、上移、下移状态，也可以编辑 状态内容等。
进入状态的编辑模式后，每个状态其实就是一个页面，状态大小可以通过蓝色虚线框观察到， 如图9-9 所示。
图 9-9 状态大小虚线框
Axure RP 8 交互原型设计案例教程
第9章
动态面板
9.1 动态面板的基本操作
9.1.4 适应内容
当状态中添加的对象大小与动态面板大小不匹配时，可以在页面上右击动态面板，从弹出的 快捷菜单中执行【自动调整为内容尺寸】，如图9-10 所示。