Axure动态面板的使用

1、Axure 动态面板的使用简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态1、什么是 Axure 的动态面板按照 Axure 官方网站的解释：动态面板控件（DynamicPanel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状

2、态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。2、Axure 的动态面板可以用来做什么1）tab 式页签的切换效果：Axure 的官方给出的实例就是这个，AlipayUED 的同学按照官方给出的做法制作了一个 3tab 的原型，不愿看英文说明的同学可以直接参照这篇博客。2 ）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合 Axure 的默认组件中的垂直菜单”水平菜单”来实现，常用于导航的原型制作。3 ）鼠标触发式的浮窗效果：类似 Alt”的效果，常用于浏览提示和触发式广告。4）JS 的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。5）注册表单中的根据焦点判断提示的效

3、果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合 Axure 的逻辑条件和设置变量功能来实现。.andsoon3、如何使用 Axure 的动态面板1）动态面板属于 Axure 的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。2）在动态面板上点击右键编辑动态面板管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是 Uniabeled）、添加新的状态。当然，也可以在界面的右下角找到动态面板管理”模块来对动态面板进行操作。友情提

4、示：a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。c）为了不影响其他交互的制作，可以点击动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如 Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。Q監心|国血踽轴|一屈State?3）双击添加完的动态面板状态（Statel、2、），会在 Axure 的工作区打开一个新标签。现在，把这个新标签当作是一个全新的页面来设计就 OK 了，不过，记住不

5、要超过蓝色虚线外框。4）给动态面板添加交互。Axure5.5 中常用在动态面板上的交互行为包括：SetPanelstatetoState（设置动态面板的状态切换）、ShowPanel（显示动态面板）、HidePanel（隐藏动态面板）、ToggleVisibilityforPanel（切换动态面板可见属性）、MovePanel（移动动态面板到一个设定的位置（x*y）、BringPaneltoFront（将动态面板置于最前）。交互行为的添加与添加其他组件的交互一样，没有什么好解释和介绍的。5）生成 HTML 发布到 web 上、生成 CHM 分发给其他团队成员、建立 Axure 协作共享、.友情提示：a）使用 Axure 汉化版本会让你使用更轻松，虽然汉化的还不是非常完全，但是对于英文不好的同学来说已经是莫大的帮助了，向汉化的平生一笑同学致敬！b）如果看 Axure 官方的使用说明很费劲，可以参考目前陈良泳同学翻译的快速原型设计，翻译质量很不错！c）从 Axure5 开始，可以创建自己的组建库和导入别人做好的组建库了，官方提供了一套雅虎的组件，个人觉得已经完全够用了。d）模块和组件是 2 个完全不同的概念，模块的后缀是.rp 而组件的后缀是.rplib。模块和组件之间是可以相互转化的，你可以利用