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

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

课时内容
用Axure动态面板制作动态效果
课时 6

教学目标
掌握动态面板、动态面板常用功能，学会制作淘宝登录页签的切换效果
教学重点
动态面板常用功能
教学难点
动态面板常用功能
】.教学思路：通过实例引入动态面板的概念；通过多媒体演示和实机操讲解动态面版
教学设计
的常用功能；通过实战实现登录页面切换效果。
2 .教学手段：多媒体+计算机
3 .教学资料：教材、多媒体课件
动态面板模拟海报轮播效果
教学内容-动态面板元件是一个动态的、由面板组成的元件。它可以让原型呈现动态的效果，而不是沉闷 的静态页面，并且它能实现软件的高级交互效果。
动态面板元件是Axure模拟很多动态效果的主要工具，如要模拟淘宝的广告轮播，可以将几张 图摞在一起，轮流移动到最上面来显示，单击一个圈，就把对应的图，移动到最上面。
4.1动态面板的使用
动态面板元件里包含多种状态，可以把动态面板理解为装载这些状态的容器。
我们在上学的时候，经常把作业本摞成一摞，只能看到最上面一•本的封面。这一•摞作'也本就是 动态面板，每本作业就是动态面板中的一个状态，只有最上面的一个状态是可见的，其他状态都是 隐藏的。动态面板的图标形象地表达动态面板元件的功能。
动态面板的显示内容也会发生变化，除了这种方式外，也可以在要移动的状态上鼠标右键单击，在 弹出的快捷菜单里选择向上移动或向下移动命令，把“小刚的作业本”状态移动到第一个位置。
调整状态顺序

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

510微签
Q
回 Pagel
▼ § T作业本
▼匚;小虎的作业本
4g8分
•匚业本
□小t际汾
•匚;小红的作业本 ad'H!90»
匚:，网的作业本
小虎98分
删除状态
（8）漏斗一样的按钮图标，被称为元件过滤器。单击元件过滤器按钮，会弹出很多项选择项，它是 用来设置元件管理区域的显示情况，默认勾选了 3个选项。
P“ 1 X
4。....110Q .一 I , 一「岬
• 至部元件
加面板
母版
动态面板或母板
具有名褥 具有脚注
• 显示或总藏
砺 百顶层至底层排序 底层至I页诩序
元件过滤器
（9）勾选“母版”选项，会发现刚才显示的动态面板被隐藏起来；单击勾选“动态面板”选项,
元件管理区域就会把动态面板的内容显示需来。该元件过源器可以根据自己的需求，来设置显示什 么、不显示什么。
1 小。
小虎98分

只显示母版
(10)放大镜按钮可以进行检索操作。
100
小虎98分
300
400

400
100
200
300
8
收缩、隐藏动态面板
回
\
隐竭态面板
目 P«9»l
»题TR作业本
收缩动态面板
元件检索
(II)可以把动态面板的状态收缩起来，也可以展现出来。还可以把动态面板从视图中隐藏起 来，在设计的时候，也经常会用到此功能，如图4.32所示。
51H
4.2动态面板的常用功能
动态面板有8个常用的功能：动态面板的显示与隐藏效果、动态面板的调整大小以适合内容、 动态面板的滚动栏设置、动态面板的固定到浏览器、100%宽度、从动态面板脱离、转换为母版、转 换为动态面板，这些常用功能是制作原型过程中不可缺少的8个功能。
4.2.1 动态面板的显示与隐藏效果
动态面板的显示与隐藏效果：通过动态面板的显示与隐藏效果的切换，完成动态的交互效果。
实战演练
（1）先保存当前工程，将Pagel页面重新命名为“动态面板的常用功能”，添加子页面并将其 命名为“显示与隐藏效果”。
x
丽Q0
，S初恋面板的常用功能0显示与隐藏效果
页面命名
（2）进入到“显示与隐藏效果”子页面，拖曳两个“按钮”元件到工作区域，将其分别命名为 “显示”和“隐藏”，拖曳一个动态面板元件，其名称为“显示与隐藏"，把Slaiel重新命名为“内 容”。

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

