Axure 9 actual combat case, repeater application 1, drawing APP list page (high interaction)

---

Preface

In the Axure 9 actual combat case column-basics (learn more>>) , we explained the actual combat cases of basic components, dynamic panels, interactive events and masters respectively. I believe that the students who have studied have entered the actual combat stage. ; So in the Axure 9 actual combat case column-advanced article (Course Introduction >>) , we will focus on actual combat cases of repeaters and variable functions, and learn the high-interaction design of product prototypes with everyone, helping you quickly improve your combat capabilities .

In the prototyping work, it can greatly reduce the working time and compress the size of the RP file. In addition to the master, there is a repeater. Especially when drawing the list page, the use of the repeater can achieve the effect of getting twice the result with half the effort; so the advanced chapter In the first tutorial, let’s first explain how to draw the APP list page with a repeater.

Effect picture of repeater list

Let's take a look at the rendering of the APP list page first. You can see that the main components of the list page include:
① Each line of the list is composed of different pictures and user nicknames;
② Click on a line to jump to a different page.

First draft of the list page

In order to save time, here we have prepared the first draft of the list page in advance, let's explain to you how to draw the list page with a repeater.

Step 1: Draw the basic components of the repeater

First, drag a repeater into the page from the components in the left column, then double-click the repeater to enter the editing state; first delete the default components in the repeater (the new design can follow your ideas better), and then follow Draw the basic components (here is the avatar picture, the user name text label, and the background rectangle).

Drag a repeater to the page

Double-click the repeater to enter the editing state, and draw the basic components (such as avatar picture, user name text label, background rectangle)

Here we can set the style of the basic components of the repeater, such as setting rounded corners for pictures, setting font, color, and size of text labels, setting mouse hovering styles for background rectangles, etc., which will be applied and displayed when the repeater is loaded Style again.

Step 2: Set the repeater style data

First, in the right column style, create 2 columns of data in the data module and name them name and pic respectively (please use English as much as possible, the Chinese name may sometimes be read incorrectly); then enter the corresponding user name in the name column; then Right-click in the pic column, select Import Pictures, and import different pictures for each row.

Create 2 columns of data in the data, namely name and pic

Enter the corresponding user name in the name column

Right-click in the pic column-import pictures

Import different pictures per line

The third step: set the repeater to load each item

First switch to the interaction on the right side column, click on the unselected target of each load-setting text (it shows that no target is selected because we deleted the default component of the repeater in the first step), and select the user name text Label; then click the fx of the value to open the edit text pop-up window, delete the default value in the variable or function box, then click to insert the variable or function, and select the Item.name column of the repeater/data set in the drop-down menu (this means The text value of the user name is set to the Repeater Item.name column).

Click No target selected, select username

Then click on the fx of the value to open the edit text pop-up window

Delete the default value in the variable or function box, then click to insert the variable or function, and select Item.name from the drop-down menu

Then click Add action, select the setting picture, and then select the avatar picture; in the setting default picture, click the arrow to open the drop-down menu and select the value in the menu; then click the fx of the value to open the edit value pop-up window, and click Insert in the pop-up window Variable or function, select the Item.pic of the repeater/data set from the drop-down menu (this means that the value of the avatar picture is set to the Item.pic column of the repeater).

Click Add action, select set picture, and then select avatar picture

Set the menu of the DEFAULT picture to the value

Click the fx of the value to open the edit value pop-up window, then click to insert a variable or function, and select Item.pic

The third step of repeater interaction

Step 4: Set up multi-situation click interaction

Through the above 3 steps, the repeater list is basically realized, but sometimes in order to achieve a high-interaction prototype, we will set a different click interaction for each row.

First, we create 2 sub-pages under the repeater list page, respectively naming visitors and registered users, and simply draw them to distinguish the two pages for click interaction; then double-click the repeater to enter the editing state, and select the repeater’s The background rectangle, and then click on the new interaction in the interaction on the right column.

Create 2 subpages for click interaction

Select the background rectangle and click New Interaction

Then click when click-open link-visitor (means opening the visitor page when clicking on the background rectangle); then click Enable Situation to open the situation editing pop-up window, click Add Condition (Create Row) in the pop-up window, and set the second menu as User name, the third menu is include, and the fifth menu is user. (Interaction here means: when the component text of the user name contains a user, click to open the visitor page)

Click when clicked-open link-visitor

Click on the enable scenario to open the scenario edit pop-up window

Click Add Condition (Create Row), and set the second, third, and fifth menus as Username, Contains, User

Then, according to the same situation and conditions, set when the component text of the user name does not contain a user, click to open the registered user page. We select the interaction of scenario 1, copy and paste it as the second scenario; then click the scenario condition of the second scenario to open the scenario editing pop-up window, modify the scenario name to scenario 2 in the pop-up window, and modify the third menu to exclude ; Then click Case 2-visitors who opened the link and modify the link to be a registered user.

Select case 1, copy and paste as the second case

Click on the situation condition of the second situation to open the situation edit pop-up window

Change the name to case 2, and change the third menu to not include

Modify the target of the open link in Scenario 2 to registered users

The fourth step is the interaction of the background rectangle

Conclusion

OK, after the first four steps, you can use the repeater to draw a highly interactive APP list page; if you still don’t understand, you can download the courseware at the end of the article to continue learning.

Practice effect chart

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.

Link: https://mosi.lanzous.com/b01i339uf
Password: hgd4

(@默林如斯 Originally produced, reprinting without permission is prohibited, infringement must be investigated)

"Axure 9 Case Tutorial-Advanced": Explain the advanced operation of Axure 9 from the perspective of actual combat cases, help you learn the high-interaction design of product prototypes from the case, and help you quickly improve your actual combat capabilities! Suitable for students who are ready to advance in Axure! (Axure courseware provided)
All advanced tutorials: https://blog.csdn.net/congzi530/category_10760486.html