Axure 9 actual combat case, master application 2, using the master to interactively draw Tab tabs

---

Preface

Hello! Welcome to the Axure 9 practical case tutorial column. Click to understand the course introduction >>

In the previous tutorial, we explained the use of masters to draw the navigation menu of WeChat APP ( click to read this tutorial >> ), in this tutorial we will continue to explain another menu-Tab tab menu, this kind of menu is more It is applied at the top of the APP, such as the contact page of TIM.

TIM Contact Page-Partial

The above picture is the contact page of TIM. You can see that the main interactive components of this page include:
①When you click on the menu, the current menu will be selected;
②When you click on the menu, the indicator line will move to the bottom of the corresponding menu;
③When you click on the menu , Jump to the corresponding tab/page.

The first draft of the Tab tab menu on the TIM contact page

In order to save time, we have prepared the first draft of the Tab tab menu on the TIM contact page in advance. Let's explain to you how to use the master to draw the Tab tab menu (more functions in the master will be used) .

Step 1: Create a master and set the menu selection effect

In the previous article, we created the master by right-clicking and converting to the master. In this article, we use another method of creating a master, which is the direct creation method.

First click on the master in the left column to switch to the master column, and then click Add Master in the upper right corner to create a master, and cut the first draft of the tab menu into the master.

Add a master in the master bar, and cut the first draft of the tab menu into the master (design master)

Then select all the tab text, in the interaction on the right column, click <Add an interaction style similar to "mouse hovering">, then select the selected style of the component, and set the font color to blue.

Select all tabs and click <Add an interactive style similar to "mouse hovering">

Select the selected style of the component and set the font color to blue

Then select the indicator line, and also click <Add an interactive style similar to "mouse hovering">, then select the selected style of the component, and set the line segment color to green.

Select the indicator line, then click <Add an interactive style similar to "mouse hovering">

Select the selected style of the component and set the color of the line segment to blue

Step 2: Set the page interaction event of the master

Different from the previous master tutorial, in the second step of this article, we will talk about some interaction events in the master (the first step is about interaction styles).

First click on the blank space of the canvas to uncheck the components. In the interaction on the right column, click New Interaction-When the page is loaded-Event triggered, then click Add to create a new event, then fill in the event name (English format is recommended), and tick Select the event.

Click New interaction-when the page loads-trigger an event-add, create a new event, fill in the English name and check it

The second step of the master page interaction

Step 3: Draw the page and set the page tab to jump interaction

First create 4 pages, named Friends, Group, Group Chat, Device; then open the pages one by one, drag the master to the page; or right-click on the master, select add to page, and then check the previous 4 pages, click OK to add masters to the pages in batches.

Create 4 new pages, named Friends, Group, Group Chat, Device

Right-click on the master and select add to page

Check 4 pages and click OK to add the master to the page

Then double-click to open the master, select the first tab (friends), and in the interactions on the right column, click New Interaction-when clicked-open the link-friends page; then follow this method to set up groups and group chats , The click link page of the device tab is the group page, group chat page, and device page (or copy the interaction of the friend tab to the other three tabs, and then modify the link page target one by one).

Select the friend tab of the master and click New Interaction

Click on click-open link-friend page

Copy the friend's interaction to the other 3 tabs, and then modify the link target to the group page, group chat page, and device page

The third step is the interaction of one of the tabs of the master

Step 4: Set up the interaction between tabs and indicator lines

The first three steps are considered to be a preparatory operation, this step (the fourth step) is the most important step. First, double-click to open the first page (friend page), select the master in the page, click New Interaction in the interaction on the right side , and we can see the TabMenu event created in the second step , and then click TabMenu- Set the selected-friend (one of the master tabs), set the event that triggers the selected friend tab; then click to add a target, select the indicator line, and then directly click OK (set the indicator line as selected).

Select the master in the friends page and click New Interaction

Then click TabMenu-Settings selected-Friends (one of the master tabs)

Then click to add a target, select the indicator line

Then copy the interaction of the master in the friend page, paste it to the master of other pages, and modify the first target to be the tab group, group chat, and device in the master, and modify the second target to be the indicator line .

Copy the interaction of the friend page master to other pages

Modify the target to the tab group, group chat, device and indicator line in the master

After setting the selected interaction of the tab, the following is to set the movement interaction of the indicator line to move it below the current tab.

We first double-click to open the master in the master bar, drag in a rectangle, and then drag the two ends of the rectangle so that the left end is aligned with the left side of the first tab, and the right end is aligned with the left side of the second tab. The measured tab spacing is 270 pixels (remember to delete the rectangle after the measurement).

Use the rectangle to measure the spacing of the master tab to 270

Then go back to the second page (group page, the first page is the initial position, no need to set the move), select the master, click Add Action in the interaction on the right column, and then click Move-indicating line in turn to set the pass The X is 270.

Select the master of the group page, click Add Action-Move-Indication Line, and set the passing X to 270

Then follow the same method to set the mobile interaction of the group chat page and the device page respectively, and set the passing X to 540 (that is, 270×2) and 810 (that is, 270×3).

In the same way, set the mobile interaction between the group chat page and the device page, and set the passing X to 540 and 810 respectively

The fourth step is the master interaction of one of the pages

Conclusion

OK, through the first four steps, you can use the master to draw an interactive Tab tab menu with instructions; if you still don’t understand, you can download the courseware at the end of the article to continue learning.

Final rendering

Related Courseware

In order to help students to quickly understand and practice Axure cases, each tutorial in this column will provide RP format courseware download.

Courseware package link:
https://item.taobao.com/item.htm?id=631599964711

The link is valid for a long time.

(Merlin Russ original product, reprinting without permission is prohibited, infringement must be investigated)

"Axure 9 Case Tutorial-Basics": Explain the basic operations of Axure 9 from the perspective of actual combat cases, help you learn the design thinking of product prototypes from the case, and take you quickly into the actual combat phase! ! Suitable for students who get started with Axure! ! Click to understand the course introduction >>