（3）编辑“内容”状态，拖曳一个“矩形1”元件，编辑其文本内容为“我是显示与隐藏效果 页面内容”，回到“显示与隐藏效果”页面。
▼日丽面方的堂用功总 E旦示与aca果王
Q+ （5 IDefault0
律，§：
r-]图4.35编辑动态面板状态内容
（4）选中“显示”按钮之后，在检视区域的交互面板里，为“显示”按钮设置“单击时，设置 可见性”触发事件。
（5）单击交互面板右下角的交互按钮，会弹出交互编辑器对话框，其中包括添加事件、添加动 作、组织动作、设置动作4个操作面板，对话框中每个面板的区域都划分得很清楚，4个操作面板 共同完成交互效果的设置交互按钮

交互按钮
x交互编辑器
《 60”,电皿箱献词在EQ
页画就入町・选舞交互始触r交互.
■□尺寸改知T■口源加
.口向上凄动的■口向下读动时
员面&区右击町 至ate就加页*•掖下町
日遇应视出交互编辑器对话框
(6)在添加动作面板中，单击显示/隐藏选项，在组织动作面板里可以看到新增的动作。在添 加动作面板里可以新增多个动作，当有多个动作时，它是按顺序执行的，从上向下依次执行，鼠标 右键单击动作可以调整动作的顺序以及删除动作，下面选择动态面板的显示与隐藏元件。
电娱动作X交互编陵器x

设剧B片设H送中
设羞列裳选手项 启用篌用徐幼
百 设■尺寸 置于陪防
我取焦三单击显示与隐藏动作
(7)在设置动作面板里可以配置动作，单击“显示”单项选择按钮，制作过PPT演示文档的都知 道，PPT演示文档里某个文字或者某个图片可以设置淡入淡出或者其他各种效果，在这里也可以设 置动画效果，在动画下拉列表选择“逐渐”效果，时间选择500亳秒。

Q显示与隐荻效果<■今 C ① 127.0.0.1:32767/s- ft] ☆© ：
Local Preview
我是显示与题载改果页面内容
发布原型
4.2.2 动态面板的调整大小以适合内容
Axure会根据内容的大小而进行自动调整动态面板的大小，从而让内容完全显示出来。
实战演练
（1）新建页面并重命名为“调整大小以适合内容”，翻开该页面，拖曳一个“动态面板”元件 到工作区域。
Default
3^3
新增页面与动态面板
页面
▼回艇面忸的常用功能
臼显示与幽■累
目©整大小以适合内容

（2）双击动态面板，将动态面板的名称命名为“调整大小以适合内容”。
动态面板和状态命名

(3)双击动态面板进入动态面板编辑区域，把Statel面板状态重新命名为“内容”，拖曳一个 “矩形1”到工作区域元件，文本内容为“我是动态面板的内容，超出动态面板的显示区域”，调 整矩形元件大小，使其超出显示区域。
编辑面板状态内容

(4)回到动态面板的页面，动态面板里的内容没有被完全显示出来，在动态面板上右键单击, 在弹出的快捷菜单中选择“自适应内容”命令，会发现超出动态面板的显示区域将会被显示起来， 动态面板的大小与状态里的内容大小一致。
没有完全显示出来
完全显示出来

动态面板的自适应内容的功能会根据状态里的内容调整动态面板的大小，不用担忧超出动态面
板的显示区域会被隐藏起来。
4.2.3 动态面板的滚动栏设置
动态面板的滚动栏设置是可以让动态面板出现横向滚动栏或者纵向滚动栏，这样可以让内容完 全展现出来。在安装软件的时候，软件经常要求用户同意软件许可协议，由于在安装页面无法完全 展示出协议的内容，通常会在窗口右侧或者下面设置滚动栏，可以在动态面板通过滚动栏设置可以 实现这样的效果。

