《软件原型设计与应用-基于Axure RP 8交互设计项目实践》课件_CORE-04.pptx

学习目标了解动态面板的属性、样式熟悉动态面板的创建掌握动态面板的常用功能具有能够熟练使用动态面板的能力

基本框架与界面效果

动态面板简介动态面板作为原型制作中最常用的组件之一，主要用来实现动态的交互效果。一个动态面板可以有多个状态，可以设置状态的增加、删除、显示及隐藏。一个动态面板就相当于一组状态的集合。

动态面板简介动态面板的创建动态面板的创建有两种方式。具体创建方式依照设计情况进行选择。第一种：选中“动态面板”元件，拖动到画布中，创建空白的动态面板。

动态面板简介动态面板的创建第二种：选中画布中任意一个元件，点击右键，选择“转换为动态面板”，生成有内容的动态面板。

动态面板简介动态面板的事件拖动时：是指因面板的点击、拖拽、释放所触发的事件状态改变时：是指因触发面板状态而产生的一系列交互的事件载入时：是指在页面初始加载动态面板时触发的事件滚动时：是指因动态面板滚动栏滚动所触发的事件调整尺寸时：是指因面板大小的改变而触发的事件

动态面板的样式及属性动态面板的样式在“检视”面板下的“样式”界面，可设置动态面板的“位置/尺寸”，“背景颜色”以及“背景图片”等样式。

动态面板的样式及属性动态面板的属性（1）自动调整为内容尺寸“自动调整为内容尺寸”属性是根据元件内容的尺寸，调整动态面板的大小，不需要添加滚动栏也可以完整的显示动态面板中的内容。（2）滚动条滚动条，即在不改变动态面板大小的情况下，能够通过上下滚动查看动态面板中的内容。（3）固定到浏览器固定到浏览器，可以将页面中的某一部分固定到浏览器中，不会随页面滑动而移动。

动态面板的使用显示与隐藏在原型测试过程中，往往会因为某些不正确操作，弹出一些提示性文字等。比如：用户进行登录时，在不填写用户名的情况下点击登录按钮，便会弹出“用户名不能为空”的提示标签。或当用户输入错误验证码时，便弹出“验证码错误”的提示标签。

动态面板的使用水平拖动在Axure中，“动态面板”是唯一可以使用拖动效果的元件，主要用于APP的产品原型设计，结合系统自带变量来实现面板被拖动时产生的一些效果。比如：手机的滑动解锁功能、手机页面的纵向浏览功能、调节音量大小功能等。

动态面板的使用滚动效果动态面板的滚动效果是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。比如：网站上的一些滚动文字的效果、点击登录按钮，登录面板的弹出收起效果等。

动态面板的使用多状态效果多状态管理是原型设计师常用的一种元件属性，被普遍应用于原型设计中。一个动态面板可以通过添加或复制创建多个面板状态，多个面板状态可用于实现图片轮播、图形转动、滑进滑出等效果，且在增强动态效果的同时，也减少了动态面板的数量。

任务总结本任务使用动态面板、热区以及触发事件等知识，实现了“滑动解锁”原型设计，在熟悉动态面板创建的同时，掌握动态面板常用功能的使用，以及触发事件的设置。对动态面板进行多状态管理时，要注意命名的规范。