Axure-制作tab选项卡切换功能

  Axure原型设计交互在制作页面时是一个非常不错的软件,鄙人看了很多帖子,但很多交互效果都写不是很清楚,故自己重新写了一个交互效果,仅供正在学习产品原型的初学者观看。
  在这里我以tab选项卡切换功能为例:
  使用选项卡就是需要做出在不刷新页面的情况下还能做到页面内容的切换,是一个体验非常不错的功能。好了来看看具体的步骤吧。

步骤一
首先我们新建一个页面这里就叫做“选项卡切换”,双击打开该页面,我们从元件组中拖进来一个动态面板,并且设置他的宽高为600×400。(这里是举一个例子)
Axure-制作tab选项卡切换功能_第1张图片

步骤二

我们双击该动态面板,这时打开“面板状态管理”,里边有一个绿色的小加号,我们点击它来添加面板不同的状态:分别为:待开发客户,意向洽谈中,尽调资料中。最后点击确定
Axure-制作tab选项卡切换功能_第2张图片

步骤三

然后我们分别编辑每一个动态面板的状态:双击就可以打开每一个页面;
Axure-制作tab选项卡切换功能_第3张图片
这里以“待开发客户”状态页面为例:
分别拖进三个举行,坐标点分别为:0 0,200 0,400 0 ;宽高均为200 * 30
Axure-制作tab选项卡切换功能_第4张图片
。为了区分到底是哪个选项卡的内容,我们把他们对应的加一个背景色例如:“待开发客户”状态的矩形背景色为灰色,其他状态页面也是对应去设置。
Axure-制作tab选项卡切换功能_第5张图片

Axure-制作tab选项卡切换功能_第6张图片
Axure-制作tab选项卡切换功能_第7张图片

步骤四

。接下来我们为每个动态面板的状态加事件,当点击每一个选项卡时,会它e月刊到不同的状态
这里以“尽调资料中”状态页为例:我们打开对应的状态页,选中“待开发客户”选项卡,在右侧属性中双击“在单击时”:
Axure-制作tab选项卡切换功能_第8张图片
这时会弹出一个用例编辑框,然后按照以下图中的步骤分别操作即可
Axure-制作tab选项卡切换功能_第9张图片
这只是完成了“尽调资料中“状态页的第一个选项卡,后边的两个依照该步骤依次操作。
最后操作”尽调资料中“状态的结果依次为:
Axure-制作tab选项卡切换功能_第10张图片
Axure-制作tab选项卡切换功能_第11张图片
Axure-制作tab选项卡切换功能_第12张图片
ok,到这里我们只是将”尽调资料中“状态页添加完成。
接下来我们再去操作其他两个状态页,按照步骤四步骤中的操作即可
以上步骤操作完成后我们就可以运行了。

希望对大家有帮助哦。

你可能感兴趣的:(Axure-制作tab选项卡切换功能)