Quick-response Axure prototype with graphic and text explanation

generally in Axure in the creation of a prototype open page or link, there will be a blank page waiting for the situation, this Axure Learning Tutorial will teach you to use Dynamic Panel state and dynamic panel display boundary characteristics, so that the prototype can be quickly responsive, smooth and not Dayton.

principle Explanation

Dynamic Panel has the characteristics of state and boundary, the state is under different conditions control, you can let the dynamic panel to render different content; the boundary attribute is within the dynamic panel, and the content beyond the border (the Blue dashed box) will not be displayed in the dynamic panel.

Using this feature of dynamic panel, we can get two kinds of fast response prototype interaction Design Methods:

1. When no moving effects occur in different content locations , we can make use of the state characteristics of the dynamic panel .

2. When there are mobile effects in different content locations, we can manually add the move effect using the boundary properties of the dynamic panel .

Example Tutorial Description

A simple wireframe prototype is modeled to illustrate the method and effect of Fabrication.

Navigation bar

the navigation bar position is fixed, there is no moving effect, there is a toggle effect, here can take advantage of the dynamic panel state characteristics, to establish 5 different conditions of the State. Double-click the dynamic panel, you can bring up the dynamic Panel manager, dynamic Panel Manager can add, delete, copy, adjust the order and other Operations.

in turn, the A,detail,b,c,d

tab bar and content

because the chat interface ( detail ) overrides the tab bar ( ABCD ) , So place the tab bar into the dynamic panel of the Content. Set up a dynamic panel with a size of 375x603 to add 5 Dynamic panels to the dynamic panel, as shown in a , detail , B , C , D . A and detail sizes are 375x603 , BCD are 375x554; Their order is bottom-to-top, that is, the leftmost of the graph is the lowest, and the rightmost is the topmost, rising from left to Right. In addition to A in ( 0,0 ), Other dynamic panels ( detail , B , C , D ) are at ( 500, 0 ).

Interactive Settings

the First interaction is, Click on the home chat bar, load the chat interface (detail). Set to set the navigation bar State to detail, use the fade 500ms, and move detail to ( 0,0 ), use slow exit 500ms . The effect is: after clicking on the chat bar, the navigation bar becomes the chat state, the chat main interface slides from the right side of the screen, and overrides the tab bar. "save time, You can set all the chat bars for the same interface and Effects. "

Interactive Settings

the First interaction is, Click on the home chat bar, load the chat interface (detail). Set to set the navigation bar State to detail, use the fade 500ms, and move detail to ( 0,0 ), use slow exit 500ms . The effect is: after clicking on the chat bar, the navigation bar becomes the chat state, the chat main interface slides from the right side of the screen, and overrides the tab bar. "save time, You can set all the chat bars for the same interface and Effects. "

Detail interface back to main interface

the third interaction is, by the tab bar to bring up the different interface. Specifically set to, when set A mouse click, move detail,b,c,d to (500,0), Sets the navigation bar to the first page state, fading 500ms. Move detail,b,c,d does not animate, that is, you can display the specified page directly. The settings for b,c,d are similar to a .

label A interaction

label b Interaction

label C Interaction

label D Interaction

Results and Summary

Since all of our interactions are done in the same interface, while the prototype shows that you need to open other interfaces, in fact they all run in the same interface and can respond quickly without affecting the experience of the tester because the prototype interface is loaded, which makes the prototype presentation more realistic and natural.

Original from: Jane book /Micro Well

Quick-response Axure prototype with graphic and text explanation