Axure Tutorial: Automatically Scrolling Ranking Table
Introduction
Ranking table is a common feature in social app, so today we will teach you how to make a ranking table that can scroll automatically. Through this tutorial, you can use the basic dynamic panel and repeater.
Features to be Realized
The user ranking table keeps rolling and repeating.
How to Realize these Features
1. Make the basic contents of the form through the repeater.
2. Make rolling effect through repeating of dynamic panel state change.
Preview the completed prototype for this tutorial
Widgets Setup
1. Make table header with labels and rectangle.
2. Making table body with repeater.
Interactions Setup
After making the table, we select the repeater table, turn the repeater into a dynamic panel, and copy several states of the dynamic panel (state1 by default), depending on your data volume. The data volume in the case is 10, and the first 5 are displayed by default, so we need a total of 2 states.
Finally, we write the interaction of scrolling. When the dynamic panel is loaded, we set the state of the dynamic panel to next, check the warp from last to first, set the animation effect of sliding , and set the animation time (the animation time determines the rolling speed. The longer the time, the slower the speed).
In this way, we have completed the prototype template of making automatic rolling ranking table with repeater. In the future, we only need to fill in or import the specific content in the repeater table of each state in the dynamic panel to automatically generate the effect of table scrolling
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