Axure Tutorial: Make Widgets Styles in Different Scenarios with Repeater
Introduction
"How to present different functional styles when making list with repeaters?"
The repeater is a very good widget for displaying list data, because it can design personalized layout styles according to the different needs, especially suitable for the display of list such as e-commerce and news feeding.
Those who have used repeater know that the general style layout is fixed, that is to say, they all look the same, but the content is different. How to display the small style differences of the same data in the repeater list?
Take the message list below as an example.
The elements generally displayed in the message list are the avatar, the new message reminder icon (number or small red dot), the time and muted icon.
Take a look at the image, the first group has a new message, so there is a small red dot in the upper right of the avatar, and there is a muted icon; the second group does not has the dot, but has a muted icon.
Let's try to make this interface prototype.
Widgets Setup
Drag a repeater into the canvas and delete all contents in the repeater. And add the following widgets:
- An avatar made of a rectangle
- A title made of a label
- A content made of a label
- A time made of a label
- A muted Icon
The repeater's data sheet has the following columns:
- Title
- Content
- Time
- New_msg (1 means it is a new message, 0 means it is not a new message)
- Muted (1 means it is muted, 0 means it is not muted)
Interactions Setup
The key point is here, you need to set the cases, and determine whether the New_msg value is 1 by means of a conditional expression. If it is 1, the small red dot will be shown, otherwise the small red dot will be hidden, and the muted will be the same.
Summary
Judge key fields by adding different cases, and show or hide corresponding widgets.
In this way, styles in different scenarios can be achieved, which is convenient for developers and testers to understand more intuitively, which is also one of the benefits of prototypes with interactive effects.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting!
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment