网站的
导航
功能是一个网站的最基本也是最为重要的功能之一，当我们在做项目时，点击
导航
按钮
实现
跳转页面，并且每次点击跳转都会有交互，运用
母版
，可大量减少设计时间，
实现
跳转页面。
以知乎网站为例：
总结为两个动作：1、点击
导航
按钮并
选中
；2、
选中
的按钮链接并跳转到相应的页面。
第一步：创建
母版
，并添加按钮的
选中
交互
第二步：创建
导航
下的页面，并添加按钮和页面的链接交互
第三步：
设置
页面载入时的
选中
交互
第四步：
设置
页面载入时
选中
的显示交互
方法一：显示隐藏
方法二：一个提示条记录位置移动距离
Hello！欢迎来到
Axure
9
实战案例教程专栏。点击了解课程简介>>前几章我们分别讲解了
Axure
基本元件、动态面板、交互事件的应用，相信同学们的
Axure
实战能力已经有了一定的提高，那么在基础课程的最后一章，我们接着来讲解一下
Axure
母版
的应用。在原型设计工作中，擅于运用
母版
，可大量减少设计时间，以及压缩RP文件大小；尤其是在设计
导航
菜单
时，运用
母版
会十分省时省力；所以本篇教程我们就以微信为蓝本，来讲解一下，如何运用
母版
绘制APP
导航
菜单
。
我们先来看看微信的效果图，大家可以看到微信
导航
菜单
的主要
Axure
自动
设置
高亮交互废话不多说，如何
设置
为自动，默认高亮呢
简单介绍一下：在制作完成
Axure
原型，发布之后，进行交互操作，
Axure
支持手动
设置
，把具有交互的按钮、热区
设置
为高亮，但是这样每次手动操作一下会很麻烦（若没有此需求，忽略就行了），如下图
废话不多说，如何
设置
为自动，默认高亮呢
发布的原型文件夹\resources\scripts\
axure
找到：init.temp.js
如何用
Axure
制作上面效果的
菜单
栏？直接上步骤：新建1个
母版
（
菜单
栏模板）和5个页面（页面1——页面5），当点击
菜单
栏按键时，对应弹出页面效果
【
母版
制作】制作一个
菜单
框，拖一个矩形并输入“页面1”，再拖一个小图标和矩形做一个组合。
【
母版
制作】
菜单
框属性
设置
：矩形和小图标分别
设置
属性，属性为黑底白字，再
设置
鼠标悬停时为绿底白字，元件
选中
时黑底绿字。
【
母版
制作】
菜单
框交互
设置
1：矩形
设置
交互，如果当前组合的
选中
状态
== 真 ，则矩形
设置
为
选中
。小图标做相同交互设计。【
母版
制作】将上面
菜单
框复制5个，并
Hello！欢迎来到
Axure
9
实战案例教程专栏。点击了解课程简介>>上一篇教程我们讲解了运用
母版
绘制微信APP的
导航
菜单
（点击阅读该教程>>），本篇教程我们继续来讲解一下另一种
菜单
——Tab页签
菜单
，这一类
菜单
更多是应用在APP的顶部，例如TIM的联系人页面。
上图为TIM的联系人页，大家可以看到该页的主要交互组成包括：
①点击
菜单
时，会
选中
当前
菜单
；
②点击
菜单
时，指示线会移动到相应
菜单
的下方；
③点击
菜单
时，跳转到相应页签/页面。
为了节省时间，我们提前把TIM联系人页的Tab页签
菜单
初稿准备好了
在
axure
中
设置
按钮的
选中
状态
，悬停
状态
以及按钮组
设置
选中
状态
，一次只能
选中
一个。具体
实现
效果如图
第一种，简单
设置
按钮的
选中
，悬停等样式。首先
选中
按钮，点击新建交互样式
-
鼠标悬停。然后点击更多样式，即可看到在这里可以
设置
鼠标悬停，鼠标按下，
选中
，禁用，获取焦点共5种
状态
下的样式。根据需要进行
设置
就可以了。
第二种，
设置
多个按钮组成的按钮组一次只能
选中
一个，
选中
样式和上面
设置
一样。
设置
完每个按钮的
选中
样式以后，找到第一个按钮，点击新建交互
-
单机时
-
设置
选中
。然后选择按钮组
中的
所有按钮，将需要
设置
选中
的
