Axure Case: Make Interactive Mobile App with Only a Canvas
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
As we all know, Axure can be used to design not only low-fidelity prototypes such as wireframes, but also interactive high-fidelity prototypes, so as to combine UI / UX.
Generally speaking, the UI design draft is designed in professional design tools, such as Sketch or Figma. In order to facilitate viewing and editing, these design drafts are often completed in one canvas.
After importing them into Axure RP, how to realize the interactions between all pages. I believe most designers put them into different pages, and then design the whole app by linking these pages. But the disadvantages of this method are also obvious:
1. Page transition motion is difficult to set.
2. Because all pages are not on a canvas, it is difficult to refer to other pages in design.
So, in order to achieve high fidelity interactive prototype. What should we do?
The first is to use the inline framework to load different app pages, which I mentioned in the tutorial "Axure tutorial: Make Interactive Nav Frame"; The other is to make all pages and pop-ups into different dynamic panels and place them in a canvas.
The latter is more intuitive and similar to the UI design way.
Today we will learn the second way.
Widgets Setup
1. First, we set the size of the canvas to the size of iPhone 11. This is also consistent with the design draft.
2. Then copy all UI design drafts into the canvas.
Only place the Home page in the design area of the canvas. Other pages and controls are not in the design area of the canvas, so they are invisible after generating the prototype.
Interactions Setup
Postion Settings
1. Make other pages into dynamic panels. And pinned at the center top of the browser.
2. The pop-up is fixed at the corresponding place on the screen according to the desired position of the pop-ups.
3. Hide dynamic panel when the dynamic panel is loaded (all pages and popups). With this setting, the dynamic panel will not be shown on the screen.
Page Transition Settings
When the button is clicked, the responding page is shown and the animation of sliding to the left is set.
When the action sheet button is clicked, the corresponding action sheet will be shown, and the sliding up animation will be set.
Enter the dynamic panel of the secondary page, select the back button, set that when the button is clicked, the secondary page will be hidden, and set the animation of sliding to the right.
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