干货分享:使用Axure的动态面板做Tab

  相信学习产品经理的童鞋都知道,Axure是一个产品经理必备的专业快速原型设计工具,那么在Axure的使用中,怎么用动态面板做Tab呢?下面小编就为大家整理了一二,希望对你有帮助。

首先,我们先来看看Axure的动态面板可以用来做什么:

  1)tab式页签的切换效果:Axure的官方给出的实例就是这个

  2)鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现,常用于导航的原型制作。

  3)鼠标触发式的浮窗效果:类似“Alt”的效果,常用于浏览提示和触发式广告。

  4)JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。

  5)注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。

在用Axure的动态面板做Tab,主要需要通过以下几个步骤实现:

  1、拖动一个动态面板组件到页面编辑区域

  2、给动态面板添加2个状态:

  1)单击右键》编辑动态面板》管理面板状态

  2)点击加号按钮,可以不断的添加状态

  3)点击第二个红色的框,可以编辑该动态面板的所有状态

  3、在状态1页面拖动两个矩形组件

  4、设置点击切换

  1)选中状态1组件,弹出用例编辑器,

  2)选中【设置动态面板状态】

  3)选中对应状态(状态1)

  5、复制该动态面板的矩形组件到状态2,完成tab的制作。

推荐学习:产品经理实战教程

时间: 2024-08-01 16:23:55

干货分享:使用Axure的动态面板做Tab的相关文章

Axure创建动态面板注意事项

一.Axure签出的时候需要Check out 二. Axure签入的时候需要先SendChanges 然后再进行Check In 三.Axure添加弹出框(已有弹出框),选中需要添加事件的按钮,点击OnClick, 进入如下页面,选中Widgets下面的show和右侧窗口中对应的动态面板名称,自定义显示(show)还是隐藏(Hide)即可.

Axure之动态面板:登录面板切换

无论是谁,在刚开始接触一门不太熟悉的东西时都有一种恐惧感,但是慢慢多练习几遍,再多琢磨琢磨,形成自己的见解和认识,就掌握的差不多了.我说的是题外话,现在转入正题. 面板切换,也就是我们通常所有的tab切换. 几个简单的步骤就可完成: 先看图,我们预想的是默认情况下:显示快速登录按钮的选中状态,下面内容显示相应的内容:‘我是内容一’,点击账户密码登录,选中账户密码登录状态,显示对应的内容:‘我是内容二’ 步骤1: 页面上拖入一个动态面板,双击动态面板,点击+,增加一个状态 state2.好了,现在

【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看[demo],扫描后点击屏幕有惊喜哦… 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单的引擎里需要有三种元素:世界(World).发射器(Launcher).粒子(Grain).总得来说就是:发射器存在于世界之中,

C#&.Net干货分享-构建Aocr_ImageHelper读取图片文字做解析

直接源码,就是这么干脆... namespace Frame.Image{    /// <summary>    ///     /// </summary>    public class AspriseOCRLanguages    {        // Common used languages        /// <summary>eng (English) </summary>        public const String LANGU

Axure教程:如何使用动态面板?动态面板功能详解

写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果.所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1.  隐藏与显示 2.  滑动效果 3.  拖动效果 4.  多状态效果 以上这些效果都在移动面板的

Axure RP使用攻略--动态面板的用途(8)

写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果.所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1.  隐藏与显示 2.  滑动效果 3.  拖动效果 4.  多状态效果 以上这些效果都在移动面板的元件属性里

Axure RP Pro7.0 之 动态面板初步使用

1.创建动态面板:将动态面板部件拖动到编辑区-->双击动态面板弹出动态面板管理属性或者在右下角部件管理部分修改.如图所示: 2.修改动态面板大小.位置,如图所示: 3.编辑动态面板状态,如图所示: 4.预览制作效果,如图所示: 5.浏览器查看效果,如图所示: 先跟大家分享到这里,之后再把动态面板状态之间的切换,图片的轮播等分享给大家.

Axure RP使用攻略--动态面板滑动效果(10)

示例原型:http://pan.baidu.com/s/1mgjYahi 实现目标: 1.  点击登录滑出登录面板 2.  点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准备需要的元件:1个矩形,1个文本,1个动态面板(里面包含2个矩形,一个作为面板,一个作为登录按钮) 把动态面板添加一个状态,准备工作就结束了. 注意:每个主要元件记得加上标签啊! 第一种:动态面板滑入滑出方式 1.  设置文本面板"登录"的onclick事件,为点击时动态面板滑动到绝对位置

Axure 动态面板实现弹出框效果

今天在画原型图的时候遇到了个弹出框效果的实现,感觉挺有意思的,拿出来share下~ 如图:当我点击删除按钮后,如果用户选择删除,则要求要弹出一个对话框来让用户输入处理备注,如果不要删除,则点击取消: 首先描述下大致思路,我在页面上加上一个动态面板,然后为这个动态面板加上两个状态,一个是显示弹出框,另一个是隐藏弹窗口. 下面是弹出对话框的两个状态的设计: 隐藏状态的动态面板设置为空白,这样当切换到这个状态时就看不到任何东西. 然后为删除按钮添加用例: 注意,这里是当发生单击事件的时候弹出动态面板,