Axure Tutorial: Make Voting Interface with Repeater
Introduction
With the popularity of mobile Internet, we often vote on mobile phones. So today I'll teach you how to make a voting interface with repeater.
Features to be Realized
Set the number of remaining votes. When the number of remaining votes is greater than 0, users can vote for candidates; If the number of remaining votes is less than 1, a notice is shown.
How to Realize these Features
Preview the completed prototype for this tutorial
Widgets Setup
This prototype is mainly composed of rectangular title text at the top, remaining votes, notice panel, and candidate list made by repeater. The feature of the remaining votes text is the number of people who can vote at one time. Just fill in the wanted number. In the case, it is 4 by default; The notice is used to remind users that the remaining votes have been used up. Repeater is the most important component. We use it to make a candidate list. In the future, we only need to fill in text and import images to automatically generate the list.
1. Repeater internal components
In the repeater, we mainly add the following widgets:
Column1 (Image), Name, Votes (label), Number (label), Voting button (button).
2. Repeater table setting
There are 4 columns in the repeater table:
Number corresponds to the components of the upper rectangle, which can be filled in the order of 123456;
Column 1 corresponds to the image element above. Right click to import the local image, or fill in the URL network address;
The name column corresponds to the component with the above name, which can be filled in or imported from Excel;
The votes column corresponds to the components of the above votes (text label), which can be filled in or imported from excel.
Interactions Setup
When the Vote button is clicked, judge the number of vote surplus. If it is less than 1, a notice will be shown; Conversely, increase the number of votes text field by 1, disable the current button, and decrease the number of votes surplus by 1.
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 technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment