如何用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新零售电商产品经理

本文作者 @产品范

版权声明

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

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部