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

1、第9章 动态面板Axure RP 8 交互原型设计案例教程动态面板和其他普通元件一样都位于【元件库】面板中，在【默认元件库】栏中可以看到它，如图9-1 所示。将动态面板元件拖到页面中，动态面板会显示一个半透明的淡蓝色矩形，如图9-2所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.1 认识动态面板图 9-1 动态面板元件 图9-2 动态面板在页面中的显示状态在页面中选择动态面板元件后，【样式】子面板中显示动态面板的参数，其中，动态面板中的“背景”“背景图片”等参数与页面样式中相应的参数完全相同。Axure RP 8 交互原型设计案例教程第9章动态面

2、板9.1 动态面板的基本操作9.1.2 设置动态面板的样式管理动态面板是通过【动态面板状态管理】对话框实现的，打开该对话框有三种方法。（1）双击页面中的动态面板元件。（2）在页面的动态面板元件上右击，从弹出的快捷菜单中执行【管理面板状态】命令。（3）在【大纲】面板中，双击动态面板元件或者也右击它，从弹出的快捷菜单中执行【管理面板状态】命令。在打开的【动态面板状态管理】对话框中，可以添加、删除、上移、下移状态，也可以编辑状态内容等。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板1. 添加状态默认状态下，打开【动态面板状态管理】对话框时，

3、已经存在一个状态了，单击工具栏中的【添加状态】按钮，即可添加新的状态，如图9-3 所示。也可以通过下列两种方法添加新状态：在【大纲】面板中右击动态面板元件，从弹出的快捷菜单中执行【添加状态】或直接单击【大纲】面板右侧的【添加状态】按钮。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图9-3 添加新状态2. 重命名状态在【动态面板状态管理】对话框中或者【大纲】面板中，选择一个状态后，单击该状态或者按【F2】键，便可输入新的名称了。3. 隐藏状态面板当页面上的动态面板过多时，可以随时将其隐藏。在【大纲】面板中单击动态面板最右侧的【在视图中

4、显示】按钮，即可隐藏动态面板，如图9-4 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图 9-4 隐藏动态面板4. 删除状态删除状态可以使用以下两种方法。（1）通过【动态面板状态管理】对话框删除状态。在【动态面板状态管理】对话框中，选择一个状态后，单击顶部的【移除状态】按钮，如图9-5所示。（2）通过【大纲】面板删除状态。在【大纲】面板中，右击要删除的状态，从弹出的快捷菜单中执行【删除】命令，或者直接选择要删除的状态，然后按【Delete】键。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9

5、.1.3 管理动态面板图 9-5 移除状态按钮5. 移动状态移动状态顺序可以使用以下两种方法。（1）通过【动态面板状态管理】对话框排列状态顺序。在【动态面板状态管理】对话框中，选择要改变顺序的状态，然后单击顶部工具栏中的【上移】和【下移】按钮。（2）通过【大纲】面板排列状态顺序。在【大纲】面板中右击要移动的状态，从弹出的快捷菜单中执行【上移】和【下移】命令，或直接选择要移动的状态，然后按下左键向上或者向下拖动。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板6. 复制状态复制状态可以使用以下两种方法。（1）通过【动态面板状态管理】对话框

6、复制状态。先选择要复制的状态，然后单击顶部的【复制】按钮，如图9-6 所示。（2）通过【大纲】面板复制状态。在【大纲】面板中右击要复制的状态，从弹出的快捷菜单中执行【复制状态】命令或者选择的状态后，单击【复制状态】按钮。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图 9-6 通过【动态面板状态管理】对话框复制状态7. 编辑状态内容编辑状态中的内容可以通过以下3 种方法。（1）通过【动态面板状态管理】对话框编辑状态。在该对话框中，可以编辑选中的状态，也可以一次性打开所有的状态进行编辑，如图9-7 所示。（2）通过【大纲】面板编辑状态。

