2020-09-17 19:45
来源:
人人都是产品经理
导读：Tab切换是很多网站必备交互，然而很多论坛教程并不完整，产品小白一步一步照着做，可能仍无法实现效果，浪费时间还打击自信。本文作者基于Axure 9.0版本，对制作Tab切换的每一个步骤和细节都进行了详细的讲解，与大家分享。
案例要点
通过动态面板设置不同页面内容，n个tab设置n个状态；
拖动矩形作为按钮，设置矩形选中状态；
设置tab按钮的点击事件，设置动态面板的状态切换。
详细步骤
1、 拖动一个矩形做tab，这里我想做一个女装男装童装三个tab切换，先拖动一个矩形，把矩形命名为女装（给形状命名习惯要养成），ps：先拖一个矩形就好，方便设置完交互再一波复制。
2、拖动动态面板，给动态面板添加状态，做几个tab页添加几种状态。我这里设置了女装、男装、童装三种状态。（动态面板命名为服装品类tab）。每种状态下放对应的页面内容，我这里以文字示意。
3、给tab按钮设置交互。选中女装按钮，点击交互下的编辑按钮进入交互编辑器。
在编辑器中，添加事件——单击时，添加两个动作：
设置面板状态，目标【服装品类tab】到state【女装】；
设置选中，目标【当前元件】，设置【值】，到达【真】。
第一步操作是为了链接tab按钮和动态面板的状态，表示单击女装按钮进入动态面板女装页面；
第二步操作表示单击操作时，该元件状态为选中，注意这一步非常重要，只有这样我们设置元件【选中】时的【交互样式】才能实现，比如单击女装时女装按钮高亮显示。
4、单击形状属性旁的显示全部，给女装按钮设置选项组（名称可自定义，我这设置服装tab组），设置选项组才能达成单选目的。
5、设置按钮的交互样式。这里可以设置悬停、选中、禁用等状态的交互样式。我这里设置选中时的样式为背景填充黄色。与第3步的单击操作设置选中结合，最终形成了单击按钮时黄色高亮的交互。
6、复制女装按钮两次，修改每个按钮对应交互信息，形状名称改为男装/童装，单击时面板状态到男装/童装。
7、最后一步，设置按钮女装的默认状态是选中，表示打开时默认选中女装tab。
最终效果
预览一下即大功告成。tab切换也有其他做法，但是动态面板更容易理解，大家可以一试，有问题可以在评论区交流。
本文由 @西瓜汤圆 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。返回搜狐，查看更多
责任编辑：}

思路：首先确定要有几个选项tab，有几个就设计几个选项tab通过动态面板设计实现内容页面切换设计Tab按钮的交互设计，绑定对应的动态面板，实现动态按钮的状态切换设计tab选项组，设置选中效果，实现tab的选中效果最终要实现的大概就类似如下效果步骤（1）首先在基本原件中找到按钮，将其拖动到设置区域中：（2）复制多两个按钮，分别命名为”男装“、”女装“、”童装“，并且可以将其设置称自己喜欢的样式（3）设置tab的交互样式，为实现交互效果，可以设计不同的”鼠标悬停“、”鼠标按下“及”选中“样式。鼠标悬停设置如下：鼠标按下设置如下：选中设置如下：当设计完这些基础功能之后可以点击顶部的“预览”功能，预览自己所设计的效果。（4）在基本元件中找到“动态面板”。拖拽动态面板到页面面板，设计合适的尺寸，将其命名为“页面内容”，注意：给元件进行命名的习惯很重要！！！！（5）双击动态面板，进入动态的状态管理页面（6）点击“state1”，将其修改为“男装”，并添加两个状态，分别命名为“女装”、“童装”（7）点击“男装”，并拖拽文本标签放置在这边，填入想要对应的页面想要显示的内容，“女装”、“童装”状态的设计逻辑也是如此。男装：女装：童装：（8）设计好动态面板的状态之后，点击右上角“关闭”，退出动态面板设计（9）然后是通过交互设计，把各个tab按钮和动态面板的对应状态关联起来男装&男装按钮：然后设置面板状态，将目标设置到“页面内容”，并且让其state到”男装“，然后按下”确定即可“设置完面板状态，还需设置选中，，让其选中当前元件，然后设置为”值“，到达选择”真“，让其可以实现单选的功能女装，童装如上步骤进行设置。（10）接下来设计顶部tab的选中效果，即选择了对应的页面后，该顶部tab会一直呈现选中的效果，直到选择另一个tab。同时，我们设置页面1为默认选中。首先，选中三个按钮，邮寄选择”选项组“。然后把组名称设置为”服装tab“，然后点击确定最后，我们设置男装为默认页面，男装的按钮设置为默认选中。点击“男装”按你牛，双击打开菜单栏，选择“选中”。到此，tab选项卡切换就实现了，我们可以点击预览可以看一下效果实现了没，之后可以再美化一下导航按钮。
}

莫奕moyi
CSDN认证博客专家
CSDN认证企业博客
分类专栏
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
成就一亿技术人!
hope_wisdom 发出的红包
实付元使用余额支付
点击重新获取
钱包余额
0
抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。余额充值
}