互联网＋职业技能系列AxureRP原型设计图解微课视频教程第4章用Axure动态面板制作动态效果动态面板元件是一个动态的、由面板
组成的元件。它可以让原型呈现动态的效果，而不是那种毫无生气的静态页面，它还能实现软件的高级交互效果。动态面板元件是Axure模拟
很多动态效果的主要工具，如要模拟淘宝的广告轮播，可以将几张图摞在一起，轮流放在最上面来显示，单击一个圈，就将对应的图放到最上面，如
图4.1所示。图4.1动态面板模拟海报轮播效果本章案例：淘宝登录页签的切换效果，两张图摞在一起，单击“账户密码登录”将图4.
2放在最上面显示，单击“快速登录”将图4.3放在最上面显示，即可模拟淘宝登录页签的切换效果。这就是动态面板模拟交互效果的基本原理。
图4.2账号密码登录图4.3快速登录4.1?动态面
板的使用4.2?动态面板的常用功能4.3?实战——淘宝登录页签的切换效果4.4?小结4.1?动态面板的使用动态面板元件是怎么实
现动态效果的呢？动态面板元件里包含多种状态，可以把动态面板理解为装载这些状态的容器。我们在上学的时候，经常把作业本摞成一摞，所以
只能看到最上面一本的封面。这一摞作业本就是动态面板，每本作业就是动态面板中的一个状态，只有最上面的一个状态是可见的，其他状态都是隐
藏的，如图4.4所示。动态面板的图标很形象地描绘出了动态面板元件的功能。图4.4作业本和动态面板图标下面就以学生作业本为例，来
学习动态面板的使用。4.1.1创建动态面板并命名1.打开AxureRP8软件，将工程保存起来，命名为“动态面板演示操作”，
拖曳一个动态面板到工作区域，如图4.5所示。2.双击动态面板，可以打开“动态面板状态管理”对话框，输入动态面板的名称“一摞作业本”
，下面就是面板的状态，默认一种状态，就像一摞作业本里至少有一个作业本，一个动态面板至少有一种状态，如图4.6所示。图4.5拖曳
动态面板图4.6动态面板名称4.1.2编辑动态面板状态1.代表新增一个动态面板的状态。单击它就可以对状态的重新命名，将
状态分别命名为小明的作业本、小刚的作业本，如图4.7所示。2.代表复制动态面板的状态。如果两个状态内容差不多，想在上一个状态内
容的基础上进行修改，我们可以先复制出一个状态。小虎知道小刚学习好，每次做作业都会借小刚的作业本来抄，如图4.8所示。图4.7新
增动态面板状态图4.8复制动态面板状态图4.9向上移动操作3.代表动态面板状态的上移操作。如果老师想看小刚的作业本，使用
这个操作就可以将这个状态向上移动，一直可以移动到第一层，如图4.9所示。4. 代表动态面板状态的下移操作。小明同学的作业做得很
不好，老师很生气，要把它放在最下面，这时候可以使用下移这个操作，一直可以移动到最下面，如图4.10所示。5.如何编辑状态来修改作业
本里的内容呢？有两个按钮可以进行状态的编辑：一个是编辑状态，可以编辑选中的状态；一个是编辑全部状态，可以打开所有要编辑的状态页面，
也可以双击要编辑的状态，进入编辑状态的页面，如图4.11、图4.12所示。图4.10向下移动操作图4.12编辑全部状态图
4.11编辑状态6. 进入编辑状态之后，可以看到有蓝色的虚线框，它代表内容的显示区域，即在蓝色虚线框里的内容可以显示出来。超
出这个区域，将被隐藏起来。先添加一个不超出显示区域的内容，拖曳一个矩形1元件，文本内容重新命名为“小明90分”，如图4.13、图4
.14所示。图4.13拖曳矩形1元件图4.14完全显示出来7. 双击动态面板，打开对话框，编辑小刚的作业本的状态。这次
我们使用编辑全部状态，单击编辑全部状态，会发现所有的状态都会打开，找到小刚的作业本状态，同样拖曳一个矩形1元件，将部分内容超出显示
区域，文本内容重新命名为“小刚98分”，如图4.15、图4.16所示。图4.15编辑小刚的作业本状态图4.16拖曳矩形1
元件8. 回到动态面板所在页面，可以看到没有小刚的分数，仍然显示的是小明的分数，如图4.17所示。图4.17小明的分数9. 双
击动态面板元件，选中小刚的作业本，单击向上移动按钮，将它移动到第一个位置。单击确定按钮，会发现这次显示的是小刚的作业本的内容，并且
超出显示区域的内容，没有显示出来，如图4.18、图4.19所示。图4.19没有完全显示出来图4.18调整状态位置10.
选中动态面板，通过拖曳的方式，可以调整动态面板的大小，让内容完全显示出来，如图4.20所示。图4.20完全显示出来11.可
以删除一些不用的状态。双击动态面板元件，单击一个红色的叉号，删除选中的状态，如删除选中的小虎的作业本，如图4.21所示。图4.21
删除状态4.1.3通过页面概要区域管理动态面板细心的人会发现页面概要区域发生了变化，页面概要区域显示的是我们刚才设计的动
态面板元件及它的各个状态。在AxureRP7.0版本以前，这个区域被称为动态面板管理区域。动态面板是一个神奇的元件，可以制作
出各种交互效果，如图4.22所示。：代表当前页面，在这个页面里可以添加各种部件及给部件添加交互操作。：代表动态面板部件
，在这个部件下面可以添加各种状态。：代表动态面板部件下的各种状态。图4.22页面概要区域实战演练1.如果想给动态面板添加
一个状态，可以在动态面板的状态上，鼠标右键单击选择“添加状态”选项，给动态面板元件新增一个状态，如图4.23所示。图4.23添
加状态2.在鼠标右键选项里还有“复制状态”。选中要复制的状态，如小刚的作业本，复制出了一个新的状态，双击后将其命名为“小红的作业本
”，它的状态内容和小刚的作业本是一样的，如图4.24、图4.25所示。图4.24复制状态图4.25小红状态重新命名3.
在页面概要区域双击动态面板的状态就可以打开状态进入编辑页面。双击动态面板，弹出的“动态面板动态管理”对话框中，双击放置动态面板的
状态，也会进入相应编辑页面。4. 通过鼠标右键选项还可以调整状态的顺序关系，可以向上向下移动，动态面板的显示内容也会随之发生变化，
这样很方便我们调整状态内容的显示情况，如图4.26所示。图4.26调整状态顺序选中状态，单击删除按钮可以删除状态，用同样方法也
可以删除动态面板，如图4.27、图4.28所示。漏斗一样的按钮图标是元件过滤器。单击元件过滤器按钮，会弹出很多选项，用于设置元件管
理区域的显示情况，现在默认勾选了3个选项，如图4.29所示。图4.27删除状态图4.28删除动态面板图4.29元件
过滤器7.勾选只显示母版，会发现刚才显示的动态面板隐藏起来了，如图4.30所示。单击勾选只显示动态面板，元件管理区域就会将动态面板
的内容显示出来。这个元件过滤器使用起来很方便，可以根据自己的需求来设置。8.放大镜这个按钮图标大家都很熟悉了，是用来进行检索操作的
，如图4.31所示。图4.30只显示母版图4.31元件检索可以将动态面板的状态收缩、展现出来，我们还可以将动态面板从视图中
隐藏起来。在设计的时候，也经常会用到这个功能，如图4.32所示。图4.32收缩、隐藏动态面板这些就是动态面板和页面概要区域的基
本使用方法，学会和掌握动态面板的使用很重要。动态面板元件是使用很频繁的一个元件，也是制作交互效果用得最多的部件。4.1?动态面板
的使用4.2?动态面板的常用功能4.3?实战——淘宝登录页签的切换效果4.4?小结4.2动态面板的常用功能 动态面板元件是
制作交互效果的主力军，那么它到底可以实现哪些交互效果呢？动态面板有8个常用的功能：显示与隐藏、调整大小以适合内容、滚动栏设置、固定
到浏览器、100%宽度、从动态面板脱离、转换为母版、转换为动态面板。这些功能是制作原型过程中不可缺少的。4.2.1动态面板的显
示与隐藏效果先把当前工程保存起来，将index页面重新命名为“动态面板的常用功能”，page1页面重新命名为“显示与隐藏效果”，如
图4.33所示。进入“显示与隐藏效果”页面，拖曳两个提交按钮元件，将其分别命名为“显示”“隐藏”。拖曳一个动态面板元件，动态面板的
名称为“显示与隐藏”，将State1重新命名为“内容”，如图4.34所示。图4.33页面命名图4.34拖曳提交按钮和动态面
板元件3. 编辑“内容”状态，我们拖曳一个矩形1元件，输入文本内容为“我是显示与隐藏效果页面内容”，回到“显示与隐藏效果”页面，如
图4.35所示。4. 选中显示按钮之后，在检视区域的属性里，选择触发事件，鼠标单击时是一个触发事件，移动也是一个触发事件，给显示按
钮添加鼠标单击时触发事件，如图4.36所示。图4.35编辑动态面板状态内容图4.36添加鼠标单击时触发事件5. 在弹出的“
用例编辑器（鼠标单击时）”对话框中，可以看到有“添加动作”“组织动作”和“配置动作”。对话框每个步骤的区域都划分得很清楚，从添加动
作、组织动作到配置动作，就可以完成交互效果的设置，如图4.37所示。6.设置添加动作操作。在“添加动作”里单击“元件”的“显示/隐
藏”动作，在“配置动作”里可以看到我们新增的动作，也就是它可以管理多个动作。在“添加动作”里可以新增多个动作，当有多个动作时，它是
按顺序从上向下依次执行，单击鼠标右键，在弹出的选项中可以调整动作的顺序及删除动作，如图4.38所示。图4.37添加鼠标单击时触
发事件图4.38单击显示与隐藏动作7.配置动作。在“配置动作”里，勾选要显示的面板，在“可见性”一栏我们选择“显示”，在“动画
”一栏可以设置动画效果。在这里可以选择“逐渐”，时间选择“500毫秒”，如图4.39所示。图4.39配置动态面板显示动作8.选
中隐藏按钮，同样添加鼠标单击时触发事件，弹出用例编辑器对话框。在“添加动作”下面单击“显示/隐藏”操作，在“配置动作”下面勾选“显
示与隐藏（动态面板）”，“可见性”一栏选择“隐藏”单选按钮，“动画”一栏选择“向右滑动”效果，“时间”选500毫秒，单击确定按钮，
如图4.40所示。图4.40给隐藏按钮添加隐藏效果9. 按F5键发布看一下效果，先单击隐藏按钮将动态面板隐藏起来，可以看到它向
右滑动隐藏起来，再单击显示按钮，显示出动态面板的内容，就实现了动态面板内容的显示与隐藏效果，如图4.41所示。图4.41发布原
型动态面板的隐藏与显示效果，会使页面变得有生气，页面内容动起来，能给用户一种真实的体验。虽然制作的原型是同一种，但是让用户体验到
和使用真正软件一样的感受，这就是动态面板元件的强大之处。4.2.2动态面板的调整大小以适合内容1. 将page2页面命名为“调
整大小以适合内容”，打开这个页面，拖曳一个动态面板元件到工作区域，如图4.42所示。2. 双击动态面板，将动态面板命名为“调整大小
以适合内容”，状态的名称为“内容”，如图4.43所示。图4.42新增页面与动态面板图4.43动态面板和状态命名3. 拖曳一
个矩形1元件，文本内容为“我是动态面板的内容，超出动态面板的显示区域”，调整矩形元件大小，让它超出显示区域，如图4.44所示。图4
.44编辑面板状态内容4. 回到动态面板的页面，动态面板里的内容部分没有显示出来，在动态面板上单击鼠标右键，选择“自动调整为内
容尺寸”，会发现动态面板的大小调整了，完全显示了状态里的内容，如图4.45、图4.46所示。图4.45没有完全显示出来图4.4
6完全显示出来动态面板的调整大小以适合内容的这个功能不会浪费空间，跟着状态里的内容调整动态面板的大小，也不用担心超出动态面板的
显示区域会被隐藏起来的问题。4.2.3动态面板的滚动栏设置动态面板的滚动栏设置是可以让动态面板出现滚动栏，横向或者纵向拖动滚动
栏，可以让内容完全地展现出来。在安装软件的时候，经常会弹出软件安装许可协议，在安装页面无法完全展示出协议的内容，会发现在右侧或者下
面有滚动条，通过动态面板的滚动栏设置，同样可以实现这样的效果，如图4.47所示。图4.47安装协议实战演练1.将page3页面
命名为“滚动栏设置”，打开这个页面，拖曳一个动态面板元件，将其为“滚动栏设置”，状态命名为“内容”，如图4.48所示。2. 进入“
内容”状态里，拖曳一个文本段落元件到工作区域，调整一下文本段落元件的大小，如图4.49所示。图4.48页面和动态面板命名图4.
49编辑状态内容3. 回到动态面板的页面里，在动态面板上单击鼠标右键滚动栏里选择滚动条的显示方式，这里提供了4种显示方式：从不
显示滚动条、自动显示滚动条、自动显示垂直滚动条、自动显示水平滚动条。在这里选择自动显示滚动条，如图4.50所示。4. 发布看一下效
果，拖动滚动条，就可以完整显示文本内容，如图4.51所示。图4.51发布原型图4.50自动显示滚动条4.2.4动态面板
的固定到浏览器1. 新增一个页面，页面重新命名为“固定到浏览器”。拖曳一个矩形3元件，文本内容命名为“我是顶部信息”，它的x、y坐
标值设置为（0,0），宽度设置为700，如图4.52所示。图4.52顶部信息2. 再拖曳一个矩形3元件，文本内容命名为“我是尾
部信息”，它的x、y坐标值设置为（0,1000），宽度设置为700，如图4.53所示。图4.53尾部信息拖曳一个动态面板元件，
动态面板命名为“固定到浏览器”，状态命名为“qq”。拖曳一个图片元件到状态中，插入一个企鹅的图片，如图4.54所示。回到动态面板的
页面，在动态面板上单击鼠标右键在选项里选择“固定到浏览器”，勾选“固定到浏览器窗口”复选框，可以设置横向和纵向固定的位置，横向选择
“右侧矩形”，纵向选择“居中”，也可以设置边距，固定的位置可以根据实际需求来选择，如图4.55所示。图4.54编辑状态内容图4
.55设置固定到浏览器5. 发布看一下效果，会发现页面随滚动条上下滚动，而企鹅的图标始终固定在右侧里，随时可以单击，如图4.5
6所示。图4.56发布原型4.2.5100%宽度1.新增一个页面，命名为“100%宽度”。拖曳一个动态面板元件，输入面板的
名称为“100%宽度”，状态命名为“内容”，如图4.57所示。2. 进入状态的编辑页面，拖曳一个矩形1元件，文本内容命名为“我是矩
形元件，我的宽度超出动态面板的显示区域”，如图4.58所示。图4.57新增页面和动态面板图4.58编辑状态内容3.回到动态
面板的页面，会看到超出显示的区域没有显示出来，单击鼠标右键，选择“100%宽度”选项。设置完之后，没有任何变化，这个效果只能在浏览
器中看到效果，如图4.59所示。4.发布看一下效果，矩形1元件的内容在横向上被完全显示出来，但是在纵向上还没有完全显示出来，它只针
对宽度起作用，如图4.60所示。图4.59设置100%宽度图4.60发布原型4.2.6从动态面板脱离1.新增一个页面，
重新命名为“从动态面板脱离”。打开这个页面，拖曳一个动态面板元件，输入名称“从动态面板脱离”，新增两个状态，分别命名为“我是状态一
”“我是状态二”，如图4.61所示。2.进入“我是状态一”的状态里面，拖曳一个矩形3元件，文本内容命名为“我是状态一的内容”，如图
4.62所示。图4.61新增页面和动态面板图4.62编辑状态一内容3. 进入“我是状态二”的状态里面，拖曳一个矩形3元件，
文本内容命名为“我是状态二的内容”，如图4.63所示。4.回到动态面板页面，单击鼠标右键，选择“从首个状态中脱离”选项，状态一
就会变为普通的矩形元件，同时动态面板显示状态二的内容，如图4.64所示。图4.63编辑状态二内容图4.64状态一脱离动态面
板4.2.7转换为母版动态面板可以转换为母版。可以将母版理解为可重用的部件，如我们的导航菜单，就可以做成母版，其他页面就可以直接
引用，而不需要重新去做导航菜单了。母版的使用方法将在第6章中详细介绍。4.2.8转换为动态面板动态面板的状态可以脱离动态面板，
转换为普通的部件，也可以将普通的部件或者某个页面的内容转换为动态面板，只要选中要转换的部件，单击鼠标右键，选择“转换为动态面板”即
可。4.1?动态面板的使用4.2?动态面板的常用功能4.3?实战——淘宝登录页签的切换效果4.4?小结4.3实战——淘宝
登录页签的切换效果淘宝的登录页面，有两种登录方式，如图4.65、图4.66所示。一种是通过输入账户密码的方式，另一种是通过扫描二维
码的方式。接下来要制作这两个页签的切换效果，制作一版淘宝登录页签的低保真原型。图4.65快速登录图4.66账号密码登录4.
3.1登录页签标题设计拖曳一个动态面板元件，宽度设置为314，高度设置为332，输入动态面板名称为“登录方式”，设置两种状态，一
种是“快速登录”，另一种是“账户密码登录”，如图4.67所示。进入“快速登录”这个状态里，拖曳一个矩形元件，宽度设置为314，高度
设置为332，矩形边框设置为灰色（CCCCCC），线宽设置为第二个宽度，如图4.68所示。图4.67新建动态面板图4.68
设置背景边框拖曳两个标题2元件到工作区域，分别命名为“快速登录”和“账户密码登录”，字号设置为18号字，账户密码登录的字体颜色设置
为灰色（999999），以区分当前选中的页签，如图4.69所示。拖曳一个横线元件，放到矩形边框的最上方，宽度设置为314，调整一下
线宽，如图4.70所示。图4.70设置上边线图4.69设置登录标题6.选中“快速登录”这个页面的所有内容进行复制，粘贴到“
用户密码登录”这个状态里，将“账户密码登录”及它的下划线设置为黑色（333333），将“快速登录”的颜色设置为灰色（999999）
，它的下划线设置为灰色（CCCCCC），如图4.72所示。5.拖曳一个水平线元件，放到“快速登录”标题的下方，调整一下位置和宽度，
颜色设置为黑色（333333）。再拖曳一个水平线元件，放到“账号密码登录”标题的下方，同样需要调整一下位置和宽度，将它的颜色设置为
灰色（CCCCCC），作一个区分，如图4.71所示。图4.71标题下划线图4.72账号密码登录标题设计4.3.2快速登
录页面设计进入“快速登录”的状态里，拖曳一个图片元件来代替二维码，将它的宽度和高度都设置为110，如图4.73所示。在二维码下面还
有两行字，我们拖曳一个文本标签元件，文本内容命名为“手机扫码安全登录”，字号为15，加粗，字体颜色设置为灰色（999999），如图
4.74所示。拖曳一个文本标签元件，文本内容为“使用手机淘宝，阿里钱盾扫描二维码”，颜色设置为灰色（999999），如图4.75所
示。图4.73设置二维码图4.74手机扫码安全登录图4.75使用手机淘宝4.3.3账号密码登录页面设计1.先来
设计用户名和密码的输入框。输入框由两部分组成，一部分是图标，代表用户名和密码，另一部分就是输入用户名和密码的输入框。拖曳一个矩形1
元件，宽度设置为220，高度设置为37，边框设置为灰色（CCCCCC），作为用户名的输入边框，如图4.76所示。2.拖曳一个图片元
件，作为用户名的图标，宽度设置为36，高度设置为35，拖曳一个文本框元件，宽度设置为180，高度设置为30，如图4.77所示。图4
.76用户名输入边框图4.77用户名输入框和图标3.用户名输入框里有提示信息“手机号/会员名/邮箱”，在检视区域里选
择“属性”，“类型”选择“文本类型”，“提示文字”里输入“手机号/会员名/邮箱”，给提示文字设置一个样式，设置字体颜色为灰色（99
9999），并且将边框隐藏起来，如图4.78所示。图4.78用户名输入框提示信息4.选中用户名输入框的边框、图标及文本输入框，
按住Ctrl键向下拖曳，复制一份，作为密码的输入框，如图4.79所示。5.去掉密码输入框里的提示信息，文本输入框的边框要去掉，设置
一下密码输入框的属性，将它的类型设置为密码类型，这样可以保护密码的安全，如图4.80所示。图4.79密码输入框图4.80去
掉密码输入框里的提示信息拖曳两个文本标签元件，文本内容分别为“忘记登录密码？”和“免费注册”，将它们的标签分别命名为“忘记密码”和
“免费注册”，如图4.81所示。接下来是一个登录按钮。拖曳一个提交按钮，将它的宽度设置为220，高度设置为38，文本内容重新命名为
“登录”，如图4.82所示。图4.82登录按钮图4.81忘记密码与免费注册拖曳一个图片元件，作为微博的图标，宽度设置为17
、高度设置为17。拖曳一个文本标签元件，文本内容命名为“微博登录”，标签命名为“微博”，如图4.83所示。拖曳一个图片元件，作为支
付宝登录的图标，宽度设置为17、高度设置为17。拖曳一个文本标签元件，文本内容命名为“支付宝登录”，标签命名为“支付宝”，如图4.
84所示。图4.83微博登录图4.84支付宝登录4.3.4页签交互效果设置1.要在这两个标题上分别设置触发事件，使用图
像热区元件。拖曳一个图像热区元件，调整大小，如图4.85所示。2.设置一个鼠标单击时触发事件。在“添加动作”下面单击“设置面板状态”，在“配置动作”下面勾选登录方式的动态面板，选择动态面板的状态为“快速登录”，如图4.86所示。图4.85添加快速登录图像热区图4.86快速登录图像热区添加触发事件再拖曳一个图像热区元件，调整大小，放置在账户密码登录的上方，如图4.87所示。设置一个鼠标单击时触发事件，在“添加动作”下面单击“设置面板状态”，在“配置动作”下面勾选登录方式的动态面板，选择动态面板的状态为“账户密码登录”，如图4.88所示。按F5键发布看一下效果，单击“快速登录”和“账户密码登录”这两个页签，可以实现两个页面内容的切换效果，如图4.89所示。图4.87账户密码登录图像热区图4.88账户密码登录图像热区添加触发事件图4.89发布原型4.1?动态面板的使用4.2?动态面板的常用功能4.3?实战——淘宝登录页签的切换效果4.4?小结4.4小结 本章主要学习使用Axure的动态面板制作动态的交互效果，应当做到以下几点。（1）学会动态面板的使用，如何创建动态面板、动态面板的命名及创建动态面板的状态和状态的命名。 （2）学会动态面板的常用功能，理解他们的含义及他们使用的场景。（3）学会制作淘宝登录页签的切换效果，进一步深化理解动态面板的使用方法。 |
|