7、在【大纲】面板中右击要编辑的状态，从弹出的快捷菜单中执行【编辑】命令，使用该方法可以选择多个状态进行编辑，也可以直接双击要编辑状态，如图9-8所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图 9-7 通过【动态面板状态管理】对话框编辑状态图 9-8 通过【大纲】面板编辑状态进入状态的编辑模式后，每个状态其实就是一个页面，状态大小可以通过蓝色虚线框观察到，如图9-9 所示。Axure RP 8 交互原型设计案例教程第9章动态面

8、板9.1 动态面板的基本操作9.1.3 管理动态面板图 9-9 状态大小虚线框当状态中添加的对象大小与动态面板大小不匹配时，可以在页面上右击动态面板，从弹出的快捷菜单中执行【自动调整为内容尺寸】，如图9-10 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.4 适应内容图 9-10 自动调整为内容尺寸也可以在【属性】子面板中找到【自动调整为内容尺寸】选项，如图9-11 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.4 适应内容图 9-11 【自动调整为内容尺寸】选项动态面板和内联框架一样，当状态中

9、的内容范围大于动态面板范围时，也可以控制是否让动态面板显示滚动条，方法有两种。1. 使用快捷菜单控制滚动条在页面上或者【大纲】面板中右击动态面板，在弹出的快捷菜单中执行【滚动条】下的子命令。2. 通过【属性】子面板控制滚动条选择页面中的动态面板后，在右侧的【属性】子面板中可以找到“滚动条”选项列表，如图9-12所示。通过滚动条可以浏览被动态面板遮盖的其他内容，如果没有显示出滚动条，则无法显示被遮盖的内容，如图9-13 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.5 显示滚动条Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态

10、面板的基本操作9.1.5 显示滚动条图 9-12 滚动控制选项图9-13 显示和隐藏滚动条可以将动态面板固定到浏览器窗口的某个位置，就像一些网购网站一样，会在右侧一直出现一些固定的按钮，以便于用户购买自己需要的商品。图9-14 为京东网站的一个页面，右侧出现了会员、购物车等按钮。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.6 固定到浏览器图 9-14 京东网站中的一个页面在Axure RP 中，有两种方法可以很轻松地实现这个功能，一种方法是在页面中或【大纲】面板中右击动态面板元件，从弹出的快捷菜单中执行【固定到浏览器】命令；另一种方法是在【属性】子

11、面板中单击“固定到浏览器”超链接，打开图9-15 所示的【固定到浏览器】对话框。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.6 固定到浏览器图 9-15 【固定到浏览器】对话框默认状态下，在浏览器中浏览时，动态面板的宽度就是在Axure RP 中设置的宽度。如果要将动态面板的宽度和浏览器窗口的宽度保持一致，则需要将其设置为100%宽度，方法有两种：一是右击动态面板，从弹出的快捷菜单中执行【100%宽度】命令；二是从【样式】子面板中勾选“100%宽度”选项。此时预览网页就会发现，动态面板的宽度填充了整个浏览器宽度。Axure RP 8 交互原型设计案

12、例教程第9章动态面板9.1 动态面板的基本操作9.1.7 100%宽度1. 将元件转为动态面板在页面上或者【大纲】面板中右击一般元件，从弹出的快捷菜单中执行【转换为动态面板】。将一般元件转为动态面板之后，该元件会变成动态面板中的一个状态。2. 将动态面板转为元件在页面上或【大纲】面板中右击动态面板，从弹出的快捷菜单中执行【从首个状态中脱离】命令，即可将动态面板中的第一个状态转为一般元件。Axure RP 8 交互原型设计案例教程第9章动态面板9.1 动态面板的基本操作9.1.8 动态面板和一般元件的转换动态面板共有31 个事件，如图9-16 所示。Axure RP 8 交互原型设计案例教程第9

13、章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-16 动态面板的事件下面介绍动态面板中这些特别的事件。【状态改变时】表示当动态面板的状态改变时能导致产生某个结果。状态改变是指从一个状态切换到另一个状态。例如，可以在动态面板的状态改变时，显示和隐藏另一个元件。（1）在页面中创建一个动态面板元件，对其添加两个状态，在每个状态中各添加一个图形元件，如图9-17 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-17 动态面板中的两个状态（2）在页面中创建一个文本标签元件并将其命名为“文本显示”，如图9-

