Axure高级交互.pptVIP

Axure高级交互 --- Floxy Ye 纲要 动态面板Dynamic Panel 鼠标滑过交互 菜单 动态面板Dynamic Panel 概述 ?1. 动态面板演示????2. 动态面板组件????3. 编辑动态面板状态????4. 隐藏动态面板????5. Interactions 与动态面板????6. 使用示例 动态面板演示 新建工程； 在Widgets pane拖放Dynamic Panel和Button到Wireframe pane； 动态面板命名为Menu Panel； 双击面板，打开状态管理页面; 点击State 1，点击Rename，输入Menu，对状态重命名； 点击Edit State，在wireframe显示Menu状态编辑页面； 动态面板演示 拖放Rectangle组件到面板中； 通过Rectangle四周的位置点，拉长矩形； 双击Rectangle，在里面输入”Book \ Car \ Shoes” 动态面板演示 在wireframe pane点击Home页面，查看动态面板； 右键动态面板，选择Edit Dynamic Panel - Set Hidden，隐藏面板； 双击Button，输入”Click Me”； 动态面板演示 在Interactions pane点击Add case； 在Case属性的Step 2: Select Actions选择Toggle Visibility for Panel(s)； 在Step 3点击Panel蓝色链接，打开panel选项框； 动态面板演示 返回Axure RP，从Widgets pane拖放Dynamic Panel组件到wireframe； 通过动态面板四周的位置点，拉长面板； 在Annotations pane输入动态面板的标记Image Panel； 动态面板演示 双击动态面板； 在面板管理页面，把state 1重命名为Book，点击Ok。 在Add new state输入框输入Car，点击Add，添加新状态； 再输入Shoes，点击Add； 点击Edit All States，3个状态面板打开在wireframe中，可以对3个状态进行编辑； 动态面板演示 打开wireframe的Shoes面板页面； 从Widgets pane中拖放Image组件到面板中； 在面板双击Image组件，从本电脑中导入图片； 通过图片四周的位置点，调整图片位置。 同理，对Book和Car状态面板添加图片。 动态面板演示 在wireframe打开Menu动态面板的状态编辑页面； 从Widgets pane拖放Image Map Region组件到面板上； 移动、调整Map组件，让组件覆盖Book文字； 在Interactions pane点击Add case； 在Case属性Step 2: Select Actions选择Set Panel state(s) to state(s)； 在Step 3点击Panel state to state蓝色链接； 动态面板演示 在Set Panel state to state窗口的Step 1: Select Panels选择Image Panel； 在Step 2点击Book蓝色链接； 在Select Panel State窗口点击Book，点击OK。并且在两个上级窗口都点击OK； 同理，对Menu动态面板的Car和Shoes都添加Image MapRegion组件； 按F5生成原型； 在原型点击Click Me按钮，显示Menu动态面板； 在Menu面板点击Book、Car、Shoes，在面板右方显示相应图片。 动态面板组件 动态面板组件可以让你在原型中显示动态的功能。 动态面板包含一个或多个状态。 每个状态包含多个组件的集合。 任何时候，某个状态可以设为可见，也可以把整个动态面板设为隐藏。 在Interaction Actions，可以把面板隐藏、可见、更改面板状态。 像其他组件一样，动态面板可以从Widgets Panel拖放到wireframe pane中。 编辑动态面板状态 在wireframe，双击动态面板，打开动态面板状态管理的对话框。在此对话框，状态可以被添加、重命名、重新排序、去掉、编辑。第一个状态是面板的默认状态。 在动态面板状态管理选择面板状态，点击”Edit State”，打开wireframe进行面板状态的设计。一旦打开，面板的状态能像其他页面一样被设计。 Wireframe中面板状态的蓝色虚线表示面板的边界位置。 隐藏动态面板 动态面板可以设置默认为隐藏。在wireframe右键动态面板，选择E