原型设计工具Axure RP新手教程（十三）：标签菜单

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

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

在本教程中，您将学习如何构建一个结构，在该结构中单击一个选项卡即可显示该选项卡的内容。

小部件设置

创建选项卡小部件

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 将两个按钮小部件从Libraries（库）窗格拖到画布上。

• 设置一个按钮上的文字来Tab 1和对方Tab 2。

• 选择两个按钮，然后使用Style（样式）窗格中的Corner Visibility（转角可见性）控件关闭底角。这将同时渲染两个按钮，这些按钮的顶部为圆角，底部为方形角（选项卡形状）。

创建内容小部件

• 为第二将矩形窗口小部件拖动到画布上，并将其放置在两个按钮下方。

• 给该矩形提供蓝色填充颜色，并将其文本设置为Tab 1内容。

• 将第二个矩形拖动到画布上，然后将其放置在其他小部件的右侧。

• 为第二个矩形提供与第一个相同的蓝色填充颜色，并将其文本设置为Tab 2内容。

将内容矩形放置在两个状态的动态面板中

• 右键单击Tab 1内容矩形，然后在上下文菜单中选择Create Dynamic Panel（创建动态面板）。

• 在Outline（大纲）窗格中，将光标悬停在新的动态面板窗口小部件的项目上，然后单击右侧的Add State（添加状态）图标。

• 仍在Outline（大纲）窗格中，选择Tab2内容矩形并将其拖动到State2的下方和右侧。这会将其添加到该动态面板状态，并在画布上打开该状态。
  

• 将Tab 2内容矩形移动到画布上的（0,0）。

• 单击画布右上方的关闭，或按ESC退出状态编辑模式。
  

单击选项卡时设置动态面板的状态

• 选择Tab 1小部件，然后在Interactions（交互）窗格中单击New Interaction（新建交互）。

• 在出现的列表中选择Click或Tap事件，然后选择Set Panel State操作。

• 在arget（目标）下拉列表中选择动态面板，然后在State下拉列表中选择State 1。

• 单击确定以保存操作。

• 使用Tab 2小部件重复这些步骤，将动态面板的状态设置为State 2。

指示哪个选项卡处于活动状态

给选项卡选择样式效果

• 选择两个选项卡小部件，然后在Interactions（交互）窗格中单击New Interaction（新建交互）。

• 在样式效果下，选择：selected。

• 在出现的块中，检查Fill Color（填充颜色）属性，然后选择与内容矩形相同的蓝色。

单击时将选项卡设置为其选定状态

• 选择Tab 1小部件，然后单击Interactions（交互）窗格中单击或点击块底部的+符号。 这将使我们向事件添加新的动作。

• 选择Set Selected/Checked action（设置选定/选中的操作），然后定位小部件。

• 单击确定以保存操作。

• 对Tab 2小部件重复此操作。

将选项卡放入选择组

• 将选项卡小部件放在选择组中将确保一次只能选择其中一个状态。

• 选择两个选项卡小部件，然后单击Interactions（交互）窗格右上方的More Options（更多选项）图标。

• 在选择组字段中输入选项卡控制组。

使选项卡1为默认选中

• 选择选项卡1，然后在Interactions（交互）窗格打开More Options（更多选项）菜单。

• 选中已选择框。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询了解

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