Axure quick prototype creation example

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.