如何用Axure快速、规范地设计Tab栏？

作者总结两点对于好的Axure原型的标准：维护成本低，复用性高。维护成本低，就是便于修改，这就要求能用最简单的方法实现某一效果，比如一个自带函数就可以实现的功能，就不用再写代码进行二次开发。复用性高，其实也是程序员评估代码质量的一个维度。把原型模块组件化、母版化，核心在于批量操作，避免重复造轮子。

本文举原型设计中常见的Tab栏为例：

反面示例一

此方法的核心是使用交互事件，「选中」和「取消选中」事件。

1. 设置Tab选中状态的交互样式

点击元件属性中交互样式设置下的「选中」按钮来设置元件的选中状态的效果，分别用了字体颜色、线段颜色、线宽、边框可见性这四个属性。除了选中效果还可以设置其他如：鼠标悬停、鼠标按下和禁用的效果。

2. 复制N个Tab按钮，并命名

为元件命名一般是为了区分多个相似对象，使交互事件更条例。为了下一步交互事件设置的方便，这一步为每一种状态的Tab进行命名。

3. 给N个Tab设置交互事件

单击时，当前元件的选中状态为“true”，其他所有均为“false”。每一个Tab的交互事件都不相同，需要注意的是，此方法Tab越多出错的可能性就越高。

4. 完成效果

Tab效果就完成了。

反面示例二

利用动态面板，这其实是一个枚举法，每一种Tab状态对应一个动态面板状态。虽然也可以实现Tab效果，但是这里使用动态面板是大材小用了，杀鸡不该用牛刀。

1. 设置每一种选中状态的样式

先把所有状态的Tab枚举出来，也就是通过复制的办法，画出所有状态的Tab。

2. 为每一种状态设置动态面板

为每一个Tab状态设置一个动态面板状态，然后把Tab状态放入动态面板当中。

3. 给N个Tab设置交互事件

这一步设置Tab的交互事件，点击Tab显示为对应的动态面板状态。

正确示例

这个方法的核心是利用选项组。很多童鞋可能没有用过选项组这个方法，选项组其实就是为了实现类似于Tab功能而存在的，同一个选项组中的元件只能有一个选中状态。这个功能就好比Excel中内置的一个函数，虽然也可以通过基本的算术运算实现。通过内置函数可以减少用户大量的时间成本，而且出错的可能性更低，也会让你更专业。

1. 设置Tab的选中状态的交互样式&交互事件

在这里，只需要设置一个状态的Tab便可以复用（复制）为其他Tab状态，这里的交互样式同反面示例1的第一步。

同时设置交互事件，Tab点击时的选中状态为“true”。

关于选中状态文字下面横线的效果，很多人会用水平线和矩形组合来实现，这其实是极其不专业的做法。最简单且正宗的方法是在交互样式设置中设置边框的可见性。可以任意设置矩形边框的显示和隐藏。

2. 为Tab设置选项组名称

敲重点，这一步十分重要，很少用到的功能，在同一个选项组当中只会有一个被选中状态。这一个小小的设置就替代了示例一中繁琐的交互事件。

首先选中元件，然后在右侧属性栏中找到设置选项组名称。在输入框中填写任意名称即可，之后就会被保存下来，可供其他元件选择并加入该选项组。

3. 复制为N个Tab

只需要暴力的复制就好，不需二次设置交互事件，用这个方法每个Tab的交互事件和选中效果完全相同，不需要做其他特定的修改。

这里表达一个思想是好的方法一定是最简单的。Axure有很多正统的使用方法一直被埋没，利用这些方法可以极大地提升你的原型效率。也许你还有其他方法来实现Tab效果，如有兴趣可以留言讨论。

作者：产品范，微信公众号：产品范，O2O新零售电商产品经理

本文作者 @产品范

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！