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

使用工具：Axure pr 8.1版本。
制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。

E62803B2-9536-4950-A6DD-70671941F095.png

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

第一步：

1.1、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。
1.2、双击母版，进入母版编辑页面。在这里进行那些拖动等操作啦。

第二步：

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

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

CFE5607E-0A18-4F2B-B9D6-060CAC1DA65E.png

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

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

86F854C4-5DF6-4E4E-A9EC-49D8BBAC3857.png

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

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

第三步：

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

429089C1-9768-47E4-ACEE-04A014525E86.png

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

59FC3ECC-33F6-4140-A806-4DC619377D4A.png

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

04757515-68E9-4F08-BF73-12AA763302B9.png
3.3、其他tab进行相同的操作鼠标单击时，打开对应的页面。

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

9CD45F9B-7DBA-4D95-BBDC-39838EBBFCAE.png

第四步：

点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态
4.1、比如点击找车页面，右侧属性，点击页面载入时。如下图：

B6A9A0C9-5D0C-420F-977B-2E9FF70CCC4A.png

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

F415E271-DF84-4595-971A-CD774C2255D6.png

至此，所有步骤完成。

第五步：

发布预览一下就可以了。