编者按:我们经常在日常工作或娱乐中使用产品背景。产品后台有很多与功能相关的组件，不同产品的后台功能不同；本文作者分享了用Axure绘制Web后端产品顶部导航组件的方法，大家一起看看。

Web后台产品顶部的导航组件用于显示产品名称logo、用户名、登录和退出等关键信息。PM必须了解和学习它的原型绘制方法。

我们在绘制Web背景产品的原型页面时，首先要考虑绘制页面的导航组件(顶部导航、菜单栏、面包屑)，然后绘制页面的内容区域；前者存在于大部分页面，是一样的，后者则是每一页都不一样。

那么我们如何使用Axure绘制类似下图的常用顶部导航组件效果，以及在后续的原型绘制中如何使用？接下来，请查看详细步骤，或者您可以直接预览顶部导航的原型地址https://rgewvb.axshare.com

一、如何绘制顶部导航

1)先画导航背景

将“矩形1”从默认目录拖到画布位置(0，0)，并将大小修改为1200*80px。

2)绘制产品图标

将“图片”从默认组件库中拖到画布上的适当位置，并将大小修改为40*40px。

3)再次绘制产品名称

将“三级标题”从默认目录拖到画布上的适当位置，双击输入产品名称。

4)再次绘制用户名

将“文本标签”从默认组件库中拖到画布上的适当位置，修改并双击以输入用户名。

5)再次绘制退出按钮

将“文本标签”从默认目录拖到画布上的适当位置，双击回车退出，并将字体颜色修改为#0000FF。

6)同时选择产品图标和产品名称，右键点击“组合”，然后点击组合，切换到右侧栏的“交互”，点击“新建交互”按钮，选择触发条件“点击时”，添加动作“打开链接”，链接到“首页”，点击“确定”。

7)点击“退出”，切换到右侧栏的“交互”，点击“新建交互”，选择触发条件“点击时”，添加动作“打开链接”，链接到“登录”，点击“确定”。

8)如果顶部导航相对于屏幕的位置保持不变，同时选择相应的组件，右键单击“转换为动态面板”，然后选中右侧边栏“样式”中的“固定到浏览器窗口”，水平选择“居中”，然后单击“确定”。

9)点击“预览”按钮，然后在浏览器中查看原型效果。

二、如何使用顶部导航

顶部导航是大多数页面需要使用的常见组件，那么我们是否需要在相应的页面上画满它？答案是否定的，我们可以用Axure的master特性画一次，批量应用到需要的页面。

10)同时选择顶部导航的所有组件，右键单击“转换为主控”，然后在弹出窗口“创建主控”中输入“顶部导航”名称，然后单击“继续”按钮。

11)点击左边的“主”进入对应视图，右键点击“顶部导航”，点击“添加到页面...”，然后通过选择和选择所有子项目，组合未选择和取消选择的子项目，快速选择所有需要顶部导航的页面，最后点击“确定”。

三.总结

可以根据我的文章制作自己的顶部导航组件，然后添加到自己的Axure组件库中，在绘制Web后台产品原型时可以快速调用。