选项卡的动态效果比较常用,逻辑性也比较简单。

1、先将三个矩形作为菜单栏放好,再放入一个动态面板。为了区分,菜单栏取名分别为菜单一、菜单二、菜单三,动态面板取名为内容;

Axure8.0 制作选项卡

2、将菜单一、菜单二、菜单三同时选中后设置选项组名称,这个是为了实现点击互斥效果;

Axure8.0 制作选项卡

3、为动态面板中加入三个内容,分别为内容一、内容二、内容三;

Axure8.0 制作选项卡

4、为菜单一设置选中效果,增加填充颜色(这一步非必须),勾选“选中”前的复选框,使菜单一在载入时为选中状态;

Axure8.0 制作选项卡

5、同样,为菜单二和菜单三设置选中效果,但是这两个不需要勾选“选中”;

Axure8.0 制作选项卡

6、为菜单一鼠标单击添加用例,分别为选中和设置面板状态,选中动作为当前元件,设置面板状态的配置动作为内容(动态面板),需要注意,“选择状态”的选择,这个决定你点击菜单后的显示内容,如下图所示;

Axure8.0 制作选项卡

7、菜单二和菜单三的设置与菜单一相同;

Axure8.0 制作选项卡

Axure8.0 制作选项卡

8、至此,就完成了选项卡的设置。点击预览即可查看效果;

Axure8.0 制作选项卡



---------------------------------------------------------------------------------------

产品小白,如有错误,请指正。

相关文章: