使用变量控制Tab标签或按钮的方法|Axure实例

 

所有Axure RP教程中，最经典的应该是利用Axure RP制作Tab标签了吧，这部分内容涉及了页面、层及基本的交互。

以前我制作Tab的时候，为了表现Tab/按钮的选中状态，干脆将一排Tab/按钮都放到层里；

这样做的实质是点击Tab/按钮后切换到新的层，通过这种方法来达到Tab/按钮切换状态的效果。

涉及两层Tab/按钮嵌套时，可以用页面切换+层切换，如果有三层呢？

往下看之前请先留意以下注意事项：

1. 不建议大家都么做，因为这样已经有点追求最佳显示效果的味道了；

2. 不要把大把的时间放到交互动作或者变量应用上，除非你很清楚你在干什么；

3. 如果你想做到完美，请从小处做起：记得不能让每个控件的标签（Label）空着；

—点此下载本实例Axure RP源文件

注：考虑项目敏感信息，具体页面内容做了处理但是不影响本案例理解，视觉方面敬请谅解

本实例要素：点击Tab/按钮时，为特定变量赋值并刷新页面，通过变量来控制层的切换的同时，使刚才点击的Tab/按钮显示为选中状态。

1. 点击Tab/按钮时赋值并重新加载当前页面：

使变量“Tab”的值为“1”（点击的是第一个按钮，如果是第二个，则变量值为“2”）

重新加载本页面（配合OnPageLoad来实现变量生效）

2. 在当前页面的OnPageLoad增加交互使变量生效：

如果变量“Tab”值等于“1”，则切换到对应的层（第一个层）并使刚才的按钮处于选中状态；

如果变量“Tab”值等于“2”，则切换到对应的层（第二个层）并使刚才的按钮处于选中状态；

……..

PS：如果你觉得Tab/按钮很多，这样编写OnPageLoad交互事件挺累的话，建议你看一下页面上的Tab/按钮是否多了些？太多的Tab/按钮是否会影响到用户体验或产品功能传递呢？