1、Axure9.0实现简单的导航切换或tab切换效果

使用Axure9.0实现简单的web端导航栏的切换效果或者APP底部的tab切换效果，主要做了三种模式，如下图：

1、构建基本的切换框架图

2、设置交互

2.1导航一效果设计

（1）选中需要设置的交互元件，后点击交互页面中“新建交互”的按钮

（2）设置交互事件，选中需要设置的元件，选择“单击时”的触发事件，并为其添加“设置选中”的动作

（3）选中的元件为“当前元件”，并将其选中的值设置为“真”

（4）修改鼠标选中后的样式，点击“添加类似鼠标悬停的交互样式”，并选择“元件选中的样式”

（5）点击“更多样式选项”后修改字体颜色以及添加下划线，即鼠标选中后，对应元件的字体颜色发生改变并添加下划线

（6）完成对单一元件的交互样式设计

（7）对其他两个同级的导航栏进行相同的交互事件设计

（8）选中同一级的导航条内容

（9）对选中的多个元件进行选项组的设置

（10）对选项组进行命名或者选择已有的选项组名称

（12）完成了导航一的切换效果

2.2导航二效果设计

导航一中采用的是纯文本的导航栏设计，导航二中采用的是SVG图片的形式：

（1）转换SVG图片为形状

（2）设置交互事件过程同导航一中步骤（1）-（3）

（3）修改鼠标选中后的样式，点击“添加类似鼠标悬停的交互样式”，并选择“元件选中的样式”

（4）点击“更多样式选项”后修改形状的填充色，即鼠标选中后，对应元件的填充颜色发生改变

（5）完成对单一元件的交互样式设计

（6）对其他两个同级的导航栏进行相同的交互事件设计

（7）选中同一级的导航条内容

（8）对选中的多个元件进行选项组的设置

（9）对选项组进行命名或者选择已有的选项组名称

（10）完成了导航二的切换效果

2.3导航三效果设计

导航三中将导航一的纯文本和SVG图片相结合的形式

（1）转换SVG图片为形状

（2）同时选中转化后形状和文本，并将其组合起来

（3）设置交互事件过程同导航一中步骤（1）-（3）

（4）分别选中文本和SVG形状后修改鼠标选中的样式，点击“添加类似鼠标悬停的交互样式”，并选择“元件选中的样式”，对其他两个同级的导航栏进行相同的交互事件设计

（5）选中同一级的导航条内容

（6）对选中的多个元件进行选项组的设置

（7）对选项组进行命名或者选择已有的选项组名称

（8）完成了导航三的切换效果

 

效果展示：https://download.csdn.net/download/z983002710/15366343

原型设计下载链接：https://download.csdn.net/download/z983002710/15366361