Axure 9 actual combat case, master application 3, use the master to draw a high-forced APP prototype

---

Preface

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

I don’t know when it started. In APP prototyping, product managers like to set up an anti-authentication phone frame, let alone the overall look really high.

High-fidelity prototype effect

In this article, we will explain to you how to use the master to draw a bao zhen APP prototype, so as to learn more functions in the master.

The first step: create a master to draw a real phone frame

We need to be clear beforehand. The size of the commonly used (IOS side) APP prototype is 375×812. This is based on the current full-screen era, with the iPhone X resolution (1125×2436) as a reference, 375×812 It is exactly one third of 1125×2436, commonly known as a double picture.

Let’s start the tutorial formally. First, add a master in the master column on the left, and then drag a rectangle 2 (without border F2F2F2 color) into the master, and set its size to 375×812.

Add a master

Drag in a rectangle 2 and set its size to 375×812

Then drag in the picture of the outer frame of the iPhone X we prepared (it must be a transparent picture in PNG format); then modify the size of the outer frame of the phone so that the inner side is aligned with the rectangle, that is, the inner size is 375×812.

Drag the frame picture of iPhone X into the master

Modify the size of the outer frame of the phone so that the inner side is aligned with the rectangle (that is, the size is 375×812)

Then cut the picture along the left and right sides of the first rectangle; then cut the picture along the innermost horizontal line at the top and bottom of the outer frame, and delete the extra blank transparent picture in the middle. Cutting is to not block the interaction of other components); then merge the outer frame of the phone, and then select all the components, set their positions to 2, 6 (that is, the position of the first rectangle is exactly 30, 30, which is more convenient Draw a prototype).

Cut the picture on the outer frame of the phone according to the cutting line in the picture, and delete the extra pictures in the middle

Merge the outer frame of the phone, and then select all the components, set the position to 2, 6 (that is, the rectangular position is 30, 30)

Step 2: Add a bottom horizontal line to the outer frame of the phone

First drag a rectangle into the master (used as the bottom horizontal line), set its border to 0, size to 134×5, fill color to #00000, and set its rounded corners to 3; then drag the bottom horizontal line, Align it to the center of the background rectangle, 8 pixels away from the bottom edge of the background rectangle (that is, 764 from the top edge); then delete the first rectangle, and then select the outer frame of the phone and the horizontal line at the bottom to set it as a combination.

Drag in the rectangle, set its border to 0, size to 134×5, and fill color to #00000

Set the rounded corners of the rectangle to 3

Drag the bottom horizontal line to align it to the center of the background rectangle, 8 pixels from the bottom

Delete the first rectangle, then select the outer frame of the phone and the horizontal line at the bottom to set it as a combination

Step 3: Use the master to draw a high-fidelity prototype

First, right-click on the master and select drag and drop behavior-fixed position; then start to create a page, and then drag the master into the page, the master will be automatically inserted in a fixed position.

Right-click on the master-drag and drop behavior-fixed position

Start to create a page, drag the master into the page, the master will be automatically inserted into a fixed position

Or right-click on the master, select Add to page..., click Select all in the pop-up window, and then click OK to insert the master into all pages that do not contain the master; then you can start to draw the prototype .

Right-click on the master-add to page...

Click select all, and then confirm, you can insert the master into all pages

Conclusion

OK, through the first three steps, you can use the master to draw a high-quality (bao zhen) APP prototype; in addition, regarding the second step, there will be jaggedness in the reduced image in Axure, if you want the image to be more fidelity Some, after determining the size of the picture, use PS or other picture editing tools to modify the size of the picture, and then import it into Axure.

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 (this article only provides iPhone X mobile phone frame materials).

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 >>