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

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

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

3、动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.3 管理动态面板1.添加状态默认状态下，打开【动态面板状态管理】对话框时，已经存在一个状态了，单击工具栏中的【添加状态】按钮，即可添加新的状态，如图9-3 所示。也可以通过下列两种方法添加新状态：在【大纲】面板中右击动态面板元件，从弹出的快捷菜单中执行【添加状态】或直接单击【大纲】面板右侧的【添加状态】按钮。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.3 管理动态面板图9-3 添加新状态2.重命名状态在【动态面板状态管理】对话框中或

4、者【大纲】面板中，选择一个状态后，单击该状态或者按【F2】键，便可输入新的名称了。3.隐藏状态面板当页面上的动态面板过多时，可以随时将其隐藏。在【大纲】面板中单击动态面板最右侧的【在视图中显示】按钮，即可隐藏动态面板，如图9-4 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.3 管理动态面板图 9-4 隐藏动态面板4.删除状态删除状态可以使用以下两种方法。（1）通过【动态面板状态管理】对话框删除状态。在【动态面板状态管理】对话框中，选择一个状态后，单击顶部的【移除状态】按钮，如图9-5所示。（2）通过【

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

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

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

8、作动态面板的基本操作9.1.3 管理动态面板Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.3 管理动态面板图 9-7 通过【动态面板状态管理】对话框编辑状态图 9-8 通过【大纲】面板编辑状态进入状态的编辑模式后，每个状态其实就是一个页面，状态大小可以通过蓝色虚线框观察到，如图9-9 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.3 管理动态面板图 9-9 状态大小虚线框当状态中添加的对象大小与动态面板大小不匹配时，可

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

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

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

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

13、选“100%宽度”选项。此时预览网页就会发现，动态面板的宽度填充了整个浏览器宽度。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.7 100%宽度1.将元件转为动态面板在页面上或者【大纲】面板中右击一般元件，从弹出的快捷菜单中执行【转换为动态面板】。将一般元件转为动态面板之后，该元件会变成动态面板中的一个状态。2.将动态面板转为元件在页面上或【大纲】面板中右击动态面板，从弹出的快捷菜单中执行【从首个状态中脱离】命令，即可将动态面板中的第一个状态转为一般元件。Axure RP 8 交互原型设计案例教程第第9 9章

14、章动态面板动态面板9.1 9.1 动态面板的基本操作动态面板的基本操作9.1.8 动态面板和一般元件的转换动态面板共有31 个事件，如图9-16 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-16 动态面板的事件下面介绍动态面板中这些特别的事件。【状态改变时】表示当动态面板的状态改变时能导致产生某个结果。状态改变是指从一个状态切换到另一个状态。例如，可以在动态面板的状态改变时，显示和隐藏另一个元件。（1）在页面中创建一个动态面板元件，对其添加两个状态，在每个状态中各添加一个

15、图形元件，如图9-17 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-17 动态面板中的两个状态（2）在页面中创建一个文本标签元件并将其命名为“文本显示”，如图9-18 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-18 创建的文本标签元件（3）给当前页面添加一个【页面载入时】事件，添加的动作是【设置面板状态】，在右侧的【配置动作】栏中设置状态为“Nex

16、t”（下一个），勾选【向后循环】选项，设置循环间隔为1000 毫秒（等于1 秒），如图9-19 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-19 设置【页面载入时】用例（4）选择页面中的动态面板，双击【状态改变时】事件，在打开的【用例编辑】对话框中添加【显示/隐藏】动作，在【配置动作】栏中选择“文本显示”元件，在【可见性】选项中勾选【切换】选项，如图9-20 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作

17、动态面板的事件和动作9.2.1 动态面板的事件图 9-20 设置【状态改变时】用例按【F5】键预览，页面载入时显示黑色的汽车和文本标签，1 秒之后显示蓝色的汽车，同时文本标签隐藏，1 秒之后再次隐藏蓝色汽车，显示黑色汽车和文本标签，如图9-21所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-21 预览【状态改变时】事件效果下面使用该事件模仿一个在规定的范围内移动图片的交互效果。（1）在Axure RP 的页面中创建一个宽度为600 像素、高度为400 像素的矩形，将该矩形左上

18、角对齐标尺坐标原点，也就是将矩形左上角对齐到水平0像素和垂直0 像素的位置，然后导入一幅鼠标的图片并将图片元件转为动态面板，如图9-22 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-22 创建的图形元件和动态面板（2）选择动态面板，在【属性】子面板中双击【鼠标拖动时】，在打开的【用例编辑】对话框中添加一个【移动】动作，在【配置动作】栏中先选择动态面板，然后将【移动】选项设置为【拖动】，单击【添加边界】超链接添加4 个边界，参数设置如图9-23 所示。Axure RP 8

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

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

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

22、到拖动前位置】，如图9-28所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-27 设置水平移动图 9-28 设置【鼠标拖动结束时】事件的用例按【F5】键预览，按左键只能在水平方向移动鼠标图片，释放鼠标左键后，鼠标图标就恢复到了原来的位置，如图9-29 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态

23、面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.1 动态面板的事件图 9-29 预览【鼠标拖动结束时】事件【鼠标向左拖动结束时】、【鼠标向右拖动结束时】、【鼠标向上拖动结束时】和【鼠标向下拖动结束时】这4 个事件的不同之处是显而易见的，即鼠标拖动动态面板的方向不同。与前面所学的【鼠标拖动时】和【鼠标拖动结束时】两个事件不同，这4 个事件中的【移动】动作的移动选项只有【到达】和【经过】两个，与【鼠标拖动开始时】事件中的【移动】动作的【移动】选项一致，如图9-30 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作

24、动态面板的事件和动作9.2.1 动态面板的事件图 9-30 两个移动选项在【用例编辑】对话框中，专门有一个针对动态面板的动作，它就是【设置面板状态】，在【配置动作】栏中选择动态面板后，下方会列出相关的参数设置，如图9-31 所示。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.2 动态面板动作图 9-31【设置面板状态】参数1.选择状态可以选择动态面板中的某个状态，在右侧的下拉列表中会列出动态面板中创建的每个状态。2.进入和退出动画可以设置由一个状态进入另一个状态时的动画过渡效果，在许多动作中都存在这样的动

25、画设置。例如，前面章节中讲到的【显示/隐藏】、【移动】、【设置尺寸】等动作。3.显示隐藏的动态面板如果动态面板被设置为了隐藏状态，勾选【如果隐藏则显示面板】选项就会将隐藏的动态面板显示出来。4.推拉元件该功能与8.3.1 小节介绍的显示和隐藏动作的推动元件功能相似，可以推/拉其下方或者右侧的元件。Axure RP 8 交互原型设计案例教程第第9 9章章动态面板动态面板9.2 9.2 动态面板的事件和动作动态面板的事件和动作9.2.2 动态面板动作本章总结本章总结通过本章的学习，读者应熟练掌握动态面板的使用方法以及动态面板中独有的几个事件的应用，如【鼠标拖动时】、【鼠标拖动结束时】等；要熟练使用【设置面板状态】动作；充分认识动态面板的强大功能，能使用动态面板制作出复杂的交互原型。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程