Axure quick prototype creation example

I. Summary

Axure is mainly used to quickly build a prototype of the product. It is still a bit complicated to get started with this software, and there is no complete example on the Internet.

What we need to do here is to build a website prototype step by step.

First look at the final result:

Ii. Basic Knowledge

The most important thing here is to understand the functions of several panels on the main interface.

1. Main Menu and toolbar
Perform common operations, such as opening and saving files, formatting controls, and automatically generating prototypes and specification documents.
2. Site Map panel
Add, delete, rename, and organize the page layers of the designed pages (including the line chart and flowchart ,.
3. Control Panel
This Panel contains wiremap controls and flowcharts controls, such as buttons, images, text panels, and rectangular boxes.
And flowchart design. In addition, you can load an existing part library (*. rplib file) and create your own part library.
4. Module panel
A module is a special page that can be reused. In this panel, you can add, delete, rename, and classify modules.
5. wiremap workspace (or page workspace)
The wiremap workspace is the main area of your prototype design. In this area, you can design wiremaps, flowcharts, custom components, and modules.
6. Page comments and interaction Areas
Add and manage page-level comments and interactions.
7. control interaction panel
Define controls, such as links, pop-up, dynamic display, and hide.
8. Control comment panel
Annotate the functions of the control.

NOTE: Refer to axsure quick prototyping Version 2

Iii. 2 difficulties

1. Billboard Switching

The main idea is to use the onclick () event of the button to control whether the dynamic panel is displayed or not. Here, we set three dynamic panels, each of which corresponds to the corresponding advertisement.

Then three buttons are used to trigger different panels. For example, you can click button1, tab1, tab2, and tab3 to hide them. You can change the button style to make the effect better.

2. display in the login window

The dynamic panel is used here. The first dynamic panel is a translucent layer, and the second is a logon window. The initial status is hidden. After you click "Log on", the status changes to display.

4. Close the ticket

Press the shortcut key F5 to preview it in the browser.