Axure Tutorial: how to use a dynamic panel? Detailed description of dynamic panel Functions

After writing a few axure tutorials, I found that the starting point of the tutorial may be a little high. I tried to explain the IMPLEMENTATION OF THE EFFECTS too much, while ignoring the use of axure functions and basic components, from the beginning of this tutorial, I will explain these steps gradually.

About axure dynamic panel

Dynamic panel is a frequently used component in axure prototyping. Its main purpose is to achieve some dynamic interaction effects. Therefore, if you are not familiar with the dynamic panel, it will have a great impact on the creation of the axure prototype. What can be done on the dynamic panel? It mainly includes the following aspects:

1. Hide and display

2. sliding effect

3. Drag Effect

4. multi-state effects

These effects are reflected in the component attributes of the mobile Panel.

What functions can be achieved through these attributes? A few simple examples.

1. Show Hidden Effects

We often need to click the button to display some elements that are not available on the interface when prototyping, such:

Scenario A: When you do not enter the user name, click the logon button to display a prompt asking the user to enter the user name.

Scenario B: a prompt box is displayed when you need to perform an operation on the user. The prompt box disappears when you click OK in the prompt box.

For example, the above scenes require the display and hiding effect of the dynamic panel.

The initial status of the dynamic panel is hidden or displayed. You can right-click the dynamic panel, select Edit option, and set it to display (OR) to hide.

2. sliding effect of dynamic panel

Unlike the hidden display effect, the sliding effect of a dynamic panel is generally triggered by other interactive events, either by clicking a button or by page loading. For example:

Scenario A: The effects of some scrolling text on the website.

Scenario B: click "Log On". The hide effect is displayed on the logon panel.

Generally, the sliding effect requires a complex excitation process, such as through the onpageload event of the page. Now, I will not explain it too much here, but it will be easier to understand it in the future.

3. Drag the dynamic panel

The drag effect of the dynamic panel is required for the mobile Internet product prototype and is mainly used for the product prototype of the app. It is used to achieve some effects of panel dragging.

Scenario A: Slide and unlock the mobile phone.

Scenario B: Portrait browsing of the mobile phone page.

Scenario C: the horizontal page feed function of the mobile phone page.

......

Dynamic panel dragging plays a very important role. It can be combined with the built-in variables of the relevant system to make a variety of effects.

For example, axure itself does not have the random number function, but when dragging the dynamic panel, it can implement the random number function. This will be detailed in the subsequent Random dice case, of course, if you have a wealth of axure experience, you can download the random attention component from the building components for reference.

4. multi-state effects

The multi-state effects of dynamic panels are widely used in website prototypes, greatly reducing the number of dynamic panels. For example, hiding a panel and displaying the effects of another dynamic panel can be achieved by unifying the different states of a dynamic panel; in addition, the sliding effect of the dynamic panel can also be achieved through changing the status, for example, the sliding effect of the dynamic panel in the axurerp tutorial (4) of the small building, it is achieved by moving the dynamic panel and switching the status of the dynamic panel respectively. In the web page prototype, the tab effect can also be achieved by switching the dynamic panel status.

Different States of the dynamic panel can also achieve image carousel effect and image rotation effect.

In axure, you can convert components or multiple components into dynamic panels. In fact, these components are placed in the State 1 of a dynamic panel. That is to say, a dynamic panel is actually a multi-layer container, each layer of a container can contain multiple components.

You can add multiple states to the dynamic panel in the dynamic panel Manager (in the lower-right corner of the software interface, if not, select the "navigation bar-View" option) and adjust the status order, to achieve different display effects. By default, the dynamic panel displays the top status in the dynamic panel manager.

The introduction of the dynamic panel is here first. In the subsequent tutorials, we will gradually familiarize ourselves with its usage and features.

Axure Tutorial: how to use a dynamic panel? Detailed description of dynamic panel Functions