本文分享了在Axure中巧用交互样式实现多tab切换效果的方法,希望对大家有帮助。

先看效果:

Axure:巧用交互样式实现多tab切换效果

步骤:

第1步,先准备三个矩形。

  • 1个内容(结果)展示区域
  • 2个tab紧挨着内容区域

Axure:巧用交互样式实现多tab切换效果

第2步设置默认样式。

(1)设置内容与两个背景的颜色一致 —— 选中时溶为一体。

(2)设置内容区域的边框颜色为0099FF —— 后期设置tab选中样式时要用到。

(3)设置tab的边框线宽为3、线段颜色为全透明(不透明度:0) —— 与后面设置的tab选中样式形成对比,视觉上选中之后变大了。

Axure:巧用交互样式实现多tab切换效果

Axure:巧用交互样式实现多tab切换效果

设置好之后的效果是这样:

Axure:巧用交互样式实现多tab切换效果

第3步设置tab的交互效果。

(1)右键元件,菜单中选择“交互样式”。

Axure:巧用交互样式实现多tab切换效果

(2)进入交互样式设置,设置选中后的效果。

  • 线段颜色,设置为0099FF —— 与内容区域一样。
  • 线宽,设置为1 —— 选中后放大效果(原来被透明边框占去了3像素,现在只占1像素(还不透明),视觉上变大了)。
  • 边框可见线设置为最下边不显示边框 —— 目的与内容区域溶合。

Axure:巧用交互样式实现多tab切换效果

第4步,设置层级,及位置。

(1)内容区域置于最低层 —— 不然内容区域的边线一直可见,不能溶为一体——这也是要把tab的边线(默认)设置为透明的原因之一。

Axure:巧用交互样式实现多tab切换效果

(2)将tab下移1像素 ——(选中时)正好可以盖在内容区域的边线上,从而实现溶为一体。

第5步,设置动作。

点击tab时,完成以下动作:

(1)设置点击tab位于顶层 —— 再次保证不是其他元件盖着。

(2)设置内容区域文字 —— 从内容上体现选中了这一块。注:2个tab要设置不同的文字(进阶方案:使用this.text实现)。

(3)设置当前元件为选中状态 —— 用到前面设置的交互样式了。

Axure:巧用交互样式实现多tab切换效果

第6步,设置选项组、设置默认选中项。

(1)tab之间是只能选中一个的,所以需要将这两个tab设置为同一个选项组(实现单选效果)。

注:先项组的名称可随意取。

Axure:巧用交互样式实现多tab切换效果

(2)设置默认选中项 —— 因为内容区域显示的内容是由tab来决定的,如果两个都是未选中的,则内容区域什么都不显示,固需要有一个默认选中项。这里设置的是左边为默认选中项。

Axure:巧用交互样式实现多tab切换效果

OK,全部完成,伸伸懒腰,点击F5,就可以看到效果了。

原型链接:多tab切换效果 ,欢迎下载交流。