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

相关推荐

  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • Axure教程:Axure控件大小调整小技巧

    转载请注明:Axure中文网 » Axure教程:Axure控件大小调整小技巧

    2015-01-01
  • Mockplus原型交互跟我做之7 - 拉长页面做滚动,并固定顶部和底部

    在Mockplus的App项目,你可以快速地拉长页面做滚动,并且固定顶部和底部。请看视频:

    2016-02-18
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • Justinmind 7.1.0 win&mac网盘下载

    自定义需求字段 如你所知,Justinmind企业版可以帮助你通过需求管理与所有设计团队打造智能商务解决方案。直到现在,你已经能够在你的原型中定义项目的要求。随着在Justinmind编辑的需求领域,用户已经可以定义需求…

    2016-04-13
  • 017. 单选按钮、复选按钮——axure线框图部件库介绍

    有时候发现这做事情坚持下来是一件很不容易的,写教程也一样,不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多,我就想想 在坚持坚持把基础部分先完善了! 1. 简单的问卷调查: 您的性别?  答案…

    2014-09-12
  • web产品设计规范

    新浪乐居常用交互控件的使用规则。 下载地址:web产品设计规范-新浪乐居

    原型设计教程 2014-10-28
  • axure元件下载:Axure 7.0 ios8元件库1.2最新版

    axure 元件下载 注意事项: 1、本元件库中的字体图标以及部分元件使用时,需要双击安装1.2版本的压缩包中的TFF字体文件,并重新启动Axure,否则拖进编辑区不能正常显示。 2、如果在本机演示原型,无需进行其他设置…

    2015-07-20
  • 干货:关于响应式布局

    【导读】响应式布局是在如今屏幕尺寸越来越多样化趋势下的解决之道,但是该如何去做响应式布局呢? 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型

    2015-03-19
  • 团队项目现已在Axure RP 9中提供

    团队项目现在可以在最新版本的Axure RP 9 beta中获得!请查看以下步骤以开始使用。 在RP 9中创建一个新的团队项目 转到文件>新团队项目或团队>从当前文件创建团队项目。 为团队项目命名。 为团队项目创建新工…

    2019-04-04