10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

Axure RP 教程:动态面板之Tab标签导航页面切换效果制作

5月前 874 0

Tab标签Tab导航切换效果是目前无论是移动端还是网页端都很常见的一种内容切换方式,通过Tab标签可以把原本非常长的内容分块式的展示,相当于增加了一个二级导航切换,这样可以有效的节省页面长度,提高浏览效率,增强内容的分类查看。

在Axure RP中,使用动态面板制作Tab标签导航页面切换是一种常见的交互设计,其应用场景包括:

  1. 网站导航:在门户网站或应用的顶部,通过Tab标签实现不同内容区域的快速切换,如新闻、视频、图片等板块的切换。
  2. 产品详情页:在电商平台的产品详情页,Tab标签可以用于切换产品介绍、评价、详情等不同部分。
  3. 后台管理系统:在后台管理界面,Tab标签用于在不同管理模块间切换,如用户管理、订单管理、设置等。
  4. 文档编辑器:在文档编辑软件中,Tab标签可以用于切换不同的文档或文档的不同视图模式。

制作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 RP的动态面板来制作Tab标签导航页面切换效果,可以有效地模拟真实的用户交互体验。这种设计不仅提高了界面的可用性,也使得信息的组织和访问更加直观和便捷。通过动态面板的状态管理,设计师可以轻松地控制不同Tab标签下的内容显示,实现平滑的页面过渡效果。此外,动态面板的灵活性还允许设计师添加动画和过渡效果,增强用户界面的动态感和吸引力。总之,动态面板是Axure RP中实现复杂交互效果的强大工具,对于原型设计和用户测试都具有重要的价值

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#Axure RP #动态面板 #Tab标签 #Axure RP教程 
收藏 1
推荐阅读
  • Axure PR进阶教程:输入数值控制滑块与拖动滑块动态显示数值交互设计
  • Axure RP 教程:动态面板之Tab标签导航页面切换效果制作
  • 在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
  • Axure入门教程:如何学习AxureRP以及学习方法
  • Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
评论 (0)
请登录后发表评论
分类精选
Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置
1686 9月前
Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果
1612 11月前
Axure RP 教程:Axure中继器的增、删、改、查操作教程
1593 11月前
Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
1558 11月前
Axure RP 教程:Axure 预览与发布生成HTML文件
1549 11月前
在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
1519 11月前
Axure入门教程:将Adobe XD设计导入Axure
1519 11月前
Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
1514 11月前
Axture元件库教程(二):一键复制Iconfont图标到Axure
1503 11月前
Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
1348 11月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 Axure PR进阶教程:输入数值控制滑块与拖动滑块动态显示数值交互设计
2 Axure RP 教程:如何导入阿里云Datav地图,实现Axure地图可视化交互效果
3 Axure RP 教程:Axure视频播放功能,高保真原型实现视频交互的详细操作步骤
4 Axure RP 教程:动态面板之表单多级联动效果制作
5 Axure RP 教程:动态面板之Tab标签导航页面切换效果制作
6 Axure RP 教程:动态面板之水平拖动及展开收起如何实现
7 Axure RP 教程:元件操作之快速创建单选按钮组或选项组
8 Axure RP 教程:常用样式之元件样式管理器
9 Axure RP 教程:常用样式之页面样式管理器
10 Axure RP 教程:Axure 支持哪些类型的页面布局,如何创建自定义布局
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联