《Axure RP 9网站与App产品交互设计实践》课件 6.Axure动态面板.pptx

回顾：交互三要素事件：交互的触发器，我们可以理解为“当……”。如，当鼠标单击某个按钮，当文本框获得焦点，等。动作：对事件的响应，即：交互触发后，发生了什么？如，显示元件、隐藏元件，打开链接页面，等。用例：动作发生的条件。如，只有注册表单信息不为空，才打开注册成功页面。

回顾：交互三要素事件动作用例1动作1动作2用例2动作

Axure动态面板技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理

案例引入

第六章Axure动态面板目标（1）知识目标：了解动态面板元件及状态的概念；理解动态面板元件及其状态的关系?。（2）能力目标：熟练掌握创建动态面板的方法；熟练掌握动态面板的常用事件和动作；（重点。中阶思维和能力）熟练掌握动态面板制作各种复杂的交互效果。（难点。高阶思维和能力）（3）素养目标：培养学生提出问题、分析问题、解决问题的能力；（高阶思维和能力）培养学生养成知识总结习惯；培养学生表达演示素养。

第六章Axure动态面板6.1AxureRP动态面板元件及状态6.2动态面板的事件和动作6.3利用动态面板实现图片自动轮播高阶思维和能力扩展：（1）分别添加左、右箭头（icon元件库中），当点击向左箭头图标时，图片向右滑动切换上一幅图；当点击向右箭头图标时，图片向左滑动切换下一幅图。（2）在动态面板上，鼠标左滑动时，图片向左滑动切换下一幅图；鼠标左滑动时，图片向右滑动切换上一幅图。

第六章Axure动态面板6.1AxureRP动态面板元件及状态动态面板有多个状态每个状态本身是一个页面任何时候一个动态面板只能显示一种状态第一个状态为默认状态通过设置面板状态来控制状态的显示顺序或隐藏/达成交互的效果动态面板

添加动态面板1.直接通过拖拽的方式从元件面板加入到画布中2.将页面中的元件或元件组转换成动态面板演示：在动态面板状态1中添加图片元件，或将图片转换成动态面板

动态面板状态管理（1）双击页面中的动态面板元件。进入到动态面板的第1个状态，在状态顶部菜单中执行【管理面板状态】命令。（2）在【概要】面板中,双击动态面板元件或者也右击它,从弹出的快捷菜单中执行【管理面板状态】命令。可以添加、删除、上移、下移、复制状态,或编辑状态内容等。演示：复制4个状态，分别添加不同的图片

6.2动态面板的事件和动作动态面板的事件【载入时】刚在网页中加载动态面板【状态改变时】指从一个状态切换到另一个状态。【拖动时】【拖动开始时】、【拖动结束时】如使用鼠标拖动动态面板完成诸如拼图的游戏等操作。【向左拖动结束时】、【向右拖动结束时】、【向上拖动结束时】和【向下拖动结束时】如滑屏动作

6.2动态面板的事件和动作动态面板的动作1.选择状态可以选择动态面板中的某个状态【下一项】显示下一个状态，还可以指定是否向后循环以及循环的间隔时间等。【上一项】显示上一个状态，还可以指定是否向前循环以及循环的间隔时间等。【停止循环】停止动态面板的状态循环。【值】将状态名或状态序列号作为指定的显示状态。2.进入和退出动画可以设置由一个状态进入另一个状态时的动画过渡效果。

第六章Axure动态面板事件用例动作动态面板“载入时”图片动态面板状态改变为“状态2”，动画：向左滑动动态面板“状态改变时”图片动态面板状态改变为“下一项”，“向后循环”，设置动画：向左滑动；重复间隔时间。6.3动态面板实现滑动图片轮播

第六章Axure动态面板6.3动态面板实现滑动图片轮播演示在图片下方，添加圆点动态面板；图片下方小圆点随着图片变化同步变化；（状态变化和时间间隔需要一致）事件用例动作单击圆点热区时图片动态面板状态随之改变

第六章Axure动态面板高阶思维和能力扩展：（1）分别添加左、右箭头（icon元件库中），当点击向左箭头图标时，图片向右滑动切换上一幅图；当点击向右箭头图标时，图片向左滑动切换下一幅图。（2）在动态面板上，鼠标左滑动结束时，面板向左滑动切换下一幅图；鼠标右滑动结束时，面板向右滑动切换上一幅图。事件用例动作图片动态面板“左滑动结束时”图片动态面板状态变为”下一项”图片动态面板“右滑动结束时”图片动态面板状态变为”上一项”

小结动态面板支持在同一个区域内放置多个状态的内容，选择显示其中一个状态的内容，不能同时显示多个状态。支持外部通过命令来切换动态面板的状态，面板的状态有先后顺序，支持正序和倒序变换。在状态变化时支持一些简单的过场动画。

谢谢观赏技术型文科人才系列课程新媒体产品设计与项目管理