016. 动态面板——axure线框图部件库介绍

1、什么是Axure的动态面板

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

“动态面板组件式axure中功能最强大的部件,是一个化腐朽为神奇的组件。通过这个组件,我们可以实现很多其他原型软件不能实现的动态效果。”《网站蓝图axure

一直想把动态面板的内容,放在最后面才介绍,因为这个组件,在刚开始学习的时候,很难让人去理解。其实如果不考虑复杂的交互行为,这个动态面板不去搭理她,我们也能设计出满足我们需求的线框图,但是想交互更加完美就必须见识一下动态面板的魅力。

 2、Axure的动态面板可以用来做什么

1)tab式页签的切换效果:Axure的官方给出的实例就是这个
2)鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现,常用于导航的原型制作。
3)鼠标触发式的浮窗效果:类似“Alt”的效果,常用于浏览提示和触发式广告。
4)JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。
5)注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。

 3. 关于动态面板和其中状态的理解

其实动态面板,我们可以这样的去理解它,首先动态面板是一个大的容器,这个容器中可以有很多的状态,在每一个状态中,都可以放置一定的内容,然后我们通过事件来选择显示动态面板的相应状态

动态面板状态管理

在默认的状态下,只有位置一的内容是可见的,其他的是隐藏的,如果你想其他状态可见,只需要把这个状态移动到最上面

4. 现实中关于动态面板不同状态的应用案例

动态面板例子

 

以上摘取的使淘宝网2种不同登录方式的状态变化,使用动态面板就可以制作出来。

未完待续

(本文出自萧何)

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/335/

(0)
Smiler李想Smiler李想
上一篇 2014-09-12 13:09
下一篇 2014-09-12 13:19

相关推荐

  • 燕山大学UI-UE交互设计讲座

    交互设计视频教程-柯博文老师UI-UE交互设计讲座 柯博文老师在秦皇岛燕山大学讲座视频 文件太大,分成了5部分,这是第一部份

    原型设计教程 2015-01-07
  • Axure RP 8 BETA

    新一代的Axure 8.0 现在推出 beta版本   [button type="danger" text="官网下载beta版本" url="http://www.axure.com/beta" open_new_tab="true"] 快速下载地址: Win版下载地址:http://pan.baidu.com/s/1o6p…

    2015-08-13
  • JUSTINMIND权威指南:开篇-准备工作

    ​ 获取Justinmind安装包 Justinmind 分为免费版本、收费版本(30天试用)Pro版本。 官网提供免费版本可以下载,Pro收费版本不激活可以试用30天,30天过后会限制使用一些高级的功能组件,例如:动态面板(Dynamic Pan…

    2015-08-04
  • 019. 菜单组件——axure线框图部件库介绍

    软件类的教程,我写不出长篇大论,这里面的都是基础的操作,希望初学者,根据一个功能演示,可以自己测试其他功能菜单的效果! Axure自带的菜单组件,我几乎没有用到过,做菜单导航,我第一时间想到的还是矩形组件…

    2014-09-12
  • 『交互指南』即便你已经是一个交互设计师,这篇文章也值得一读,交互设计入门完全指南。

    准备好涉足交互设计了吗?在这篇文章中,作者对交互设计的各个方面做了简单介绍:包括历史、原则、知名设计师,以及他们的设计方法等等。即便你已经是一个交互设计师,这篇文章也值得一读。 相较于网页设计波澜不惊…

    2015-01-27
  • 009.图片组件——axure线框图部件库介绍

    我们在后面的组件使用中,都统一使用“从部件区域拖拽图片组件到页面区域中”   1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1.4 载入图片时会询问是进行优化。 1.5…

    2014-09-12
  • 【Mockplus教程】页面属性

    每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠标右击, 弹出菜单中选择“页面属性”一项,如下图:…

    Mockplus 2015-08-31
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 微信小程序的原型设计尝鲜

    "小程序”来了,大世界要变了?微信小程序可能是近期业绩最火的话题之一了。这个根植于微信流量巨无霸的应用,将对应用市场、对微商、电商、对企业的开发成本、获客成本将产生深远影响?将制造出绕开Google Play和Ap…

    2016-10-17
  • Axure教程:用Axure画出手绘效果的原型图

    前段时间跟大家介绍了一个软件Balsamiq Mockups,这是一个可以简单画出的手绘效果原型图的软件,操作也很简单!后来有朋友问我Axure可以画出手绘效果的原型图吗?答案的肯定的,只不过没有Balsamiq Mockups那么手绘,但是也可以改善一下Axure里总是横平竖直的视觉感受!

    2014-12-31