原型设计工具Axure RP新手教程（十一）：导航菜单

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何制作一个导航菜单，您可以将其添加到许多页面中，并可以从单个中央位置作为主菜单进行管理。（此处）

小部件和页面设置

创建四页

• 打开一个新的RP文件。

• 在Pages（页面）窗格中，缓慢双击Page1（页面1）将其重命名，命名为Home。

• 单击Pages（页面）窗格右上角的Add Page（添加页面）图标，以向项目中再添加三个页面。将页面命名为About，Contact和Help。

为每个页面创建一个按钮小部件

• 双击Home（主页）以在画布上将其打开。

• 将四个按钮小部件拖动到画布上，然后将它们水平对齐。

注意：您可以通过选择小部件并使用界面顶部的Align and Distribute（对齐和分配）选项来自动对齐和分配小部件。

• 将按钮上的文本更改为Home，About，Contact，和Help以匹配页面名称。

配置按钮链接

• 选择Home（主页）按钮，然后在Interactions（交互）窗格中单击Click（单击）Tap（点击）→Open Link（打开链接）。

• 在出现的列表中，选择Home（主页）。然后，单击确定以保存操作。

• 对其他三个按钮重复这些步骤，为每个按钮选择相应的页面。

注意：您也可以使用参考页面功能将导航按钮链接到页面。

创建母版并将其添加到其他页面

• 选择所有四个按钮，然后右键单击所选内容。 在上下文菜单中，选择Create Master（创建母版）。

• 在出现的对话框中，命名主导航标题，然后单击Continue（继续）。

• 现在，新的母版应该在Masters（母版）窗格中列出。右键单击它，然后选择添加到页面。

• 在出现的对话框中，检查About，Contact，和Help页面，因为这些页面上还没有主页。

• 在Position（位置）下，指定要放置母版的页面坐标。然后，单击确定。

注意：您对母版中的小部件所做的任何更改都会反映在母版上显示的所有页面上。

预览

预览页面，然后单击导航按钮在原型页面之间移动。

指示当前页面

给按钮选择样式效果

• 双击导航标题母版以在画布上将其打开。

• 选择所有四个按钮，然后在Interactions （交互）窗格中单击New Interaction（新建交互）。

• 单击：selected样式效果，然后在出现的块中选择橙色填充颜色。

匹配页面加载时，将每个按钮设置为选定状态

• 选择主页按钮，然后再次单击New Interaction（新建交互）。

• 选择Loaded事件，然后选择Set Selected / Checked操作。

• 在Target（目标）下拉列表中选择This Widget（此小部件），并保持其他值不变。

• 单击OK（确定）保存交互。

• 将鼠标悬停在Loaded（已加载）事件标题上，然后单击右侧的Enable Cases（启用案例）。在出现的Condition Builder（条件构建器）对话框中，单击Add Logic（添加逻辑）。

• 在出现的条件行中，在第一个下拉列表中选择值，然后在其旁边的字段中输入[[PageName]]。 保留其他字段不变。

• 对话框底部的摘要应显示为： if "[[PageName]]" equals "Home"。 如果主页是Web浏览器中加载的页面，则将满足此条件。

• 单击OK（确定）关闭Condition Builder（条件生成器）。

• 对其余三个按钮重复这些步骤。

预览

预览页面，然后单击导航按钮在原型页面之间移动。 加载每个页面时，其相应的导航按钮应变为橙色。

附加信息和提示

粘性导航

如果您希望将导航菜单固定在某个位置或卡住，以使其在滚动页面时不会移动，请将其放在动态面板中。然后，将动态面板固定到浏览器。此技术对于制作粘性页眉，页脚和侧边栏非常方便。

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。