Axure Case: Make Interactive App Nav Frame
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
The high fidelity interactive framework allows us to simulate the interactive effect when the program is loaded. It can also realize the simplicity of the page structure. There is no need to place too much page content on a canvas (For example, use many states of dynamic panels to save content), resulting in too long loading time.
Today, let's learn how to implement a high fidelity navigation framework.
Pages and Widgets Setup
First, make the home page. The home page is realized through the dynamic panel. It has two states: one is the Nav and the other is the internal frame. The specific production method is not detailed, as shown in the image above.
The content area on the right is realized through the dynamic panel. It has two states: one is the motional loading icon, and the other is the inline frame, which is used to load different page contents.
After making the home page, we can make the content of other pages.
Interactions Setup
The interaction actions in the nav list of the home page has the following steps:
1. Open link in frame: when clicked, different pages will be opened in the inline frame.
2. Set the title text to the corresponding list text.
3. Set the Nav dynamic panel to Frame and load the animation at the same time.
Then set the interaction of Nav panel. When the panel state changes:
1. Set the status of the content panel to state 2 (loading...)
2. Wait for 200ms
3. Set the state of the content panel to state 1( content frame)
In this way, the interaction of loading content is set up. Next, we also need to set the interaction of backing to the nav list.
When the back button is clicked:
1. Set the state of Nav panel to nav
2. Set the state of the content panel to state 2 (loading...)
Finally, add a mobile phone frame to all the contents.
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