axure商城

Axure实战教程:tab导航页面切换

在实现移动端和PC端高保真原型时,我们经常遇到tab页签导航,点击导航可以切换不同的页面。接下来给大家分享一下具体的实现过程。

详细步骤

1、准备一下元件:2个文本标签作为tab导航,一个矩形作为导航背景框以及一个动态面板(包含两个状态,分页放置一个矩形,代表不同的页面)

Axure实战教程:tab导航页面切换

2、同时选中两个文本标签,给他们添加【鼠标悬停】和【元件选中】的交互样式。

Axure实战教程:tab导航页面切换

这边设置的为悬停为字体蓝色,选中为字体蓝色和蓝色下边框线。(可以根据自己的想要效果设置样式)

Axure实战教程:tab导航页面切换Axure实战教程:tab导航页面切换

3、如果同学们对动态面板不熟悉,不知道如何添加第二个状态,下面介绍两个办法,如下

1)直接在概要面板中,找到对应的动态面板,鼠标悬浮到state1上面,即可看见重复状态的小图标,点击即可复制出一个新的状态state2,只需要修改里面的对应内容即可,案例中放了一个矩形,代表页面2。

Axure实战教程:tab导航页面切换

4、接下来,即可以给tab导航添加交互动作,选中第一个文本标签,添加【单击时】交互事件,选择【设置选中】交互动作,设置【当前】元件为选中,值为【真】,相关设置如下:

Axure实战教程:tab导航页面切换

再添加下面的动态面板状态切换,设置其状态为【state1】,设置如下:

Axure实战教程:tab导航页面切换

最终的交互设置效果如下:

Axure实战教程:tab导航页面切换

5、接下来,只需要复制第一个文本的交互事件,选中第二个文本,粘贴即可。同时,需要把状态面板的状态设置为【state2】。

Axure实战教程:tab导航页面切换

6、最后,为了保证tab导航点击时,只选中其中一个,则需要同时选中两个文本标签,鼠标右键,给他们添加选项组,命名为a1。具体设置如下:

Axure实战教程:tab导航页面切换

7、为了保证预览时,第一个文本标签为选中,我们还需要给他勾选默认选中的效果,具体设置如下:

Axure实战教程:tab导航页面切换

8、最终预览的效果如下:

Axure实战教程:tab导航页面切换

附带的Axure源文件:

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

Axure RP8中怎样为原型添加标志

2022-11-11 14:21:01

Axure教程

Axure实战教程:tab导航页面切换

2022-11-13 17:13:45

axure商城
21 条回复 A文章作者 M管理员
  1. 裹甲衔枚

    咋实现的呢!

  2. 66

    怎么实现?

  3. 66

    怎么实现

  4. Lu175424

    咋实现的呢!

  5. tracykobe

    咋实现的呢!

  6. tracykobe

    666666

  7. Dream175054

    可以啊

  8. 🇷rrrrrrrr

    看看如何实现的

  9. ljy158371

    感谢,想看下源文件

  10. ljy158371

    666

  11. 酋长Chief

    看看如何实现的,我设置了没有用,奇怪

  12. 酋长Chief

    看看如何实现的

  13. auoufo

    感谢作者

  14. auoufo

    特别棒,感谢

  15. Laurie

    写的很好哎作者,尤其是文中对于交互细节的补充

  16. xinghantong

    加油加油

  17. peng162384

    加油

  18. 加油

  19. 黄老师
    黄老师给作者打赏了¥10
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索