Axure RP 如何实现导航栏切换页面——母版

网站的导航功能是一个网站的最基本也是最为重要的功能之一，当我们在做项目时，点击导航按钮实现跳转页面，并且每次点击跳转都会有交互，运用母版，可大量减少设计时间，实现跳转页面。

以知乎网站为例：

总结为两个动作：1、点击导航按钮并选中；2、选中的按钮链接并跳转到相应的页面。

第一步：创建母版，并添加按钮的选中交互

1、首先，设计出知乎的导航栏：

2、框选导航栏的所有元素 --> 右键，选择“转换为母版” --> 母版名称命名为“知乎导航栏-导航按钮” --> “确定” --> 变为粉红色的背景的母版创建完成，并体现在左侧母版栏中 -->

3、双击创建的母版，进入母版编辑页面 --> 同时选择四个按钮，在交互栏中点击“+添加类似鼠标悬停交互样式” --> 选择“鼠标悬停的样式” --> 勾选“字色”，改为深灰色 --> “完成” -->

继续点击“+添加交互样式” --> 选择“元件选中的样式” --> 勾选“字色”，改为更深的深灰色 --> 勾选“类型” ，选择“Medium”的中粗字体 --> “确定” -->

第二步：创建导航下的页面，并添加按钮和页面的链接交互

1、首先，创建导航下的四个页面并命名 --> 分别在四个页面里放上导航按钮的母版和四个页面的内容 -->

2、添加导航按钮链接到页面的交互

回到母版编辑页面，选中首页 --> 在交互栏中点击“单击时 打开链接” --> 选择要链接到的首页 --> “确定”

以此类推，分别链接到相应的页面 -->

第三步：设置页面载入时的选中交互

选择知乎首页的页面，在页面里没有任何选中的情况下：点击交互栏的“新建交互” --> 选择“页面 载入时” --> 元件动作选择“设置选中” --> 选择元件“首页” --> 值为“真” --> “确定” -->

以此类推，将另三个页面都设置页面载入时的选中交互事件 -->

第四步：设置页面载入时选中的显示交互

知乎的导航文字选中后文字下方会有蓝色条的提示条显示，有两种方法：

进入母版编辑内画出提示条

方法一：显示隐藏

每个文字按钮下方都设计提示条，先隐藏 -->

分别进入四个页面，载入时增加显示相应的提示条 -->

方法二：一个提示条记录位置移动距离

首先在导航母版中“首页”的文字按钮下方都设计提示条，以此位置作为初始状态，可以不做移动的交互动作，也可以当作移动了0的距离 -->

进入知乎的首页，页面载入时点击“添加动作” --> 元件动作选择“移动” --> 选择蓝色的提示条矩形 --> 移动选择“经过”，x轴移动0 --> “确定” -->

以此类推，另三个页面同理页面载入时移动提示条，都以在首页的初始位置为基准，计算x轴移动了多少距离，即：每次移动都是从首页的初始位置移动 -->

到等你来答页面，提示条的长度不够，需要再添加加长提示条的长度到动作，将原来的26的长度调整到56的长度：

在页面 载入时继续点击“添加动作” --> 元件动作选择“设置尺寸” --> 目标元件选择提示条矩形 --> 宽的尺寸改为56 -->

到此，知乎导航栏切换页面的交互就完成了