文档介绍:Axure动态面板的使用
简单的说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态
1、 什么是Axure的动态面板
按照Axure官方网站的解释:动态面板控件(Dynamic Panel)可以让你实现高级的交互 功能,实现原
Axure动态面板的使用
简单的说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态
1、 什么是Axure的动态面板
按照Axure官方网站的解释:动态面板控件(Dynamic Panel)可以让你实现高级的交互 功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列 控件(你可以把一个状态理解成一个独立的页面)。任何时候都只有一个状态(页面)是可 见的,或整个动态面板可以被隐藏。结合交互动作,可以让动态面板的状态进行隐藏、显示 和改变。像添加其它控件一样,可以在控件面板中拖放动态面板控件到线框图中。
简单的说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的 每一个状态都可以看作是产生的一个新的交互结果。
2、 Axure的动态面板可以用来做什么
1) tab式页签的切换效果:Axure的官方给出的实例就是这个,AlipayUED的同学 按照官 方给出的做法制作了一个3tab的原型,不愿看英文说明的同学可以直接参照这篇博客。
2) 鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直 菜单”、“水平菜单”来实现,常用于导航的原型制作。
3) 鼠标触发式的浮窗效果:类似“Alt ”的效果,常用于浏览提示和触发式广告。
4) JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。
5) 注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写 规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级 设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
... .and so on...
3、 如何使用Axure的动态面板
1) 动态面板属于Axure的一个组件,在组件栏中选中它,直接拖到你希望它出现的位置。 不用担心,即使在添加完状态之后它的位置也是可以随时改变的。
2) 在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入 动态面板的标签名称(默认是Un labeled)、添加新的状态。当然,也可以在界面的右下角 找到“动态面板管理”模块来对动态面板进行操作。
友情提示:
a) 默认的动态面板的状态是显示(蓝色),我们可以把他设置成隐藏(黄色)。
b) 状态页面中的蓝色虚线外框表示动态面板的边界范围,超过这个边界范围外的内容在最 终生成原型时将不可见。
c) 为了不影响其他交互的制作,可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏
或显示之间切换。或者,你可以在顶部的页面名称(如Home)上点击鼠标右键,选择右键 菜单全部隐藏或全部显示,可以隐藏或显示页面中所有的动态面板。
3) 双击添加完的动态面板状态(Statel、2、…),会在Axure的工作区打开一个新标签。 现在,把这个新标签当作是一个全新的页面来设计就0K 了,不过,记住不要超过蓝色虚线 外框。
4) 给动态面板添加交互。