《AxureRP9网站与App原型设计》教学教案—04用Axure动态面板制作动态效果.docx

第4章用Axure动态面板制作动态效果课时内容

课时内容

课时内容用Axure

课时内容

用Axure动态面板制作动态效果

课时6

教学目标

掌握动态面板、动态面板常用功能，学会制作淘宝登录页签的切换效果

教学重点

动态面板常用功能

教学难点

动态面板常用功能

】.教学思路：通过实例引入动态面板的概念；通过多媒体演示和实机操讲解动态面版

教学设计

的常用功能；通过实战实现登录页面切换效果。

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

动态面板模拟海报轮播效果教学内容-动态面板元件是一个动态的、由面板组成的元件。它可以让原型呈现动态的效果，而不是沉闷的静态页面，并且它能实现软件的高级交互效果。

动态面板模拟海报轮播效果

动态面板元件是Axure模拟很多动态效果的主要工具，如要模拟淘宝的广告轮播，可以将几张图摞在一起，轮流移动到最上面来显示，单击一个圈，就把对应的图，移动到最上面。

4.1动态面板的使用

动态面板元件里包含多种状态，可以把动态面板理解为装载这些状态的容器。

我们在上学的时候，经常把作业本摞成一摞，只能看到最上面一?本的封面。这一?摞作也本就是动态面板，每本作业就是动态面板中的一个状态，只有最上面的一个状态是可见的，其他状态都是隐藏的。动态面板的图标形象地表达动态面板元件的功能。

动态面板的显示内容也会发生变化，除了这种方式外，也可以在要移动的状态上鼠标右键单击，在弹出的快捷菜单里选择向上移动或向下移动命令，把“小刚的作业本”状态移动到第一个位置。

调整状态顺序

调整状态顺序

（7）鼠标右键单击要删除的动态面板状态，在弹出的快捷菜单中单击“删除”命令可以删除状态。

510微签Q回

510微签

Q

回Pagel

▼§T作业本

▼匚;小虎的作业本

4g8分

?匚业本

□小t际汾

?匚;小红的作业本adH!90?

匚:，网的作业本

小虎98分

（8）漏斗一样的按钮图标，被称为元件过滤器。单击元件过滤器按钮，会弹出很多项选择项，它是用来设置元件管理区域的显示情况，默认勾选了3个选项。

P“1X

4。110Q.一I,一「岬

至部元件

加面板

母版

动态面板或母板

具有名褥具有脚注

显示或总藏

砺百顶层至底层排序底层至I页诩序

元件过滤器

（9）勾选“母版”选项，会发现刚才显示的动态面板被隐藏起来；单击勾选“动态面板”选项,

元件管理区域就会把动态面板的内容显示需来。该元件过源器可以根据自己的需求，来设置显示什么、不显示什么。

1小。小虎

1小。

小虎98分

只显示母版

(10)放大镜按钮可以进行检索操作。

100小虎98分300

100

小虎98分

300

400

4001002003008收缩、隐藏动态面板回\隐竭态面板目P?9?l

400

100

200

300

8

收缩、隐藏动态面板

回

\

隐竭态面板

目P?9?l

?题TR作业本

收缩动态面板

(II)可以把动态面板的状态收缩起来，也可以展现出来。还可以把动态面板从视图中隐藏起来，在设计的时候，也经常会用到此功能，如图4.32所示。

51H

4.2动态面板的常用功能

动态面板有8个常用的功能：动态面板的显示与隐藏效果、动态面板的调整大小以适合内容、动态面板的滚动栏设置、动态面板的固定到浏览器、100%宽度、从动态面板脱离、转换为母版、转换为动态面板，这些常用功能是制作原型过程中不可缺少的8个功能。

动态面板的显示与隐藏效果

动态面板的显示与隐藏效果：通过动态面板的显示与隐藏效果的切换，完成动态的交互效果。

实战演练

（1）先保存当前工程，将Pagel页面重新命名为“动态面板的常用功能”，添加子页面并将其命名为“显示与隐藏效果”。

x

丽Q0

，S初恋面板的常用功能0显示与隐藏效果

页面命名

（2）进入到“显示与隐藏效果”子页面，拖曳两个“按钮”元件到工作区域，将其分别命名为“显示”和“隐藏”，拖曳一个动态面板元件，其名称为“显示与隐藏，把Slaiel重新命名为“内容”。

拖曳提交按钮和动态面板元件

（3）编辑“内容”状态，拖曳一个“矩形1”元件，编辑其文本内容为“我是显示与隐藏效果页面内容”，回到“显示与隐藏效果”页面。

▼日丽面方的堂用功总E旦示与aca果王

Q+（5IDefault0

律，§：

r-]图4.35编辑动态面板状态内容

（4）选中“显示”按钮之后，在检视区域的交互面板里，为“显示”按钮设置“单击时，设置可见性”触发事件。

（5）单击交互面板右下角的交互按钮，会弹出交互编辑器对话框，其中包括添加事件、添加动作、组织动作、设置动作4个操作面板，对话框中每个面板的区域都划分得很清楚，4个操作面板共同完成交互效果的设置交互按钮

交互按钮

交互按钮x交互编辑器

交互按