AxureRP产品原型设计课件 第6章 动态面板

本章介绍：在AxureRP丰富的工具中，动态面板以独特的灵活性和强大的功能脱颖而出。它不仅是原型设计中的常用工具，更是实现丰富交互和动画的关键。本章对AxureRP的动态面板、动态面板的特殊属性以及动态面板的特殊交互进行系统讲解。通过对本章的学习，读者可以对AxureRP

的动态面板有一个全面的认识，并能快速掌握动态面板的使用技巧和用AI辅助制作动态面板的方法。第6章动态面板知识目标认识并熟悉AxureRP的动态面板掌握AxureRP动态面板的特殊属性掌握AxureRP动态面板的特殊交互能力目标具备使用AxureRP动态面板的能力具备使用AxureRP动态面板特殊属性和特殊交互的能力掌握用MasterGo制作轮播效果的方法素质目标培养规范使用AxureRP动态面板的习惯培养锐意进取、精益求精的工匠精神培养一定的设计创新能力和艺术审美能力6.1认识动态面板在AxureRP中，“动态面板”元件的功能非常强大，它可以将其他元件保存在称为“状态”的集合中。动态面板可以有一种或多种状态，并且一次只能看到其中一种状态。因此，使用“动态面板”元件可以实现丰富的动态效果。6.2使用动态面板“动态面板”元件是原型设计中用于实现交互和状态变化的关键工具。它通过模拟用户与界面元素之间的动态交互，帮助设计师和团队成员更直观地理解产品设计。课堂案例——为旅游出行App引导页创建动态面板创建动态面板并命名管理动态面板状态课堂案例——将家具电商平台树状侧导航转换为动态面板转换为动态面板6.2.1课堂案例——为旅游出行App引导页创建动态面板使用“动态面板”元件为页面添加动态面板，并复制当前动态面板状态以及重命名。效果图6.2.2创建动态面板并命名将“元件库”面板中的“动态面板”元件拖曳至画布即可创建动态面板。在“样式”面板中可以对其重命名。6.2.3管理动态面板状态1．在画布上在动态面板编辑模式下单击“State1”选项，在弹出的下拉列表中单击任意动态面板状态右侧的“重复状态”按钮，即可复制当前动态面板状态。单击“删除状态”按钮，即可删除对应的动态面板状态。单击底部的“添加状态”超链接，即可新建一个动态面板状态。6.2.3管理动态面板状态2．在“概要”面板中单击“概要”面板中动态面板状态后面的“重复状态”按钮，即可复制当前动态面板状态。选择一个动态面板状态，按Delete键即可将其删除，或右击动态面板状态，在弹出的菜单中选择“删除”命令。单击动态面板右侧的“添加状态”按钮即可为该动态面板添加状态。6.2.3管理动态面板状态3．从首个状态脱离右击画布上的“动态面板”元件，在弹出的菜单中选择“从首个状态脱离”命令，即可使该动态面板中的第一个状态脱离为独立状态，该状态中的元件以独立状态显示。6.2.4课堂案例——将家具电商平台树状侧导航转换为动态面板使用“转换为动态面板”命令将元件转换为动态面板。效果图6.2.5转换为动态面板除了以从“元件库”面板中拖曳元件的方式创建动态面板，还可以将页面中的任意对象直接转换为动态面板。右击要转换为动态面板的元件，在弹出的菜单中选择“转换为动态面板”命令，即可将元件转换为动态面板。6.3动态面板的特殊样式动态面板具有一些其他元件没有的特殊样式，如滚动方式、“自适应内容”、“100%宽度”以及“固定到浏览器”等。通过这些特殊样式，可以快速实现产品原型中的常用效果。滚动方式自适应内容课堂案例——将中式茶业官网海报设为100%宽度100%宽度课堂案例——固定家具电商App顶部6.3.6固定到浏览器6.3.1滚动方式通过调整动态面板的尺寸，使其比其状态面板中的内容更短或更窄，可让动态面板中的内容滚动。选中动态面板，单击“样式”面板“动态面板”选项组中的“从不滚动”，即可在弹出的下拉列表中选择滚动的方式。6.3.2自适应内容将动态面板设置为“自适应内容”，当在大小不同的状态之间切换或对包含的元件进行可见状态更改时，可使其宽度和高度依据包含的元件自动调整。选中动态面板，在“样式”面板的“动态面板”选项组中勾选“自适应内容”复选框，即可实现自动调整大小。6.3.3课堂案例——将中式茶业官网海报设为100%宽度使用“100％宽度（仅浏览器中有效）”复选框调整Web端海报宽度。效果图6.3.4100%宽度设置了100％宽度的动态面板可以使背景颜色或背景图片横向覆盖整个浏览器窗口。此属性仅调整动态面板本身的大小，其包含的元件不受影响。为动态面板的第一种状态设置背景颜色或背景图片后，在“样式”面板的“动态面板”选项组中勾选“100％宽度（仅浏览器中有效）”复选框，在Web浏览器中查看原型时，即可发现背景颜色或背景图片横向覆盖整个窗口。如果调整浏览器窗口的大小，动态面板的宽度及其背景也将自动调整。6.3.5课堂案例——固定家具电商App顶部使用“转换为动态面板”命令将元件转换为动态面板，使用“固定到浏览器”功能固定家具电商App顶部。效果图6.3.6固定到浏览器“固定到浏览器”功能会将动态面板固定在浏览器窗口的特定位置，即在页面滚动时它不会移动。使用此功能可以构建始终可见的导航栏等模块。6.4动态面板的特殊事件动态面板具有一些其他元件没有的特殊事件，如“尺寸改变时”“载入时”“状态改变时”“拖动时”以及“滚动时”等。通过这些特定的交互事件，可以创造出丰富的交互效果。尺寸改变时课堂案例——制作中式茶业官网的轮播效果载入时状态改变时课堂案例——制作企业招聘H5的拖动交互拖动事件滚动事件6.4.1尺寸改变时“尺寸改变时”事件常触发“设置尺寸”动作，用于在动态面板的尺寸发生变化时执行操作。将“元件库”面板中的“动态面板”元件拖曳至画布，单击“交互”面板中的“打开交互编辑器”按钮，在弹出的“交互编辑器”对话框中选择“尺寸改变时”事件，即可完成事件设置并触发相关动作。6.4.2课堂案例——制作中式茶业官网的轮播效果使用“100％宽度（仅浏览器中有效）”复选框将海报设为100%宽度，使用“填充”右侧的“图片”按钮为页面添加素材图片，使用“添加类似‘鼠标悬停’的交互样式”超链接为页面添加交互效果，使用“打开交互编辑器”按钮为页面添加“状态改变时”特殊事件。效果图6.4.3载入时“载入时”事件是指初始页面加载时自动触发的事件，有时会使用动态面板的“载入时”事件代替“页面载入时”事件。将“元件库”面板中的“动态面板”元件拖曳至画布，单击“交互”面板中的“打开交互编辑器”按钮，在弹出的“交互编辑器”对话框中选择“载入时”事件，即可完成事件设置并触发相关动作。6.4.4状态改变时“状态改变时”事件常触发“设置面板状态”动作，常用于需要不停改变面板状态的交互动作，如轮播图的循环播放。将“元件库”面板中的“动态面板”元件拖曳至画布，单击“交互”面板中的“打开交互编辑器”按钮，在弹出的“交互编辑器”对话框中选择“状态改变时”事件，即可完成事件设置并触发相关动作。6.4.5课堂案例——制作企业招聘H5的拖动交互使用“转换为动态面板”命令将元件转换为动态面板，使用“打开交互编辑器”按钮为页面添加拖动交互效果。效果图6.4.6拖动事件“拖动时”事件、“向左拖动结束时”事件、“向右拖动结束时”事件、“向上拖动结束时”事件以及“向下拖动结束时”事件用于实现不同的拖动交互效果。6.4.7滚动事件“滚动时”事件、“向上滚动时”事件、“向下滚动时”事件用于实现不同的滚动交互效果。6.5课堂练习——固定职业教育管理系统顶部导航栏使用“转换为动态面板”命令转换元件，使用“固定到浏览器”功能固定职业教育管理系统顶部导航栏。效果图6.6课后习题——制作美食外卖App引导页的拖动交互使用“动态面板”元件添加动态面板，使用“插入”按钮添加素材图片，使用基本元件绘制图形，使用“样式”面板设置元