制 。 I . 3 I

VMWARE最t?用户许可协议
器巍藉爵器皤超犒履.出现咻条布的本软件的使
怎一B下就、安装或使用本软件，S (自僧人或法 人)知网包接受本最终用户许可协议＜ -stbft- ＞条款的旧家・如果等不 向意本办或的条款•谓勿下效、安装或使用本软件.且您必笈*除本软花， 或在三+ (30)天内将来使用的本软件遇还始岱向买本收件的他(£南井目 要求退还念己为本软件支付的许可费(如果*)•安装协议
实战演练
(1)新建页面并将其命名为“滚动栏设置”，翻开此页面，拖曳一个“动态面板”元件到工作 区域，将其名称修改为“滚动栏设置”，状态命名为“内容”。
页H««Q日口
国显示与侬般课 回调!g大小以适合内容 S谖动栏iSB元件母板
Q+ & ：
DefaultC文，5文礴》水平线
页面和动态面板命名
(2)进入到“内容”状态里，拖曳一个“文本段落”元件到工作区域，调整文本段落元件的大 小。
图—010020038
港动栏设置 内容▼ 用曲e |关闭x

Lorem ipsum dolor sit amet, consectetuir adiptscing elrt. Aenean euismod bibendum laoreet： Proin gravida dolor sit amet lac us accumsan et vivena justo commodo Proin sodales pulvinar sic tempor Socns natoque penabbus et magnis dis partunent monies, nascetur ridiculus mus Nam fecmentum, nulla luctus pharetra vdputate. fdis tdlus mollis orci, sed rboncus pronin sapten nunc accuan eget.
编辑状态内容
（3）回到动态面板的页面里，右键单击动态面板，在弹出的快捷菜单中选择“滚动条”命令， 在子菜单里选择滚动条的显示方式，这里提供4种显示方式，从不滚动、按需滚动、垂直滚动以及 水平滚动，在这里选择按需滚动。

自动显示滚动条
（4）发布设计可以看到通过滚动条，文本内容能够显示完整。
lol叵)|区ID凝珑ISEx +
<--> C ① 127.0.0. l:32767/s- 甑x 三Local Preview 国 (T ：
Lorem ipsum dolor srt amet. consech eht Aenean euismod bibendum laore gravida dolor sit amet lac us accums< justo commodo Pran sod ales pulvin Sociis natoque penatibus el magnis( ▼
发布原型
动态面板的固定到浏览器小明的作业本 小刚的作业本 小虎的作业本

小明的作业本 小刚的作业本 小虎的作业本
►状态（State） 1二2A状态（State） 2
海面®-^状态（state） 3作业本和动态面板图标
下面就以学生作业本为例，来学习动态面板的使用。
4.1.1 创立动态面板并命名实战演练
页面
40c
g P*g<i
Default
100
200
300
⑴翻开Axurc RP 9软件，将工程保存并命名为“动态面板演示操作”，拖戋一个“动态面 板”到工作区域。

拖曳动态面板
（2）在检视区域的说明面板输入动态面板的名称“一摞作业本”，这样方便完成对动态面板元 件的查找。
叵PF1
Default
100
300
8
WB
一摞作业本
tit
动态面板名称
4.1.2 编辑动态面板状态实战演练
动态面板的固定到浏览器功能效果很常见。大家都有过这样的经历，在访问某个网站的时候， 网站内容很多，页面很长，但是某个区域一直在页面中显示，就像悬浮在页面。有的时候是右侧放 一个QQ头像，可以随时单击聊天，或者某个通知的消息一直悬浮，或者是一个向上的箭头或者向 下的箭头，通过单击箭头可以直接到达页面的顶部或者尾部。
实战演练
（1）新建页面并将其重命名为“固定到浏览器”，拖曳一个“矩形3”元件到工作区域，将其 文本内容命名为“我是顶部信息”，将矩形的X、丫坐标值设置为（0,0）,宽度设置为700。
X I EI 。c动态面板演示操作・AxureRP 9 Team Edition :已授权一 口
又停（… 胭指（… Wffi （•••工程” 布面«・ 左福呼人«・ 愚号（… 然助（…
SB
T
Q100%»0 -
M 共享
»
sift：
级：
D
:二包回q 0 n j厚/Q
-E动态面板的常用功能
0显示与鞫庙说课
：调生大小以造台内后
回滋丽£以
|回国定押M刑as母题
Default顶部信息
（2）再拖曳一个“矩形3”元件到工作区域，将其文本内容命名为“我是尾部信息”，它的X、 Y坐标值设置为（0,1000）,宽度设置为700。
尾部信息

（3）拖曳一个“动态面板”元件到工作区域，将其名称修改为“固定到浏览器”，修改状态名 称为“qq”，拖曳一个图片元件，插入一个企鹅qq的图片。
100皿刽MBS

编辑状态内容
(4)回到动态面板的页面，在动态面板上右健单击，在弹出的快捷菜单中选择“固定到浏览器” 命令，弹出“固定到浏览器”对话框，勾选“固定到浏览器窗口 ”复选框，分别单击“右侧”和“中 部”单项选择项设置横向固定的位置和纵向固定的位置，也可以设置边距，固定的位置可以根据实际需 求来选择。

设置固定到浏览器

(5)发布设计会发现页面随滚动条上下滚动，而企鹅的图标始终固定，此功能应用地也比拟多。
区 IDx +
<--> C © 127.0.0.1:32767 start. htaiaid=2aMd«p=S^^!K3Ac=l '

ioomM x B0MBS x
编辑状态内容
发布原型
4.2.5 100% 宽度
100%宽度，当设置的状态内容超出动态面板显示的区域，超出的内容将不会被显示出来，但是 当设置100%宽度时，超出的内容也会被显示出来。
实战演练
（1）新增一个页面，将其命名“100%宽度”，拖曳一个“动态面板”元件到工作区域，将其 输入面板的名称为“100%宽度”，将状态命名为“内容”，进入到状态的编辑页面，拖曳一个“矩 形1”元件，文本内容命名为“我是矩形元件，我的宽度超出动态面板的显示区域”。
出面eeQQ
，u动态面板的常用功娄a显示与哈媒
H曙整大”31造台内客@濡动栏设a
回I H ioo%»g?
元”母版Q+ & 3
Default」国M@
列一复8触步钮
（2）回到动态面板的页面，会看到超出显示的区域没有被显示出来，右键单击动态面板，在弹 出的快捷菜单中选择“100%宽度（仅限浏览器中）”命令，设置完后，没有任何变化，是因为该效 果只能在浏览器中显示。
QB d °：
▼国动态直板的常用功能巨显示与蒯8效果
叵调整大小以适合内容I一
E季初栏设置E国定到浏isas
叵100%宽度
8 元件母版Q+ & -
Default
艮 国自 ◎;
b 度 x emeiEss x ■_▼
l , I …… log 「I ,200 一 I 一 [300, I , .400
设置100%宽度
(3)发布原型看到矩形1元件的内容在宽度方面上被完全显示出来，但是在高度上还没有完全 显示出来，因为100%宽度选项只针对宽度起作用。
lol回I区ID嘤度x +
<" J C ① 127.0.0. l:32767/start. ht- 瓯 ☆。：
我是定形元件.我的宽度超之动否面板的显示区域发布原型
从动态面板脱离
从动态面板脱离，是将动态面板的状态内容变为普通的元件，同时此状态会在动态面板里消失。
实战演练
(1)新增一个页面，将其重新命名为“从动态面板脱离”，翻开此页面，拖曳一个“动态面板” 元件到工作区域，将其输入名称修改我“从动态面板脱离”，新增两个状态，分别命名为“我是状 态一”“我是状态二"。
新增页面和动态面板
（2）进入到“我是状态一”状态里，拖曳一个“矩形3”元件到工作区域，将其文本内容命名 为“我是状态一的内容”。
snwQ0 C]
■ E动态.田的，用功就&]匿示与每觥E
5调婺大小以适台内容团潼动栏设置
0豌胸笈b回 ioo%agr 5从初市麴CMS
元就呼屐Q+ 4 i
Default0基率元轿.
□ ■端1哂喇
编辑状态一内容
（3）进入到“我是状态二”状态，拖曳一个“矩形3”元件到工作区域，将其文本内容命名为 “我是状态二的内容”。
0 0• g加创■钮e电see 叵旻示与ZEX果 回 OtSX 小38W10 回潮旌设・ 叵 回 loahMt E M曲芯mA
元代母看+ O I
DefaultC口 ■■
* *编辑状态二内容
（4）回到动态面板页面，右键单击，在弹出的快捷菜单中“从首个状态脱离”命令，状态一就 会变为普通的矩形元件，同时动态面板显示状态二的。

m状态一脱离动态面板

当想独立出动态面板的状态时，可以使用此功能“转换为母版
动态面板可以转换为母版，母版也就是可重用的元件，例如可以把每个页面都需要的导航菜单 制作成母版，其他页面就可以直接引用母版，而不需要重新去做导航菜单。
4.2.7 转换为动态面板
动态面板的状态可以脱离动态面板，转换为普通的元件，当然普通的元件或者某个页面的内容 也可以转换为动态面板。选中要转换的元件，在元件上右键单击，在弹出的菜单中选择“转换为动 态面板”选项，就可以把这些元件转换为动态面板，从而实现普通元件和动态面板的相互转换。
4.3实战一一淘宝登录页签的切换效果
淘宝的登录方式有两种，一种是快速登录，通过扫描二维码的方式进行登录，另一种是通过账 户密码登录的方式进行登录，接卜.来要制作这两个页签的切换效果，从而制作一版淘宝登录的低保 真原型。
快速登录
账户密码登录
回
手机扫码平安登录
使用手机淘宝，阿里浅盾扫描二维码
账号密码登录
快速登录
登录页签标题设计
(1)拖曳一个“动态面板”元件到工作区域，将其宽度设置为314,高度设置为332,输入动 态面板名称为“登录方式”，需要两种状态，一种是“快速登录”，另一种是“账户密码登录”。
新建动态面板

(2)进入到“快速登录”状态里,
拖曳一个“矩形I”元件到工作区域，将其宽度设置为314,高度设置为332,矩形边框设置为灰色(#CCCCCC),线宽下拉列表中选择第2个选项。

设置背景边框
（3）拖戋两个“标题2”元件到工作区域，分别命名为“快速登录”“账户密码登录”，字号 设置为18号字，账户密码登录状态的字体颜色设置为灰色（#999999）,以区分当前选中的页签。
s«
设置登录标题
（4）拖曳一个“横线”元件到工作区域，将其置于矩形边框的最上方，宽度设置为314,调整 横线线宽。

设置上边线
（5）拖曳一个“水平线”元件到工作区域，将其置于快速登录标题的下方，调整水平线的位置 和宽度，将颜色设置为黑色（#333333）,再拖曳一个水平线元件，置于“账号密码登录”文字的下 方，同样调整位置和宽度，将其颜色设置为灰色（#CCCCCC）,做一个区分。
快21!白录即空小白号标题下划线
（6）选中“快速登录”状态的所有内容并进行复制，将其粘贴到“用户密码登录”状态里，将 “账户密码登录”文字及其下划线设置为黑色（#333333）,将“快速登录”文字的颜色设置为灰色 （#999999），其下划线设置为灰色（#CCCCCC） <.

账号密码登录标题设计
4.3.1 快速登录页面设计
（1）进入到“快速登录”状态里进行编辑，快速登录是采用扫描二维码的方式进行登录，因此 拖曳一个，，图片，，元件到工作区域，用于代替二维码，将它的宽度和高度都设置为110。
• > RJ« ：•： I JOT x
设置二维码
（2）拖曳一个“文本标签”元件到工作区域，其置于二维码下方，文本内容命名为“手机扫码 平安登录"，字号为15号字，加粗，字体颜色设置为灰色（#999999）。

手机扫码平安登录
（3）拖曳一个“文本标签”元件到工作区域，输入文本内容为“使用手机淘宝，阿里钱盾扫描 二维码”，颜色设置为灰色（#999999）。

(1)双击动态面板，弹出动态面板编辑框，它默认提供一种状态Slate I (State为动态面板默认 的状态名称)，就像一摞作业本里至少有一个作业本，一个动态面板至少有一种状态。

动态面板名称
(2)单击Statel状态，弹出动态面板状态管理对话框，在这里可以添加动态面板状态、复制面 板状态以及删除面板状态。

动态面板状态管理

(3)单击添加状态选项，可以新增一个动态面板的状态，单击相应状态名称就可以对状态重新 命名，把两个状态分别命名为“小明的作业本”和“小刚的作业本”。

使用手机淘宝
这样“快速登录”页面就设计完成，在此页面使用图片元件代替二维码的显示，用户可以通过 扫码登录，页面内容相对简单。
4.3.2 账号密码登录页面设计
（1）对•“账号密码登录”页面首先设计用户名和密码的输入框，它的输入框由两局部组成，一 局部是图标，分别代表用户名和密码，另一局部就是用户名和密码的输入框，拖曳一个“矩形1” 元件到工作区域，将其宽度设置为220,高度设置为37,边框设置为灰色（#CCCCCC）,作为用户 名的输入框。

用户名输入边框
（2）拖曳一个“图片”元件到工作区域，将其作为用户名的图标，把它的宽度设置为36,高 度设置为35,拖曳一个“文本框”元件到工作区域，将其宽度设置为180,高度设置为30。

用户名输入框和图标
（3）用户名输入框里输入提示信息“手机号/会员名/邮箱”，在检视区域里，选择交互面板， 在类型下拉列表中选择“文本”类型，提示文本框中输入“手机号/会员名/邮箱”，隐藏提示下拉列 表中选择“输入”样式，设置字体颜色为灰色（#999999）,并且把边框隐藏起来。
No<mai • 13 • A 城无：口■ 曲：色_・三£»
用户名输入框提示信息
(4)选中用户名输入框的边框、图标以及文本输入框，按住Clrl键向下拖曳，复制，作为密码 的输入框。

密码输入框
(5)将密码输入框的类型设置为“密码”类型，这样可以保护密码的平安，修改提示文本为“请输入密码”。

去掉密码输入框里的提示信息
（6）拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“忘记登录密码？ ”和 “免费注册”，将它们的标签分别命名为“忘记密码”和“免费注册”。

忘记密码与免费注册
（7）接下来是一个登录按钮，拖曳一个“按钮”元件到工作区域，将其的宽度设置为220,高 度设置为38,文本内容重新命名为“登录”。

登录按钮
（8）拖曳一个“图片”元件到工作区域，将其作为微博的图标，把它的宽度设置为17、高度 设置为17,拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“微博登录”，标签命名 为“微博”。

微博登录
（9）拖戋一个“图片”元件到工作区域，将其作为支付宝登录的图标，把它的宽度设置为17、 高度设置为17,拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“支付宝登录”，标 签命名为“支付宝”。

支付宝登录
这样完成“账号密码登录”页面的设计，包括输入框的设计、登录按钮的设计、忘记密码、免 费注册以及其他登录方式的设计，页面内容比拟多，相对复杂。
4.3.3 页签交互效果设置
回到登录页面，现在看到的是快速登录的页面，那么想看到账户密码登录的页面怎么办？如何 实现它们之间的相互切换呢？
（1）需要在这两个标题上分别触发事件，使用热区元件，它可以为标题提供一个锚点，拖曳一 个“热区”元件到工作区域，调整其大小。
0快速置录。瓶户窿码置最

手机扫码平安登录
.阿里雄码
图4. 85添加快速登录热区
（2）为热区元件添加鼠标单击时的触发事件，在添加动作面板中单击“设置面板状态”选项, 勾选“登录方式”复选项，在设置动作面板的状态下拉列表中选择“快速登录”。
迪郎设餐机
予人* None.
None0
・32・
匚如果BMC那么翌示
匚ft动和控动元件
手机扫码平安登录
宝,阿里 ffistsffl 二岬
% *30"/"S组4
翻开命接假女打利维
不动i阮件酝Z
| 0*就隹状态|曲理片
金・弁衰日中或E用浜用
移动W4
设置尺寸量子威力U2
没黄不透明征取■点
快速登录热区添加触发事件
(3)再拖曳一个“热区”元件到工作区域，调整其大小，将其放置在“账户密码登录”元件的 上方。
快速登录减户密码登录
账户密码登录热区
(4)给热区添加鼠标单击时的触发事件，在添加动作面板单击“设置面板状态”选项，勾选“登 录方式”复选项，在设置动作面板的状态下拉列表中选择“账户密码登录”。
X交互担辐宫Q 3UB*«
«9a打刑第
0口dxe翻开曲
♦sw元隹F示Z
ft助女列甄户访爱量笈位代在
红所
中设WE中项
g用♦用sm
・Tgy0・不港幽 aww

(5)按F5键发布原型,

账户密码登录热区添加触发事件 单击“快速登录”和“账户密码登录”这两个页签，可以实现两个页
面内容的切换效果。

lo|@l 8 T
小结
状态和命名状态。
(2)学会动态面板的常用功能，理解它们的含义以及它们使用的场景。

G，。① 127.0.0. l:3?767/ttart.ht- 匐* O O发布原型
(1)学会动态面板的使用，如何创立动态面板、命名动态面板、创立动态面板的
(3)学会制作淘宝登录页签的切换效果，进一步深化动态面板的使用。
练习
互切换，动态地显示页面内容。
完成京东商城注册表单页签切换效果，实现个人用户与企业用户两个页签可以相
,朋名：
•附手桃:
•运徽证码，♦妫证码,
个人用户KPHlte-56
miemaocnai Customers牝己牧江8b氯在就受紧E3»
《日》手机快速注册中国大矮手“用户・
tMJEd” JD”创造N，

♦不支？ *-蛛S 妇。并网包 ＞：亨率用户名明
立即注掰京东注册表单

新增动态面板状态
（4）对于已经创立的动态面板，可以单击“重复状态”按钮，来复制动态面板的状态。如果两 个状态内容相差不是很多，可以先复制出一个状态，在复制出的状态的基础上进行修改。与小虎知 道小刚学习好，每次做作业都会借小刚的作业本来抄是一个道理。

复制动态面板状态

（5）动态面板状态显示顺序操作，可以通过选中要移动的动态面板状态，按住鼠标左键向上拖 动。如果老师想看小刚的作业本，使用该操作就可以把小刚的作业本状态向上移动，一直移动到第 一层。

向上移动操作

（6）按住鼠标左键也可以向下移动动态面板状态，如果小明同学的作业做得很不好，老师很生 气，要把它放在最下面，这时候可以使用下移操作，一把小明的作业本移动到最下层。
向下移动操作
（7）如何编辑状态来修改作业本里的内容呢，虚线白色的区域就是用来当前状态的内容。
编辑状态

（8）在编辑状态区域，可以对动态面板进行状态内容编辑，虚线框的白色区域代表内容的显示 区域，在虚线框里的内容可以显示出来，超出该区域范围的内容将被隘藏起来，先添加一个不超出 显示区域的内容，拖曳一个“矩形1”元件，将文本内容重新命名为“小刚90分”。
B □ °
E PeelQ0O
耐
+ <5» !-Default- H ?/J'*90^°
I——I〜0QO**, 恻？ । ]完全显示出来
拖曳“矩形I”元件
完全显示出来
（9）双击“一摞作业本”动态面板，翻开状态管理对话框，单击“小虎的作业本”状态，拖曳 一个“矩形”元件到工作区域，将矩形框放置在页面右下角，局部内容超出虚线框显示区域，文本 内容重新命名为“小虎98分”。
编辑“小虎的作业本”状态
拖曳矩形1元件

(10)回到动态面板所在页面，页面显示的仍然是小刚的分数。
小刚的分数

(11)双击“一摞作业本”动态面板元件，选中小刚的作业本，按住鼠标左键将它移动到第一 层，会发现这次显示的是小虎的作业本的内容，并且超出显示区域的内容，没有被显示出来。
没有完全显示出来
(12)选中“一摞作业本”动态面板，通过拖曳的方式，调整动态面板的大小，让内容完全显 示出来。

完全显示出来
（13）不用的状态可以删除掉，选中要删除的状态，出现删除状态图标，单击“删除状态”图 标，就可以把该状态删除掉。

删除状态
通过页面概要区域管理动态面板实战演练
71一细心的人会发现页面概要区域发生了变化,页面概要区域显示的是之前设计的动态面板元 件以及元件的各个状态，在AxureRP8版本，该区域被放在右侧区域，而Axure RP 9版本将其放在 左侧。
m 4由
，c Mei
D i
D
D ”3
AxureRP8页面概要区域
X I 8 O 〜 动态面板演示操作-AxureRP 9 Team Edition：己授权 一 口
文件（…>ssa（■•■视se”弱目（… 而局（…发布・• 加大” 嫌皆（… 然助（…::同回％ 国,口》■■较
C p.m对Qfttfi »»

::同回％ 国,口》■■较
C p.m对Qfttfi »»
SK： 口 M：
回
▼ S-a作业本
» 二小虎的作业本
□ d'«98»
o，hl»9⑸
匚，Nfl捌利注
小虎98分

AxureRP9页面概要区域
下面详细介绍Axure RP 9页面概要区域的使用方法。
回：代表当前页面，在该页面里可以添加各种元件以及为元件添加交互操作。
：代表动态面板元件，在该元件里添加各种状态。
L..J：代表动态面板元件下的各种状态。
（2）在Axure RP 9版本，该区域被称为页面概要区域，在页面概要区域可以对所有的元件进 行管理，动态面板很多神奇的功能也被赋予给其他元件，其他元件也可以实现动态的效果。但是使 用比拟多的还是动态面板元件，通过动态面板元件可以制作出丰富的交互效果。
（3）如果想为动态面板添加一个状态，可以在动态面板的状态上，单击添加状态按钮，可以给 动态面板元件新增一个状态。
目 Pagel
▼❷一摞作业本
▼ □小dtmut 本
|添加状态］
UI小SJ90
门小船的作业本
小虎98分
添加状态

(4)还可以复制状态，单击小刚的作业本状态右侧的重复状态按钮，复制出•个新的状态，双 击将其命名为“小红的作业本”，它的状态内容与小刚的作业本的内容是一样的。
目 P«oe 1
▼ 6T作业^
▼匚小虎的作U本
，匚小刚的作叱本
。小明90分
匚,小明的作业本

目 P«oe 1
▼ 6T作业^
▼匚小虎的作U本
，匚小刚的作叱本
。小明90分
匚,小明的作业本
d'»90^

复制状态
nia us
Q%回Pwi
▼ 6 T8作业本回，匚W渡的作业本
口小唐98分,□ “硼的作业本
C3dM»90^卜匚:，NI65他历
nhffl9g匚卜J丽的作业本
重新命名小红的作业本状态
(5)在页面概要区域单击动态面板的状态就可以翻开状态进入其编辑页面，单击动态面板，弹 出动态面板动态管理的对话框，单击放置动态面板元件的页面，就可以进入到相应页面。
(6)在页面概要区域可以调整动态面板状态的顺序关系，通过按住鼠标左键向上或者向下拖动,