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

相关推荐

  • 007. 认识axure组件区域

    组件区域也叫做部件区域,英文为widgets,还有人称之为控件区域,组件是axure事先准备好的网站项目常用的零件,比如一些基本的页面元素 Axure默认存在2个组件库,分别为线框图和流程图。同时我们也可以自己去制作一…

    原型设计教程 2014-09-12
  • 设计师们值得一试的十款用户体验工具

    设计师们值得一试的十款用户体验工具

    2016-07-18
  • 如何用 Axure 制作类似的手机滑屏效果原型?

    不要太复杂: 1.设置2个动态面板 外面的是窗口 里面的是内容 图1:2个动态面板展示,记住这只是展示你不要放在一个层面上,应该是包含关系   图2:包含关系目录示意 2.设计交互事件   接下来看一下设计交…

    2015-07-21
  • 设计师们书签里的设计素材精品网站

    每每看到别人的好作品,作为设计小白的你,是不是两眼放光、垂涎三尺?[仰慕的意思*(~ ̄▽ ̄)~)] 仰慕归仰慕,想必你一定也和我一样,对他们的作品不仅仅是想欣赏而已,更多的是想学习一下他们是如何成功的。他们…

    2023-03-03
  • Mockplus原型交互跟我做之11–显示隐藏编辑背景

    在我们对弹出面板、抽屉、面板、滚动区等组件进行编辑时候,默认地,“外面”的编辑背景,会半透明地显示出来。 这对于编辑有好处,就是我们可以比较清楚地看到外面的情况,便于我们判断位置,放置组件,对齐组件等。…

    2016-07-14
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • Axure官方教程中文版第1课:开始-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/1_1280x720.MP4 新建文件 1、创建一个蓝色按钮 2、添加一个链接 3、发布我们的云托管服务,AXURE份额 4、在本地生成HTML文件

    2014-12-29
  • 如何做一个完全失败的UX设计师?

    人人都说,做一个成功的UX设计师是很难的,你认为做一个的完全失败的UX设计师就会很容易?然而事实并不是这样。如何成为一名彻底失败的UX设计师?至少,你需要做到以下几点。1. 不在乎用户反馈都说万事开头难,不过…

    2023-03-03
  • Mockplus原型交互跟我做之6 - 快速给弹出面板命名

    在交互设计中,我们经常需要给弹出面板起一个名字,便于查看。

    一般的方式,是在属性面板中,通过“名称”来修改。

    但是还有更快捷的方式,就是选中弹出面板,按下空格键,然后输入名字。请看视频:

    2016-02-18
  • 使用Axure制作App原型怎样设置尺寸?

    最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?
    若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。
    这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。

    2014-12-31