Axure 9 actual combat case, master application 1, use the master to draw the APP navigation menu

---

Preface

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

In the first few chapters, we separately explained the application of Axure basic components, dynamic panels, and interactive events. I believe that the students’ Axure combat ability has been improved to a certain extent. Then in the last chapter of the basic course, we will then explain the Axure master. Applications.

In prototyping work, being good at using masters can greatly reduce design time and reduce the size of RP files; especially when designing navigation menus, using masters will save time and effort; therefore, we will use WeChat as a guide in this tutorial As a blueprint, let's explain how to use the master to draw the APP navigation menu.

WeChat navigation menu

Let's take a look at the WeChat renderings first. You can see that the main components of the WeChat navigation menu include:
①When you click on the menu, the current menu will be selected;
②When you click on the menu, you will jump to the corresponding page.

Draft of WeChat Navigation Menu

In order to save time, we have prepared the first draft of the WeChat navigation menu in advance. Let's explain to you how to use the master to draw the WeChat navigation menu.

Step 1: Select the effect in the setting menu

First select all the icons, in the interaction on the right column, click <Add an interactive style similar to "mouse hovering">, then select the selected style of the component, set the fill color and the line segment color to green; then select all the text, the same is true Click <Add an interactive style similar to "mouse hovering">, then select the selected style of the component, and set the font color to green.

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

Select the selected style of the component, set the fill color and line segment color to green

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

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

Then select the four groups of icons and text respectively, set them as combinations, and name the combinations as WeChat, Contacts, Discovery, and Me. (This is to facilitate the selection of components in the interactive settings later)

Select four groups of icons and text respectively and set them as a combination

Name the combination as WeChat, Contacts, Discovery, Me

Step 2: Use the master to draw the page

First select all the elements of the navigation menu, right-click, select Convert to Master, and name the master name as the navigation menu (appropriate naming can be easily distinguished and searched); then create 4 new pages, named WeChat, Address Book, Discovery, I, summarize these 4 pages into a folder (using folders is also for easy identification and search), and then open the pages one by one, drag the master to the page (you can also copy the master of the first page to other Page, its position is unchanged).

Select the navigation menu, right-click and select Convert to Master

Naming the master name for the navigation menu

Create 4 new pages, name them WeChat, Contacts, Discovery, Me, and put them together in a folder

Drag the master onto the page

Step 3: Set up menu jump interaction

First, in the master template on the left, double-click the master navigation menu to open the master page; then select the component combination WeChat, and in the interaction on the right column, click New Interaction-When Clicked-Open Link-WeChat Page; Then, in accordance with this method, set the component combination address book, discovery, and my click link pages, which are respectively the address book page, the discovery page, and the my page.

Double-click the master to open the edit page

Select the component combination WeChat, click on the interactive building

Click again when you click-open the link-WeChat page

Follow the same method to set up the other three groups of click interactions

The third step is the interaction of one of the combinations

Step 4: Set the menu to select interaction

First, double-click to open the WeChat page without selecting any components. In the interaction on the right side of the column, click New Interaction-When the page is loaded-Set the selection-WeChat combination in the master, and set the arrival to true; then open the other 3 one by one For each page, follow the same method to set the corresponding component combination in the master when the page loads.

Open the WeChat page, address book page, discovery page, and me page one by one, and click New Interaction

Then click when the page loads-set selected-master/WeChat combination

Step 4: One page of the interaction

Conclusion

OK, through the first four steps, you can use the master to draw the APP navigation menu; about the sequence of the first and second steps, you can also create a new master in the master bar first, and then design the master. Drag into the page, so it can be done, it depends on personal habits.

In addition, 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 >>