14、18 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-18 创建的文本标签元件（3）给当前页面添加一个【页面载入时】事件，添加的动作是【设置面板状态】，在右侧的【配置动作】栏中设置状态为“Next”（下一个），勾选【向后循环】选项，设置循环间隔为1000 毫秒（等于1 秒），如图9-19 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-19 设置【页面载入时】用例（4）选择页面中的动态面板，双击【状态改变时】事件，在打开的【用例编辑】对话框中添

15、加【显示/隐藏】动作，在【配置动作】栏中选择“文本显示”元件，在【可见性】选项中勾选【切换】选项，如图9-20 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-20 设置【状态改变时】用例按【F5】键预览，页面载入时显示黑色的汽车和文本标签，1 秒之后显示蓝色的汽车，同时文本标签隐藏，1 秒之后再次隐藏蓝色汽车，显示黑色汽车和文本标签，如图9-21所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-21 预览【状态改变时】事件效果下面使用该事件模仿

16、一个在规定的范围内移动图片的交互效果。（1）在Axure RP 的页面中创建一个宽度为600 像素、高度为400 像素的矩形，将该矩形左上角对齐标尺坐标原点，也就是将矩形左上角对齐到水平0像素和垂直0 像素的位置，然后导入一幅鼠标的图片并将图片元件转为动态面板，如图9-22 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-22 创建的图形元件和动态面板（2）选择动态面板，在【属性】子面板中双击【鼠标拖动时】，在打开的【用例编辑】对话框中添加一个【移动】动作，在【配置动作】栏中先选择动态面板，然后将【移动】选项设置为【拖

17、动】，单击【添加边界】超链接添加4 个边界，参数设置如图9-23 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-23 设置【移动】动作参数按【F5】键预览，将鼠标指向鼠标图片并按下左键拖动，但是无论怎样拖动，鼠标图标始终在矩形范围内移动，这是由于设置了移动边界的缘故，如图9-24 所示。当然，在这里也可以限制鼠标移动对象的方向，方法是：在【配置动作】栏中设置【移动】为【水平拖动】或者【垂直拖动】，如图9-25

18、 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-24 预览移动效果 图9-25 水平和垂直移动【鼠标拖动开始时】和【鼠标拖动结束时】这两个事件和前面学过的【鼠标拖动时】的区别在于拖动的时间节点的不同：【鼠标拖动开始时】表示按下鼠标左键刚拖动动态面板的那个时刻；【鼠标拖动结束时】表示按下鼠标左键拖动完动态面板后，刚释放左键的那个时刻。如果用点A 表示拖动开始的位置，用点B 表示拖动结束的位置，那么AB 之间就是

19、【鼠标拖动时】的位置，如图9-26 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-26 鼠标拖动示意图（1）选择页面中的动态面板，双击添加的“用例1”，在打开的【用例编辑】对话框中将【移动】设置为【水平移动】，其余参数设置不变，如图9-27 所示。（2）保持动态面板处于选中状态，双击【鼠标拖动结束时】事件，在打开的对话框中继续添加【移动】动作，在【配置动作】栏中选择动态面板，设置【移动】为【回到拖动前位置】，如图9-28所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.

20、1 动态面板的事件Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-27 设置水平移动图 9-28 设置【鼠标拖动结束时】事件的用例按【F5】键预览，按左键只能在水平方向移动鼠标图片，释放鼠标左键后，鼠标图标就恢复到了原来的位置，如图9-29 所示。Axure RP 8 交互原型设计案例教程第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-29 预览【鼠标拖动结束时】事件【鼠标向左拖动结束时】、【鼠标向右拖动结束时】、【鼠标向上拖动结束时】和【鼠标向下拖动结束时】这4 个事件的不同之处是显而易见的，即鼠标拖动动态面板的方向不同。与前面所学的【鼠标拖动时】和【鼠标拖动结束时】两个事件不同，这4 个事件中的【移动】动作的移动选项只有【到达】和【经过】两个，与【鼠标拖动开始时】事件中的【移动】动作的【移动】