Axure Tutorial: The purpose of the dynamic panel
Introduction
After writing a few Axure tutorials, I found that the starting point of the tutorial may be a bit high, and the realization of the effect is too much to talk about, while ignoring the Axure features and the use of basic components, then starting from this tutorial, these are gradually explained.
About the Dynamic Panel
The dynamic panel is a very frequently used component in Axure prototyping, and its main purpose is to achieve some dynamic interactive effects. Therefore, if you are not familiar with the use of dynamic panels, it will have a great impact on the making of Axure prototypes, so what can dynamic panels do? There are mainly the following aspects:
- Hide and show
- Sliding effect
- Drag effect
- Multi-state effect
The above effects are reflected in the widget properties of the panel.
So what kind of features can be achieved through these properties? Just a few examples.
1. Show/hidden effects
When we often make prototypes, we need to click the button to show some elements that are not on the interface, such as:
Scenario A: The login feature clicks the login button when the user name is not filled in, and displays a prompt asking the user to fill in the user name.
Scenario B: When we need a certain action of the user, a prompt box pops up. The prompt box disappears when the user clicks the OK button of the prompt box.
Scenarios such as the above all require the display and hide effects of dynamic panels.
The initial state of the dynamic panel is hidden or displayed, which can be achieved by right-clicking the dynamic panel - Edit Options - Set to Show (or) Set to Hide.
2. The sliding effect of the dynamic panel
Different from the show-hide effect, the sliding effect of the dynamic panel is generally triggered by other interactive events, which may be clicked on a button or realized when the page is loaded. for example:
Scenario A: The effect of some scrolling text on a website.
Scenario B: Click the login button, and the pop-up of the login panel closes the effect.
Generally, the sliding effect requires a complex trigger process, such as through the page loaded event of the page. Now, I will not explain too much here, and it will be easier to understand if I introduce it through a case in the future.
3. The dragging effect of the dynamic panel
The dragging effect of the dynamic panel is necessary for mobile Internet product prototypes, and is mainly used for APP product prototypes. Used to achieve some effects when the panel is dragged.
Scenario A: The slide to unlock feature of the mobile phone.
Scenario B: Portrait browsing feature of mobile pages.
Scenario C: The horizontal page change feature of the mobile page.
The role of dynamic panel dragging is very important, and various effects can be made in combination with the system's own variables related to it.
For example, Axure itself does not have the feature of random numbers, but when dragging the dynamic panel, the feature of random numbers can be realized. This will be described in detail in the random dice case later.
4. Multi-state effect
The multi-state effect of dynamic panels is very common in website prototypes, which greatly reduces the number of dynamic panels. For example, hiding a panel and displaying the effect of another dynamic panel can be achieved by unifying different states of a dynamic panel; and the sliding-in and sliding-out effect of a dynamic panel can sometimes be realized by changing the state.
Different states of the dynamic panel can also realize image carousel effects, graphics rotation effects, etc.
In Axure, you can convert a widget or multiple widgets into a dynamic panel. In fact, these widgets are placed in the state 1 of a dynamic panel, which means that the dynamic panel is actually a multi-layer container, and each layer of the container can be contains multiple widgets.
We can add multiple states to the dynamic panel in the Dynamic Panel Manager and adjust the order of these states to achieve different display effects. The dynamic panel shows the top state in the dynamic panel manager by default.
In Axure 10, we can view the status of all dynamic panels in one view.
View all dynamic panel status (Axure 10)
The introduction of the dynamic panel is here first, and in the following tutorials, we will slowly familiarize ourselves with its usage and features.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Leave a comment