产品笔记一：使用axure8.1制作手机app底部导航栏效果

使用工具：Axure pr 8.1版本。

制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。

作为一名初学者，元件的组合选中以及拖动，动态面板的使用，中间还是有几个细节需要注意的，笔者初学自己研究了好久，百度并没有用，也许是关键词不合适，总找不到合适的答案。好，废话不多说，下面开始 *** 作步骤。

1.1、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。

1.2、双击母版，进入母版编辑页面。在这里进行那些拖动等 *** 作啦。

2.1、我们观察到导航栏总共5个tab组成，每个tab里有两个元素一张图片，一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等，我们将图片和文本放到一个矩形框里。

2.2、拖动一个矩形到界面上，拖动一张图片原件，一个文本标签元件。如下图，调整大小样式等。

2.3、要想整体拖动这三个元件，那么就要将这三个元件组合在一起。按住command键（我用的mac），选中矩形，图片，文本标签 右键-->点击组合，即可将是哪个元件组合在一起。

2.4、点击组合元件右键-->转换为动态面板。双击它，会d出下面的d窗，输入动态面板名称。添加状态：选中以及未选中两个状态。你可以先添加选中，然后双击选中状态进入编辑选中状态页面，添加选中时的图片，文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态，并命名为未选中，双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。

2.5、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了，就不用重复创建了。

2.6、拖动到底部导航栏矩形内部调整好间距均分屏幕。

3.1、给每个tab点击时要进入对应的页面，那么我们在下图中添加5个对应的页面。

3.2、选中第一个tab，在左侧首页属性，点击鼠标单击时。如下图：

点击链接，打开链接，当前窗口，点击首页，确定。

3.4、至此底部导航栏母版制作完毕。然后最后一步，将母版应用在各个页面上。点击右侧底部导航栏，右键-->选择将母版添加到页面中。选择全部全部页面即可。

点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态

4.1、比如点击找车页面，右侧属性，点击页面载入时。如下图：

4.2、双击页面载入时，d窗，选择设置面板状态，找车选择选中状态，其他选择未选中状态。其他tab相同设置。如下图：

至此，所有步骤完成。

发布预览一下就可以了。

1、创建一个工程，按照图示创建一个元件库，命名：myaxure

2、创建成功后，系统会自动打开所创建的元件库，然后按照下图组织文件结构

3、在基本按钮页面 添加一个按钮，并按照图示设置交互样式（右键选择交互样式）

在Axure中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样，只需要把每个页面中都有的内容在母版中编辑完毕，然后添加到相应的页面中。当页面中添加了母版的内容时，如果母版中的内容发生了改变，页面中的内容也会同步改变。

我们先来看一下母版的基础 *** 作：新建、编辑与删除。（图7-1）

（图7-1）

点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。

创建后可以对母版名称进行编辑，双击母版名称，画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样，放入元件、添加交互等组成模板的内容。

如果需要删除一个母版，需要先将母版从所有关联的页面中移除，才可以删除母版。被删除的母版有下级母版时，下级母版将被同时删除。如果需要查看母版被添加到哪些页面中，可以在母版名称上点击【鼠标右键】，在菜单中选择【使用情况】进行查看。

在母版名称上单击<鼠标右键>，打开右键菜单，在菜单列表中点击选项【添加到页面中】，在d出的窗口中，可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。（图7-2）

（图7-2）

如果页面上不再需要某个母版，或者将某个母版添加到了无需添加该母版的页面中，我们可以通过在母版名称上点击<鼠标右键>，打开右键菜单，选择【从页面中移除】，在打开的页面中选择要移除的页面后，点击【确定】即可完成移除。（图7-3）

（图7-3）

另外，也可以在页面中，点击母版将其选中，然后按下<Delete>键其删除。

母版除了使用前面的方法添加到页面中，还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要，软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>，打开右键菜单，在【拖放行为】的二级菜单中进行选择。（图7-4）

（图7-4）

允许将母版内容放入画布中的任意位置上摆放。

母版内容放入到画布中并松开鼠标后，母版内容会自动放置到画布中的固定位置上，这个位置与母版中该内容所在的位置一致。

允许将母版内容放入画布中的任意位置上摆放。但是，当拖放结束后，这些内容与母版脱离联系，变成普通元件存在于画布中。母版进行编辑发生改变时，这些内容不会同步发生变化。

圆儿：这样果然很方便！但是还有个问题。母版中的内容，包括交互都是可以重用在任何页面上，并且与母版保持一致。但是，假如母版中有一个按钮，我需要在不同的页面中，点击这个按钮时，显示不同的内容。需要怎么做呢？

小楼：我没太听懂，你举个例子说一下。

圆儿：比如说啊！ A、B两个页面中添加了同一个母版，母版中有一个在线客服的按钮。在A页面中，鼠标进入这个按钮时显示客服小张的头像，而在B页面中，鼠标进入这个按钮时则显示客服小李的头像。

小楼：嗯，这么说我就明白了。 我也给你举个例子。我们家里用电，如果只有一个供电总线，那么开关供电总线的电闸会影响家中所有的供电。但是，我们希望每个房间的供电都能单独控制，所以，需要安装一个设备叫“配电箱”，通过配电箱就可以对每个房间的供电进行单独管理，不会互相影响。在Axure中，母版中的每个触发事件添加交互都像供电总线，影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互，这就需要我们给母版中的这个触发事件接上一个“配电箱”，这个“配电箱”的名字叫“自定义触发事件”。

案例13：母版的自定义触发事件

（图7-5）

（图7-6）

2、创建一个自定义的触发事件，就如同需要购买一个配电箱。

创建自定义触发事件，需要先双击母版名称，打开母版的编辑区域。然后，在导航菜单中，点击菜单项【布局】，选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中，需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置，就可以点击【+】添加一个自定义的触发事件名称，比如：“MyMouseMove”。（图7-7）

（图7-7）

注意：只有画布中编辑母版的内容时，才能在导航菜单中打开【管理母版触发事件】的选项。否则，该选项为灰色的禁用状态。

为按钮元件的【鼠标移入时】事件添加交互，【添加用例】，并设置动作为选择【引发事件】为“MyMouseMove”。（图7-8）

（图7-8）

将母版添加到PageA和PageB两个页面中。在添加了母版的页面中点中母版，则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件，就像从配电箱中接出的分线。（图7-9）

（图7-9）

为自定义触发事件“MyMouseMove”，添加用例设置动作为【设置图片】于图片元件“CallCenter”，为客服小张的头像。（图7-10）

（图7-10）

然后，继续设置动作【显示】图片元件“CallCenter”，【更多选项】中选择“d出效果”。d出效果能够让鼠标离开时，显示出来的图片元件“CallCenter”再自动恢复隐藏状态。（图7-11）

（图7-11）

为自定义触发事件“MyMouseMove”，添加用例设置动作为【设置图片】于元件“CallCenter”，为客服小李的头像。（参考图7-10）

然后，继续设置动作【显示】图片元件“CallCenter”，【更多选项】中选择“d出效果”。（参考图7-11）

---