简介:Axure入门简单，不到一天就能掌握常用的交互设计。但是对于一个工具的使用来说，新手和高手的区别不在于任务能否完成，而在于实现过程是否快速规范。在本文中，笔者就这两点进行分析和探讨，与大家分享。

作者总结了一个好的Axure原型的两个标准:低维护成本和高复用性。维护成本低意味着修改容易，要求用最简单的方法就能实现某种效果，比如一个自带功能就能实现的功能，不需要写代码进行二次开发。高复用性其实是程序员评价代码质量的一个维度。组件化和掌握原型模块的核心在于批量操作，避免重复造轮。

本文以原型设计中常见的选项卡栏为例:

反面示例一

这种方法的核心是使用交互式事件，“检查”和“取消检查”事件。

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

点击组件属性中交互样式设置下的“选择”按钮，分别使用字体颜色、线段颜色、线宽、边框可见性四个属性，设置组件选中状态的效果。除了选定的效果，还可以设置鼠标悬停、鼠标按压、禁用等其他效果。

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

命名组件一般是为了区分多个相似的对象，使交互事件更有规律。为了方便设置下一个交互事件，这个步骤命名了每个状态的选项卡。

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

单击时，当前组件的选定状态为“真”，所有其他状态为“假”。每个选项卡的交互事件是不同的。需要注意的是，这种方法中的制表符越多，出错的可能性就越高。

4. 完成效果

标签效果完成。

反面示例二

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

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

先枚举所有状态的标签页，也就是通过复制的方式画出所有状态的标签页。

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

为每个选项卡状态设置一个动态面板状态，然后将选项卡状态放入动态面板。

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

本步骤设置Tab的交互事件，点击Tab显示相应的动态面板状态。

正确示例

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

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

这里只需要设置一个状态的选项卡就可以复用(复制)到其他选项卡状态，这里的交互方式和反例1的第一步一样。

同时设置交互事件，点击选项卡时选择状态为“真”。

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

2. 为Tab设置选项组名称

轻按按键。这一步非常重要。在同一个选项组中只会选择一个很少使用的功能。这个小设置取代了示例1中繁琐的交互事件。

首先选择组件，然后在右边的属性列中找到设置选项组的名称。在输入框中填入任意名称，然后它将被保存以供其他组件选择并加入选项组。

3. 复制为N个Tab

暴力复制就行，不用设置交互事件两次。使用这种方法，每个选项卡的交互事件与所选效果完全相同，不需要其他特定的修改。

在这里表达一个想法是很好的方式，而且一定是最简单的方式。Axure有很多正统的使用方法都被埋没了。使用这些方法可以大大提高原型的效率。也许你有其他方法来达到标签页的效果。有兴趣的可以留言讨论。

作者:品范，微信微信官方账号:品范，O2O新零售电商产品经理

本文由@品范原创发表于蜘蛛智慧链。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。