Axure Tutorial: Mobile left and right Sliding Interaction
Introduction
Yesterday, we needed to make a prototype of the mobile event page, which required a product display module, and the mobile version required the effect of swiping gestures. As a result, it took a long time to think about how to realize this small feature.
Next, let's talk about my method, I think it should be the fastest way.
Widgets Setup
As shown above: Put a mobile phone frame, and see where the left and right gesture effects need to be done in the middle. In this module position, create three small modules, these three small modules are the parts that need to be slid.
2. Convert them to dynamic panel
Here is a small point, everyone pay attention.
First convert the three small modules into dynamic panels (we can call them Outer), and reduce the width of the dynamic panels to the inside of the phone, as shown in the image:
Click into the dynamic canvas, and then convert the three small modules into dynamic panels (we call it Inner):
Key point: why convert the dynamic panel twice?
Because the panel Outer needs to match the outermost mobile phone frame, with a fixed width, and the content cannot exceed it. The panel Inner is for the convenience of adding drag events later.
Interactions Setup
After the widgets are done, we need to start adding events. Let's first think about what effect we need at the end:
- The three small modules can slide left and right, and the contents of the sliding should move together;
- Sliding left and right requires boundary. The leftmost side cannot exceed the leftmost position of the module, and the rightmost side cannot exceed the rightmost position of the module.
Select the dynamic panel Inner and add a drag event to the entire panel.
It must be a horizontal drag, and it is not necessary to add a border. It is suggested that it is more convenient to calculate from the left boundary, just see where the left side can reach the maximum and where the minimum can reach.
Well, let's preview the effect. Is it very simple?
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