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

第9章 动态面板A x u r e R P 8 交 互 原 型设 计 案 例 教 程 （ 微 课 版 ）微课版动态面板和其他普通元件一样都位于【元件库】面板中，在【默认元件库】栏中可以看到它，如图9-1 所示将动态面板元件拖到页面中，动态面板会显示一个半透明的淡蓝色矩形，如图9-2所示Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.1 认识动态面板图 9-1 动态面板元件 图9-2 动态面板在页面中的显示状态在页面中选择动态面板元件后，【样式】子面板中显示动态面板的参数，其中，动态面板中的“背景”“背景图片”等参数与页面样式中相应的参数完全相同Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.2 设置动态面板的样式管理动态面板是通过【动态面板状态管理】对话框实现的，打开该对话框有三种方法1）双击页面中的动态面板元件2）在页面的动态面板元件上右击，从弹出的快捷菜单中执行【管理面板状态】命令3）在【大纲】面板中，双击动态面板元件或者也右击它，从弹出的快捷菜单中执行【管理面板状态】命令在打开的【动态面板状态管理】对话框中，可以添加、删除、上移、下移状态，也可以编辑状态内容等。

Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板1. 添加状态默认状态下，打开【动态面板状态管理】对话框时，已经存在一个状态了，单击工具栏中的【添加状态】按钮，即可添加新的状态，如图9-3 所示也可以通过下列两种方法添加新状态：在【大纲】面板中右击动态面板元件，从弹出的快捷菜单中执行【添加状态】或直接单击【大纲】面板右侧的【添加状态】按钮Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图9-3 添加新状态2. 重命名状态在【动态面板状态管理】对话框中或者【大纲】面板中，选择一个状态后，单击该状态或者按【F2】键，便可输入新的名称了3. 隐藏状态面板当页面上的动态面板过多时，可以随时将其隐藏在【大纲】面板中单击动态面板最右侧的【在视图中显示】按钮，即可隐藏动态面板，如图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.1.3 管理动态面板图 9-5 移除状态按钮5. 移动状态移动状态顺序可以使用以下两种方法1）通过【动态面板状态管理】对话框排列状态顺序在【动态面板状态管理】对话框中，选择要改变顺序的状态，然后单击顶部工具栏中的【上移】和【下移】按钮2）通过【大纲】面板排列状态顺序在【大纲】面板中右击要移动的状态，从弹出的快捷菜单中执行【上移】和【下移】命令，或直接选择要移动的状态，然后按下左键向上或者向下拖动Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板6. 复制状态复制状态可以使用以下两种方法1）通过【动态面板状态管理】对话框复制状态先选择要复制的状态，然后单击顶部的【复制】按钮，如图9-6 所示。

2）通过【大纲】面板复制状态在【大纲】面板中右击要复制的状态，从弹出的快捷菜单中执行【复制状态】命令或者选择的状态后，单击【复制状态】按钮Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.1 动态面板的基本操作9.1.3 管理动态面板图 9-6 通过【动态面板状态管理】对话框复制状态7. 编辑状态内容编辑状态中的内容可以通过以下3 种方法1）通过【动态面板状态管理】对话框编辑状态在该对话框中，可以编辑选中的状态，也可以一次性打开所有的状态进行编辑，如图9-7 所示2）通过【大纲】面板编辑状态在【大纲】面板中右击要编辑的状态，从弹出的快捷菜单中执行【编辑】命令，使用该方法可以选择多个状态进行编辑，也可以直接双击要编辑状态，如图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章动态面板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 【自动调整为内容尺寸】选项动态面板和内联框架一样，当状态中的内容范围大于动态面板范围时，也可以控制是否让动态面板显示滚动条，方法有两种1. 使用快捷菜单控制滚动条在页面上或者【大纲】面板中右击动态面板，在弹出的快捷菜单中执行【滚动条】下的子命令2. 通过【属性】子面板控制滚动条选择页面中的动态面板后，在右侧的【属性】子面板中可以找到“滚动条”选项列表，如图9-12所示通过滚动条可以浏览被动态面板遮盖的其他内容，如果没有显示出滚动条，则无法显示被遮盖的内容，如图9-13 所示。

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

如果要将动态面板的宽度和浏览器窗口的宽度保持一致，则需要将其设置为100%宽度，方法有两种：一是右击动态面板，从弹出的快捷菜单中执行【100%宽度】命令；二是从【样式】子面板中勾选“100%宽度”选项此时预览网页就会发现，动态面板的宽度填充了整个浏览器宽度Axure RP 8 交互原型设计案例教程（微课版）第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章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-16 动态面板的事件下面介绍动态面板中这些特别的事件。

状态改变时】表示当动态面板的状态改变时能导致产生某个结果状态改变是指从一个状态切换到另一个状态例如，可以在动态面板的状态改变时，显示和隐藏另一个元件1）在页面中创建一个动态面板元件，对其添加两个状态，在每个状态中各添加一个图形元件，如图9-17 所示Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-17 动态面板中的两个状态（2）在页面中创建一个文本标签元件并将其命名为“文本显示”，如图9-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）选择页面中的动态面板，双击【状态改变时】事件，在打开的【用例编辑】对话框中添加【显示/隐藏】动作，在【配置动作】栏中选择“文本显示”元件，在【可见性】选项中勾选【切换】选项，如图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 预览【状态改变时】事件效果下面使用该事件模仿一个在规定的范围内移动图片的交互效果1）在Axure RP 的页面中创建一个宽度为600 像素、高度为400 像素的矩形，将该矩形左上角对齐标尺坐标原点，也就是将矩形左上角对齐到水平0像素和垂直0 像素的位置，然后导入一幅鼠标的图片并将图片元件转为动态面板，如图9-22 所示Axure RP 8 交互原型设计案例教程（微课版）第9章动态面板9.2 动态面板的事件和动作9.2.1 动态面板的事件图 9-22 创建的图形元件和动态面板（2）选择动态面板，在【属性】子面板中双击【鼠标拖动时】，在打开的【用例编辑】对话框中添加一个【移动】动作，在【配置动作】栏中先选择动态面板，然后将【移动】选项设置为【拖动】，单击【添加边界】超链接添加4 个边界，参数设置如图9-23 所示。